## Preamble¶

In [ ]:
from plotapi import Chord



## Introduction¶

Plotapi Chord supports a linked data table. This means as you hover over segments and ribbons in the Chord 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 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, 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 [ ]:
import pandas as pd
pd.DataFrame(matrix, columns=names, index=names)

Out[ ]:
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

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 [ ]:
data_table='''Genre 1,Genre 2,Awesome
Thriller,Action,The Plotapi
Thriller,Action,Action Plotapi
Thriller,Drama,Feeling Plotapi
Thriller,Comedy,Plotapi Force'''


## 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 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 [9]:
Chord(matrix, names, width=400, margin=20, curved_labels=True,
data_table=data_table, data_table_column_width=80).show()

Plotapi - Chord Diagram

Data table mode includes the "locking" feature. Try clicking on the Thriller segment 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. and the Plotapi Gallery.

# Directed Chord Diagrams

## Preamble¶

In [ ]:
from plotapi import Chord



## 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 0 5 6 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



## 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,

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



## 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",

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



## 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



## 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



## 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 [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¶

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 [4]:
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



## 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



## 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



## 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.