Animations: Intros and Loops

Preamble

In [1]:
from plotapi import Chord

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

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

The width parameter will also set the height, as the Plotapi Chord maintains a $1:1$ ratio.

The margin parameter expects a single float to imply an equal margin of that size.

The rotate paramater will rotate the Chord diagram around its center.

By default a Chord 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 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 [5]:
Chord(matrix, names, width=500, margin=100, rotate=-30).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.

Linked Data Table

Preamble

In [1]:
from plotapi import Chord

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

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

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

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

Introduction

The asymmetric (symmetric=False) Plotapi Chord diagram allows use 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.