Below you’ll find a network (that I created) with all second generation Pokémon from the Johto region. All Pokémon from a certain evolution chain are connected.

As you already might have discovered, the network is interactive. If you hover over a Pokémon, a text box displays the Pokémon name. Otherwise, you can also click on a node and place a connected chain in another position.

Network creation

The network displays evolution chains. At this point, I might have to clarify what a Pokémon evolution chain is (if you have never played an entry of the series). Essentially, most of the Pokémon transform into a stronger form. This evolution is triggered by gaining experience or if the player uses a certain item. Pokémon of one evolution chain (or also sometimes referred to as an evolution family) are all related with each other. Hence, a network as visualization method suits this kind of data.

Data retrieval

The above displayed network is just a .html which was generated using Python and the package pyvis. Data was retrieved from multiple GitHub repositories. First, I needed some basic information on Pokémon. This link leads to a .csv which includes the needed Pokédex number and Pokémon names. One could say the Pokédex number is just an ID for a specific Pokémon. Additionally, this repo contains multiple files with data on evolutions and evolution triggers. Lastly, this kaggle data set houses transparent .png files depicting each Pokémon. With all the data at hand, it was a matter of merging a bunch of files.

The network

As there are various tutorials on network creation available, I’ll jump right in and explain how I generated this specific network in pyvis. My starting point is a list of multiple dictionaries which hold information on the nodes. Essentially, one dictionary holds one source and target node as key value pairs. For example, Chikorita evolves into Bayleef. The respective dictionary looks like this:

{
  "source_node": "Chikorita",
  "target_node": "Bayleef"
}

Next, I iterate over all existing dictionaries and build the network node by node and edge by edge. As the dictionary also contains the Pokédex number, I can easily map the node to a respective .png of the Pokémon. The picture just replaces a generic circle which represents the node.

from pyvis.network import Network

# initialize network
net = Network(height="900px", bgcolor="black", font_color="white",
              filter_menu=False)

for pokemon in node_data:
    source = pokemon["source_node"]
    target = pokemon["target_node"]

    # get Pokédex IDs (needed for images)
    id_source = pokemon["pokedex_id_source"])
    id_target = pokemon["pokedex_id_target"]

    # add source node
    net.add_node(source, title=source, shape="image",
                 image=f"{path_node_pictures}/{id_source}.png",
                 color="black")

    # add target node
    net.add_node(target, title=target, shape="image",
                 image=f"{path_node_pictures}/{id_target}.png",
                 color="black")

    net.add_edge(source, target, value=1.5, color="white")

net.save_graph("graph.html")

Unfortunately, pyvis doesn’t offer a way to write a self-contained .html. That means, the resulting file just contains a relative path to the Pokémon pictures. Therefore, the network has to be shared including the path_node_pictures folder and all images.

A network is (in my opinion) a fun way to display Pokémon evolution chains. Granted, it might not be the most convenient way to display all information associated with evolutions, but as the dictionaries also include some data on Pokémon types, evolution triggers, etc., I could easily display this information as e.g., colored edges. Additionally, a network including all currently available Pokémon would be another possibility.

If you have any ideas to enhance the network, feel free to message me. 😊

-Jakob