Directed Chord Diagrams

Preamble

In [ ]:
from plotapi import Chord

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

Introduction

The asymmetric (symmetric=False) Plotapi Chord diagram allows us to represent the value at each end of the relationship with a single ribbon. However, it may be more suitable to use two different ribbons with arrows to indicate the direction of the relationship. This is possible with Plotapi Chord.

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

Dataset

Chord expects a list of names (list[str]) and a co-occurence matrix (list[list[float]]) as input.

In [ ]:
matrix = [
    [0, 5, 6, 4],
    [2, 0, 5, 4],
    [6, 5, 0, 4],
    [2, 4, 3, 0],
]

names = ["Action", "Adventure", "Comedy", "Drama"]

It may look more clear if we present this as a table with the columns and indices labelled. This is entirely optional.

In [3]:
import pandas as pd
pd.DataFrame(matrix, columns=names, index=names)
Out[3]:
Action Adventure Comedy Drama
Action 0 5 6 4
Adventure 2 0 5 4
Comedy 6 5 0 4
Drama 2 4 3 0

Visualisation

To enable directed mode, we only need to set the directed parameter to true.

Here we're using .show() which outputs to a Jupyter Notebook cell, however, we may want to output to a 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!

In [7]:
Chord(matrix, names, directed=True, colors="yellow_blue").show()
Plotapi - Chord Diagram

The directed Chord diagram can be paired with reverse_gradients=True to make it easier to see where inbound/outbound relationships are coming from or going to.

In [6]:
Chord(matrix, names, directed=True, colors="yellow_blue", reverse_gradients=True).show()
Plotapi - Chord 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. and the Plotapi Gallery.

Mix and Match

Preamble

In [1]:
from plotapi import Chord

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

Introduction

We can mix and match some of our parameters to create a visualisation that looks significantly different, although it uses the same data.

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

Dataset

Chord expects a list of names (list[str]) and a co-occurence matrix (list[list[float]]) as input.

In [2]:
matrix = [
    [0, 5, 6, 4, 7, 4],
    [5, 0, 5, 4, 6, 5],
    [6, 5, 0, 4, 5, 5],
    [4, 4, 4, 0, 5, 5],
    [7, 6, 5, 5, 0, 4],
    [4, 5, 5, 5, 4, 0],
]

names = ["Action", "Adventure", "Comedy", "Drama", "Fantasy", "Thriller"]

It may look more clear if we present this as a table with the columns and indices labelled. This is entirely optional.

In [3]:
import pandas as pd
pd.DataFrame(matrix, columns=names, index=names)
Out[3]:
Action Adventure Comedy Drama Fantasy Thriller
Action 0 5 6 4 7 4
Adventure 5 0 5 4 6 5
Comedy 6 5 0 4 5 5
Drama 4 4 4 0 5 5
Fantasy 7 6 5 5 0 4
Thriller 4 5 5 5 4 0

Visualisation

Let's mix and match some parameters that we've covered in this gallery.

Here we're using .show() which outputs to a Jupyter Notebook cell, however, we may want to output to a 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!

In [4]:
Chord(matrix, names, padding=0.5, reverse_gradients=True,
      colors="accent", curved_labels=True, label_color="#777777",
      font_size_large="30px", arc_numbers=True,
      inner_radius_scale=0.45, outer_radius_scale=1.4).show()
Plotapi - Chord 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. and the Plotapi Gallery.

Equal-sized Segments

Preamble

In [2]:
from plotapi import Chord

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

Introduction

It may be desirable to have equal-sized segments in our Chord Diagram. This is possible with Plotapi, and makes use of the colored_diagonals feature. The idea is to determine the max frequency in our plot, and set all the diagonals to that value. Let's assume that is $20$ for this example.

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

Dataset

Chord expects a list of names (list[str]) and a co-occurence matrix (list[list[float]]) as input.

In [3]:
matrix = [
    [20, 0, 0, 0, 0, 0],
    [0, 20, 0, 0, 0, 0],
    [0, 0, 20, 0, 0, 0],
    [0, 0, 0, 20, 0, 0],
    [0, 0, 0, 0, 20, 0],
    [0, 0, 0, 0, 0, 20],
]

names=['one','two','three','four','five','six']

Chord(matrix, names, title="Diagonals not coloured", 
      colored_diagonals=False).show()
Plotapi - Chord Diagram

We can see above that this creates a chord diagram with equal-sized segments. All we need to do now is introduce our relationships, and subtract them from the corresponding diagonal value.

In [5]:
matrix = [
    [11, 4, 5, 0, 0, 0],
    [4, 14, 2, 0, 0, 0],
    [5, 2, 13, 0, 0, 0],
    [0, 0, 0, 20, 0, 0],
    [0, 0, 0, 0, 20, 0],
    [0, 0, 0, 0, 0, 20],
]

It may look more clear if we present this as a table with the columns and indices labelled. This is entirely optional.

In [6]:
import pandas as pd
pd.DataFrame(matrix, columns=names, index=names)
Out[6]:
one two three four five six
one 11 4 5 0 0 0
two 4 14 2 0 0 0
three 5 2 13 0 0 0
four 0 0 0 20 0 0
five 0 0 0 0 20 0
six 0 0 0 0 0 20

Visualisation

With our matrix prepared, we can use Plotapi with colored_diagonals=False to create a diagram with equal-sized segments and some ribbons between categories. We could add some padding to separate them too.

Here we're using .show() which outputs to a Jupyter Notebook cell, however, we may want to output to a 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!

In [20]:
Chord(matrix, names, colors="set2",
      title="Diagonals not coloured", 
      colored_diagonals=False, padding=0.2).show()
Plotapi - Chord 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. and the Plotapi Gallery.

Coloured and Invisible Diagonals

Preamble

In [1]:
from plotapi import Chord

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

Introduction

By default, Plotapi Chord displays occurrences where a category is not related to another category. These values appear in the diagonal of the matrix. It may be desirable to hide (but not remove) these values, this is possible with Plotapi.

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

Dataset

Chord expects a list of names (list[str]) and a co-occurence matrix (list[list[float]]) as input.

In [2]:
names=['one','two','three','four','five','six']

matrix = [
    [19, 5, 6, 4, 7, 4],
    [5, 4, 5, 4, 6, 5],
    [6, 5, 0, 4, 5, 5],
    [4, 4, 4, 0, 5, 5],
    [7, 6, 5, 5, 0, 4],
    [4, 5, 5, 5, 4, 0],
]

It may look more clear if we present this as a table with the columns and indices labelled. This is entirely optional.

In [3]:
import pandas as pd
pd.DataFrame(matrix, columns=names, index=names)
Out[3]:
one two three four five six
one 19 5 6 4 7 4
two 5 4 5 4 6 5
three 6 5 0 4 5 5
four 4 4 4 0 5 5
five 7 6 5 5 0 4
six 4 5 5 5 4 0

Visualisation

The representation of the diagonal values can be hidden by setting colored_diagonals=False.

Let's first see what they look like when they're visible.

Here we're using .show() which outputs to a Jupyter Notebook cell, however, we may want to output to a 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!

In [4]:
Chord(matrix, names, title="Diagonals coloured").show()
Plotapi - Chord Diagram

Now let's see what it looks like when they're not visible.

In [5]:
Chord(matrix, names, title="Diagonals not coloured",
      colored_diagonals=False).show()
Plotapi - Chord 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. and the Plotapi Gallery.

Bipartite (Divided) Labels

Preamble

In [1]:
from plotapi import Chord

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

Introduction

It's often necessary to label either side of our bipartite Chord diagrams - Plotapi makes this easy.

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

Dataset

Chord expects a list of names (list[str]) and a co-occurence matrix (list[list[float]]) as input.

In [2]:
matrix = [
    [0, 0, 0, 1, 4, 1],
    [0, 0, 0, 1, 3, 2],
    [0, 0, 0, 1, 2, 2],
    [1, 1, 1, 0, 0, 0],
    [4, 3, 2, 0, 0, 0],
    [1, 2, 2, 0, 0, 0],
]

names = ["Right 1", "Right 2", "Right 3", "Left 3", "Left 2", "Left 1"]
colors = ["#7400B8", "#5E60CE", "#5684D6", "#56CFE1", "#64DFDF", "#80FFDB"]

It may look more clear if we present this as a table with the columns and indices labelled. This is entirely optional.

In [3]:
import pandas as pd
pd.DataFrame(matrix, columns=names, index=names)
Out[3]:
Right 1 Right 2 Right 3 Left 3 Left 2 Left 1
Right 1 0 0 0 1 4 1
Right 2 0 0 0 1 3 2
Right 3 0 0 0 1 2 2
Left 3 1 1 1 0 0 0
Left 2 4 3 2 0 0 0
Left 1 1 2 2 0 0 0

Visualisation

To label both sides of the bipartite Chord diagram, we can set the bipartite_left_label and bipartite_right_label.

Here we're using .show() which outputs to a Jupyter Notebook cell, however, we may want to output to a 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!

In [7]:
Chord(matrix, names, colors=colors, bipartite=True, bipartite_idx=3,
      bipartite_left_label="Left Side", 
      bipartite_right_label="Right Side").show()
Plotapi - Chord 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. and the Plotapi Gallery.

Bipartite (Divided) Chord Diagrams

Preamble

In [1]:
from plotapi import Chord

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

Introduction

The bipartite feature of Plotapi Chord makes the biggest difference to the presentation and interpretation of the diagram. It splits the diagram in two, meaning relationships now happen between two different categorical sets.

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

Dataset

Chord expects a list of names (list[str]) and a co-occurence matrix (list[list[float]]) as input.

In [6]:
matrix = [
    [0, 0, 0, 1, 4, 1],
    [0, 0, 0, 1, 3, 2],
    [0, 0, 0, 1, 2, 2],
    [1, 1, 1, 0, 0, 0],
    [4, 3, 2, 0, 0, 0],
    [1, 2, 2, 0, 0, 0],
]

names = ["Right 1", "Right 2", "Right 3", "Left 3", "Left 2", "Left 1"]
colors = ["#7400B8", "#5E60CE", "#5684D6", "#56CFE1", "#64DFDF", "#80FFDB"]

It may look more clear if we present this as a table with the columns and indices labelled. This is entirely optional.

In [7]:
import pandas as pd
pd.DataFrame(matrix, columns=names, index=names)
Out[7]:
Right 1 Right 2 Right 3 Left 3 Left 2 Left 1
Right 1 0 0 0 1 4 1
Right 2 0 0 0 1 3 2
Right 3 0 0 0 1 2 2
Left 3 1 1 1 0 0 0
Left 2 4 3 2 0 0 0
Left 1 1 2 2 0 0 0

Visualisation

The bipartite mode is activated by setting the bipartite parameter to True.

  • bipartite enables/disables the bipartite chord diagram mode.
  • bipartite_idx sets the dividing point of the matrix.
  • bipartite_size sets the size of the spacing that creates the divide.
  • colors must be explicitly listed in bipartite mode.

We have 6 categories in our matrix, and we wish to divide them directly down the middle, so our bipartite_idx will be $3$.

Here we're using .show() which outputs to a Jupyter Notebook cell, however, we may want to output to a 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!

In [10]:
Chord(matrix, names, colors=colors, bipartite=True, bipartite_idx=3).show()
Plotapi - Chord 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. and the Plotapi Gallery.

Animation with WEBGL or D3.js Canvas

Preamble

In [1]:
from plotapi import Terminus

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

Introduction

We may want to switch between the WebGL or D3.js canvas animations depending on our requirements. These have been configured to look the same.

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

Dataset

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

In [2]:
links = [
    {"source":"England", "target":"Germany", "value": 1000},
    {"source":"England", "target":"France", "value": 3000},
    {"source":"England", "target":"Spain", "value": 5000},
    {"source":"England", "target":"Italy", "value": 4000},
    {"source":"England", "target":"Japan", "value": 800},

    
    {"source":"Ireland", "target":"Germany", "value": 3500},
    {"source":"Ireland", "target":"France", "value": 3750},
    {"source":"Ireland", "target":"Spain", "value": 1750},
    {"source":"Ireland", "target":"Italy", "value": 5000},
    {"source":"Ireland", "target":"Japan", "value": 400},
]

We can add many source's and target's! As they increase, we may need to adjust Terminus layout properties to accomodate the diagram's size and throughput.

Visualisation

To switch between the two, set webgl=True (the default) for WebGL, and webgl=False for D3.js canvas animation.

Let's try the D3.js canvas animation.

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!

In [3]:
Terminus(links, webgl=False).show()
Plotapi - Terminus Diagram

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

Changing the Pixel Size

Preamble

In [2]:
from plotapi import Terminus

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

Introduction

The Terminus pixel size can be modified to improve the presentation of our diagram, this works as intended in both WebGL and D3.js canvas mode.

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

Dataset

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

In [3]:
links = [
    {"source":"England", "target":"Germany", "value": 1000},
    {"source":"England", "target":"France", "value": 3000},
    {"source":"England", "target":"Spain", "value": 5000},
    {"source":"England", "target":"Italy", "value": 4000},
    {"source":"England", "target":"Japan", "value": 800},

    
    {"source":"Ireland", "target":"Germany", "value": 3500},
    {"source":"Ireland", "target":"France", "value": 3750},
    {"source":"Ireland", "target":"Spain", "value": 1750},
    {"source":"Ireland", "target":"Italy", "value": 5000},
    {"source":"Ireland", "target":"Japan", "value": 400},
]

We can add many source's and target's! As they increase, we may need to adjust Terminus layout properties to accomodate the diagram's size and throughput.

Visualisation

To change the pixel size, we simply change the value of pixel_size.

Let's try a pixel size smaller than the default setting.

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!

In [6]:
Terminus(links, pixel_size=2).show()
Plotapi - Terminus Diagram

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

Changing Animation Properties

Preamble

In [2]:
from plotapi import Terminus

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

Introduction

The Terminus animation can be modified to improve the presentation of our diagram, giving us control over a pixel's journey duration, how many pixels are dispatched at once, and the delay before the animation begins.

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

Dataset

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

In [3]:
links = [
    {"source":"England", "target":"Germany", "value": 1000},
    {"source":"England", "target":"France", "value": 3000},
    {"source":"England", "target":"Spain", "value": 5000},
    {"source":"England", "target":"Italy", "value": 4000},
    {"source":"England", "target":"Japan", "value": 800},

    
    {"source":"Ireland", "target":"Germany", "value": 3500},
    {"source":"Ireland", "target":"France", "value": 3750},
    {"source":"Ireland", "target":"Spain", "value": 1750},
    {"source":"Ireland", "target":"Italy", "value": 5000},
    {"source":"Ireland", "target":"Japan", "value": 400},
]

We can add many source's and target's! As they increase, we may need to adjust Terminus layout properties to accomodate the diagram's size and throughput.

Visualisation

There are many opportunities to customise the Terminus animation.

  • delay, how long to wait before the animation begins
  • pixel_journey_duration, how long each pixel should take from the beginning to end terminus.
  • pixel_batch_size, how many pixels will start their journey at each interval.

Higher pixel_journey_duration and pixel_batch_size values will result in worse performance. We may need to tune them if we want to go to an extreme.

Let's try a fast-moving Terminus diagram.

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!

In [7]:
Terminus(links, delay=3000, pixel_journey_duration=1500, pixel_batch_size=10).show()
Plotapi - Terminus Diagram

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

Setting the Title including Dynamic Count

Preamble

In [1]:
from plotapi import Terminus

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

Introduction

The Terminus diagram supports setting the title and also including the dynamic count of pixels currently on their journey.

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

Dataset

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

In [2]:
links = [
    {"source":"England", "target":"Germany", "value": 1000},
    {"source":"England", "target":"France", "value": 3000},
    {"source":"England", "target":"Spain", "value": 5000},
    {"source":"England", "target":"Italy", "value": 4000},
    {"source":"England", "target":"Japan", "value": 800},

    
    {"source":"Ireland", "target":"Germany", "value": 3500},
    {"source":"Ireland", "target":"France", "value": 3750},
    {"source":"Ireland", "target":"Spain", "value": 1750},
    {"source":"Ireland", "target":"Italy", "value": 5000},
    {"source":"Ireland", "target":"Japan", "value": 400},
]

We can add many source's and target's! As they increase, we may need to adjust Terminus layout properties to accomodate the diagram's size and throughput.

Visualisation

The title can be modified by setting the desired string to the title parameter. Placing the <plotapi_count> tag in that string will create a title whereby that tag is replaced and updated in real-time with the current number of pixels on their journey.

Let's try a few combinations.

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!

In [3]:
Terminus(links, title="Watch <plotapi_count> holidaymakers on their journey").show()
Plotapi - Terminus Diagram

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