League of Legends Classes with Plotapi Chord

Preamble

In [1]:
from plotapi import Chord
import json

Chord.set_license("your username", "your license key")

Introduction

In this notebook we're going to use Plotapi Chord to visualise the co-occurrences between League of Legends classes. We"ll use Python, but Plotapi can be used from any programming language.

In a chord diagram (or radial network), entities are arranged radially as segments with their relationships visualised by ribbons that connect them. The size of the segments illustrates the numerical proportions, whilst the size of the arc illustrates the significance of the relationships. Chord diagrams are useful when trying to convey relationships between different entities, and they can be beautiful and eye-catching.

Dataset

We're going to use League of Legends Champion data from version 11.15.1, a copy of which is available in this documentation website. Let"s get loading the data.

In [2]:
with open("lol_classes.json", "r") as f:
    data = json.load(f)
    
names = ['Assassin', 'Fighter', 'Mage', 'Marksman', 'Support', 'Tank']

Visualisation

Let's use Plotapi Chord for this visualisation, you can see more examples in the Gallery.

We're going to adjust some layout and template parameters, and flip the intro animation on too.

Because we're using a data-table, we can also click on any part of the diagram to "lock" the selection.

In [15]:
Chord(
    data["matrix"],
    names,
    colors="league",
    details_thumbs=data["details_thumbs"],
    noun="Champions",
    thumbs_width=50,
    thumbs_margin=0,
    credit=True,
    padding=0.05,
    arc_numbers=True,
    margin=30,
    curved_labels=True,
    reverse_gradients=True,
    verb="appear together in",
    data_table=data["data_table"],
    data_table_column_width=140,
    data_table_show_indices=False,
    animated_intro=True,
    animated_duration=3000,
).show()
Plotapi - Chord Diagram

Linked Data Table

Preamble

In [1]:
from plotapi import Sankey

Sankey.set_license("your username", "your license key")

Introduction

Plotapi Sankey supports a linked data table. This means as you hover over nodes and links in the Sankey diagram, a data table will be filtering in real-time to show more information.

As we can see, we have set our license details in the preamble with Sankey.set_license().

Dataset

Plotapi Sankey expects a list of dictionary items, these will define the flow between a source and a target.

In [2]:
links = [
    {"source":"Group A", "target":"Rank 1", "value": 1000},
    {"source":"Group B", "target":"Rank 1", "value": 300},
    {"source":"Group B", "target":"Rank 2", "value": 600},
    {"source":"Group B", "target":"Rank 3", "value": 400},
    {"source":"Rank 1", "target":"Club A", "value": 700},
    {"source":"Rank 1", "target":"Club B", "value": 400},
    {"source":"Rank 1", "target":"Club C", "value": 200},
    {"source":"Rank 2", "target":"Club B", "value": 200},
    {"source":"Rank 2", "target":"Club C", "value": 400},
    {"source":"Rank 3", "target":"Withdrawn", "value": 400},
    {"source":"Club A", "target":"The Most Amazing Prize", "value": 500},
]

We can add many source's and target's in any arrangement.

To make use of the linked data table, we need to provide some data in CSV format. This could be loaded through a file, directly in a strong, or using a pandas DataFrame (.to_csv(index=False)).

In [16]:
data_table = '''Start,Destination,TV Rating,Image
Group A,,9.0,<img src='https://datacrayon.com/images/data-is-beautiful/pokemon_thumbs/101.png'>
Group A,Rank 1,6.0,<img src='https://datacrayon.com/images/data-is-beautiful/pokemon_thumbs/192.png'>
Group A,Rank 1,5.0,<img src='https://datacrayon.com/images/data-is-beautiful/pokemon_thumbs/213.png'>'''

Visualisation

We'll enable the linked data table by passing data into the data_table parameter, and we'll modify the data_table_column_width by setting it to a smaller value of $80$.

Here we're using .show() which outputs to a Jupyter Notebook cell, however, we may want to output to an HTML file with .to_html() instead. More on the different output methods later!

Be sure to interact with the visualisation to see what the default settings can do! Try hovering over Group A and its link to Rank 1.

In [27]:
Sankey(links, width=400, link_numbers=False, 
       horizontal_labels_at_shallowest=False, horizontal_labels_at_deepest=False,
       data_table=data_table, data_table_column_width=100).show()
Plotapi - Sankey Diagram

Data table mode includes the "locking" feature. Try clicking on the Group A node and you will see a padlock icon appear in the top right, and until you click somewhere again the current selection will persist.

You can do so much more than what's presented in this example, and we'll cover this in later sections. If you want to see the full list of growing features, check out the Plotapi Documentation.

Adjusting Layout Properties

Preamble

In [1]:
from plotapi import Sankey

Sankey.set_license("your username", "your license key")

Introduction

Let's take a look at some parameters that control the layout of our diagram.

As we can see, we have set our license details in the preamble with Sankey.set_license().

Dataset

Plotapi Sankey expects a list of dictionary items, these will define the flow between a source and a target.

In [2]:
links = [
    {"source":"Group A", "target":"Rank 1", "value": 1000},
    {"source":"Group B", "target":"Rank 1", "value": 300},
    {"source":"Group B", "target":"Rank 2", "value": 600},
    {"source":"Group B", "target":"Rank 3", "value": 400},
    {"source":"Rank 1", "target":"Club A", "value": 700},
    {"source":"Rank 1", "target":"Club B", "value": 400},
    {"source":"Rank 1", "target":"Club C", "value": 200},
    {"source":"Rank 2", "target":"Club B", "value": 200},
    {"source":"Rank 2", "target":"Club C", "value": 400},
    {"source":"Rank 3", "target":"Withdrawn", "value": 400},
    {"source":"Club A", "target":"The Most Amazing Prize", "value": 500},
]

We can add many source's and target's in any arrangement.

Visualisation

We can modify the width, height, and margin of our diagram.

The margin is a single float value that is applied as an equal margin of that size.

The background_color and border can be changed too.

By default a Plotapi Sankey diagram is centered, but this can be disabled with center=False.

Here we're using .show() which outputs to a Jupyter Notebook cell, however, we may want to output to an HTML file with .to_html() instead. More on the different output methods later!

Be sure to interact with the visualisation to see what the settings can do!

In [3]:
Sankey(links, colors="turbo", link_numbers=False,
       width=800, height=400, margin=0, center=False,
       background_color="#f1f1f1", border="#333 dashed").show()
Plotapi - Sankey Diagram

You can do so much more than what's presented in this example, and we'll cover this in later sections. If you want to see the full list of growing features, check out the Plotapi Documentation.

Adjusting Popup Layout and Text

Preamble

In [1]:
from plotapi import Sankey

Sankey.set_license("your username", "your license key")

Introduction

Plotapi Sankey makes use of popups (tooltips) to display more information when mousing over a node or link.

Let's see how we can add to the popup text and adjust the layout and template variables.

As we can see, we have set our license details in the preamble with Sankey.set_license().

Dataset

Plotapi Sankey expects a list of dictionary items, these will define the flow between a source and a target.

We can add a description to each link to have it display within the popup.

We can add descriptions to nodes by creating a node data structure that we will pass into Plotapi later.

In [21]:
links = [
    {"source":"Group A", "target":"Rank 1", "value": 1000, "description": "This was a <b>great</b> transition"},
    {"source":"Group B", "target":"Rank 1", "value": 300, "description": "This <i>could</i> have gone better"},
    {"source":"Group B", "target":"Rank 2", "value": 600},
    {"source":"Group B", "target":"Rank 3", "value": 400},
    {"source":"Rank 1", "target":"Club A", "value": 700},
    {"source":"Rank 1", "target":"Club B", "value": 400},
    {"source":"Rank 1", "target":"Club C", "value": 200},
    {"source":"Rank 2", "target":"Club B", "value": 200},
    {"source":"Rank 2", "target":"Club C", "value": 400},
    {"source":"Rank 3", "target":"Withdrawn", "value": 400},
    {"source":"Club A", "target":"The Most Amazing Prize", "value": 500},
]

nodes = [
    {"name": "Group A", "description": 'Group A is funded by the organisers.<br><img src="https://plotapi.com/gallery/images/cards/posts/sankey/getting-started-with-sankey_thumb.thumbnail.jpg">'},
    {"name": "Group B", "description": "A long sentence to demonstrate popup width, a longish but not that long sentence indeed!"}

]

We can add many source's and target's in any arrangement.

Visualisation

We have included the "description" property in the links and nodes data structures above, meaning they will not appear within the corresponding popups.

We can also set the following parameters:

  • tooltips - true to enable tooltips, false to disable them. Enabled by default.
  • popup_width - to change the popup width.
  • noun - to change the noun used in the popup text, defaults to "instances".
  • link_verb - to change the text used in the link popup text, defaults to "occurs in ".
  • node_verb - to change the text used in the node popup text, defaults to "occurs in ".
  • link_conjunction - to change the text used between the source and target name in a link popup. Defaults to a right-arrow, i.e "\u2192".

Let's demonstrate these below.

Here we're using .show() which outputs to a Jupyter Notebook cell, however, we may want to output to an HTML file with .to_html() instead. More on the different output methods later!

Be sure to interact with the visualisation to see what the settings can do!

In [24]:
Sankey(links, nodes=nodes,
       popup_width=400, noun="games", link_verb="battled together in ", 
       node_verb="battled in ", link_conjunction="Vs.").show()
Plotapi - Sankey Diagram

You can do so much more than what's presented in this example, and we'll cover this in later sections. If you want to see the full list of growing features, check out the Plotapi Documentation.

Animation Settings and Intro

Preamble

In [1]:
from plotapi import Sankey

Sankey.set_license("your username", "your license key")

Introduction

Plotapi Sankey supports animations - both for interactions and for nice introductions to our visualisation.

As we can see, we have set our license details in the preamble with Sankey.set_license().

Dataset

Plotapi Sankey expects a list of dictionary items, these will define the flow between a source and a target.

In [2]:
links = [
    {"source":"Group A", "target":"Rank 1", "value": 1000},
    {"source":"Group B", "target":"Rank 1", "value": 300},
    {"source":"Group B", "target":"Rank 2", "value": 600},
    {"source":"Group B", "target":"Rank 3", "value": 400},
    {"source":"Rank 1", "target":"Club A", "value": 700},
    {"source":"Rank 1", "target":"Club B", "value": 400},
    {"source":"Rank 1", "target":"Club C", "value": 200},
    {"source":"Rank 2", "target":"Club B", "value": 200},
    {"source":"Rank 2", "target":"Club C", "value": 400},
    {"source":"Rank 3", "target":"Withdrawn", "value": 400},
    {"source":"Club A", "target":"The Most Amazing Prize", "value": 500},
]

We can add many sources and targets in any arrangement.

Visualisation

We can control the animations with the following:

  • animated_intro - If set to true, will play an animation when the visualisaiton is loaded. This works nicely when paired with the.to_mp4() end-point to create a video.
  • animated_duration - The duration of the intro animation in milliseconds.
  • animated_links_speed - The duration of the animation when traversing each link when mousing over a node.
  • animated_hide_speed - The duration of the animation when moving the mouse out of a node.

Here we're using .show() which outputs to a Jupyter Notebook cell, however, we may want to output to an HTML file with .to_html() instead. More on the different output methods later!

Be sure to interact with the visualisation to see what the settings can do!

In [10]:
Sankey(links, animated_intro=True, animated_duration=5000,
       animated_links_speed=3000, animated_hide_speed=2000).show()
Plotapi - Sankey Diagram
In [12]:
Sankey(links, animated_intro=True, animated_duration=5000,
       animated_links_speed=3000, animated_hide_speed=2000).show_mp4()

You can do so much more than what's presented in this example, and we'll cover this in later sections. If you want to see the full list of growing features, check out the Plotapi Documentation.

Node Label Positions and Wrapping

Preamble

In [1]:
from plotapi import Sankey

Sankey.set_license("your username", "your license key")

Introduction

The Plotapi Sankey diagram node labels can be customised to enable/disable wrapping or to be displayed horizontally/vertically depending on their depth.

As we can see, we have set our license details in the preamble with Sankey.set_license().

Dataset

Plotapi Sankey expects a list of dictionary items, these will define the flow between a source and a target.

In [2]:
links = [
    {"source":"Group A", "target":"Rank 1", "value": 1000},
    {"source":"Group B", "target":"Rank 1", "value": 300},
    {"source":"Group B", "target":"Rank 2", "value": 600},
    {"source":"Group B", "target":"Rank 3", "value": 400},
    {"source":"Rank 1", "target":"Club A", "value": 700},
    {"source":"Rank 1", "target":"Club B", "value": 400},
    {"source":"Rank 1", "target":"Club C", "value": 200},
    {"source":"Rank 2", "target":"Club B", "value": 200},
    {"source":"Rank 2", "target":"Club C", "value": 400},
    {"source":"Rank 3", "target":"Withdrawn", "value": 400},
    {"source":"Club A", "target":"The Most Amazing Prize", "value": 500},
]

We can add many sources and targets in any arrangement.

Visualisation

The node labels can be adjusted through a combination of the following:

  • wrap_labels - true to enable text wrapping or false to disable it, enabled by default.
  • vertical_labels - true to enable vertical node labels, enabled by default.
  • horizontal_labels_at_shallowest - true for the shallowest labels to always be horizontal, enabled by default.
  • horizontal_labels_at_deepest - true for the deepest labels to always be horizontal, enabled by default.

Let's demonstrate these in action.

Here we're using .show() which outputs to a Jupyter Notebook cell, however, we may want to output to an HTML file with .to_html() instead. More on the different output methods later!

Be sure to interact with the visualisation to see what the settings can do!

In [3]:
Sankey(links, link_color_mode="source", colors="set2", link_numbers=False,
       vertical_labels=False).show()
Plotapi - Sankey Diagram
In [4]:
Sankey(links, link_color_mode="source", colors="set3", link_numbers=False,
       horizontal_labels_at_shallowest=False, horizontal_labels_at_deepest=False,
       wrap_labels=False).show_png()

You can do so much more than what's presented in this example, and we'll cover this in later sections. If you want to see the full list of growing features, check out the Plotapi Documentation.

Sankey Node Alignment

Preamble

In [ ]:
from plotapi import Sankey

Sankey.set_license("your username", "your license key")

Introduction

Plotapi Sankey supports different layouts using the specification of node alignment.

As we can see, we have set our license details in the preamble with Sankey.set_license().

Dataset

Plotapi Sankey expects a list of dictionary items, these will define the flow between a source and a target.

In [ ]:
links = [
    {"source":"Group A", "target":"Rank 1", "value": 1000},
    {"source":"Group B", "target":"Rank 1", "value": 300},
    {"source":"Group B", "target":"Rank 2", "value": 600},
    {"source":"Group B", "target":"Rank 3", "value": 400},
    {"source":"Rank 1", "target":"Club A", "value": 700},
    {"source":"Rank 1", "target":"Club B", "value": 400},
    {"source":"Rank 1", "target":"Club C", "value": 200},
    {"source":"Rank 2", "target":"Club B", "value": 200},
    {"source":"Rank 2", "target":"Club C", "value": 400},
    {"source":"Rank 3", "target":"Withdrawn", "value": 400},
    {"source":"Club A", "target":"The Most Amazing Prize", "value": 500},
]

We can add many source's and target's in any arrangement.

Visualisation

We can change how our nodes are arranged using the node_alignment parameter. It supports the following settings: left, right, justify, and center. Let's demonstrate these below.

Here we're using .show() which outputs to a Jupyter Notebook cell, however, we may want to output to an HTML file with .to_html() instead. More on the different output methods later!

Be sure to interact with the visualisation to see what the settings can do!

In [3]:
Sankey(links, link_numbers=False, node_alignment="right").show()
Plotapi - Sankey Diagram
In [4]:
Sankey(links, link_numbers=False, node_alignment="justify").show_png()