Plotapi, beautiful by default.

Let plotapi do the heavy lifting – enabling beautiful interactive visualisations with a single line of code (instead of hundreds).

Get Plotapi

Popup Details, Thumbnails, and Layout

Made with Plotapi

You can create beautiful, interactive, and engaging visualisations like this one with Plotapi in any programming language.

Preamble

In [1]:
from plotapi import Chord

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

Introduction

We can include plenty of information in our popup - this makes exploration even better with Plotapi Chord.

Rich popup

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, 2, 3, 1, 4, 1],
    [2, 0, 2, 1, 3, 2],
    [3, 2, 0, 1, 2, 2],
    [1, 1, 1, 0, 2, 2],
    [4, 3, 2, 2, 0, 1],
    [1, 2, 2, 2, 1, 0],
]

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

Additionally, we'll mirror the structure of our matrix variable above to include the names associated with each relationship. This is the details variable, and it can accept HTML too.

In [3]:
details = [
    [[], ["Movie 1","Movie 2"], ["Movie 3","Movie 4","Movie 5"], ["Movie 6","Movie 7"], ["Movie 8","Movie 9","Movie 10","Movie 11"], ["Movie 12"]],
    [["Movie 13","Movie 14"], [], ["Movie 15","Movie 16"], ["Movie 17"], ["Movie 18","Movie 19","Movie 20"], ["Movie 21","Movie 22"]],
    [["Movie 23","Movie 24","Movie 25"], ["Movie 26","Movie 27"], [], ["Movie 28"], ["Movie 29","Movie 30"], ["Movie 31","Movie 32"]],
    [["Movie 33"], ["Movie 34"], ["Movie 35"], [], ["Movie 36","Movie 37"], ["Movie 38","Movie 39"]],
    [["Movie 40","Movie 41","Movie 42","Movie 43"], ["Movie 44","Movie 45","Movie 46"], ["Movie 47","Movie 48"], ["Movie 49","Movie 50"], [], ["Movie 51"]],
    [["Movie 52"], ["Movie 53","Movie 54"], ["Movie 55","Movie 56"], ["Movie 57","Movie 58"], ["Movie 59"], []],
]

With the details_thumbs parameter we can associate corresponding thumbnails with each details entry.

In [4]:
details_thumbs = [
    [[], ["https://datacrayon.com/images/lablet.png","https://datacrayon.com/images/lablet.png"], ["https://datacrayon.com/images/lablet.png","https://datacrayon.com/images/lablet.png","https://datacrayon.com/images/lablet.png"], ["https://datacrayon.com/images/lablet.png","https://datacrayon.com/images/lablet.png"], ["https://datacrayon.com/images/lablet.png","https://datacrayon.com/images/lablet.png","https://datacrayon.com/images/lablet.png","https://datacrayon.com/images/lablet.png"], ["https://datacrayon.com/images/lablet.png"]],
    [["https://datacrayon.com/images/lablet.png","https://datacrayon.com/images/lablet.png"], [], ["https://datacrayon.com/images/lablet.png","https://datacrayon.com/images/lablet.png"], ["https://datacrayon.com/images/lablet.png"], ["https://datacrayon.com/images/lablet.png","https://datacrayon.com/images/lablet.png","https://datacrayon.com/images/lablet.png"], ["https://datacrayon.com/images/lablet.png","https://datacrayon.com/images/lablet.png"]],
    [["https://datacrayon.com/images/lablet.png","https://datacrayon.com/images/lablet.png","https://datacrayon.com/images/lablet.png"], ["https://datacrayon.com/images/lablet.png","https://datacrayon.com/images/lablet.png"], [], ["https://datacrayon.com/images/lablet.png"], ["https://datacrayon.com/images/lablet.png","https://datacrayon.com/images/lablet.png"], ["https://datacrayon.com/images/lablet.png","https://datacrayon.com/images/lablet.png"]],
    [["https://datacrayon.com/images/lablet.png"], ["https://datacrayon.com/images/lablet.png"], ["https://datacrayon.com/images/lablet.png"], [], ["https://datacrayon.com/images/lablet.png","https://datacrayon.com/images/lablet.png"], ["https://datacrayon.com/images/lablet.png","https://datacrayon.com/images/lablet.png"]],
    [["https://datacrayon.com/images/lablet.png","https://datacrayon.com/images/lablet.png","https://datacrayon.com/images/lablet.png","https://datacrayon.com/images/lablet.png"], ["https://datacrayon.com/images/lablet.png","https://datacrayon.com/images/lablet.png","https://datacrayon.com/images/lablet.png"], ["https://datacrayon.com/images/lablet.png","https://datacrayon.com/images/lablet.png"], ["https://datacrayon.com/images/lablet.png","https://datacrayon.com/images/lablet.png"], [], ["https://datacrayon.com/images/lablet.png"]],
    [["https://datacrayon.com/images/lablet.png"], ["https://datacrayon.com/images/lablet.png","https://datacrayon.com/images/lablet.png"], ["https://datacrayon.com/images/lablet.png","https://datacrayon.com/images/lablet.png"], ["https://datacrayon.com/images/lablet.png","https://datacrayon.com/images/lablet.png"], ["https://datacrayon.com/images/lablet.png"], []],
]

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

In [5]:
import pandas as pd
pd.DataFrame(matrix, columns=names, index=names)
Out[5]:
Action Adventure Comedy Drama Fantasy Thriller
Action 0 2 3 1 4 1
Adventure 2 0 2 1 3 2
Comedy 3 2 0 1 2 2
Drama 1 1 1 0 2 2
Fantasy 4 3 2 2 0 1
Thriller 1 2 2 2 1 0
In [6]:
pd.DataFrame(details, columns=names, index=names)
Out[6]:
Action Adventure Comedy Drama Fantasy Thriller
Action [] [Movie 1, Movie 2] [Movie 3, Movie 4, Movie 5] [Movie 6, Movie 7] [Movie 8, Movie 9, Movie 10, Movie 11] [Movie 12]
Adventure [Movie 13, Movie 14] [] [Movie 15, Movie 16] [Movie 17] [Movie 18, Movie 19, Movie 20] [Movie 21, Movie 22]
Comedy [Movie 23, Movie 24, Movie 25] [Movie 26, Movie 27] [] [Movie 28] [Movie 29, Movie 30] [Movie 31, Movie 32]
Drama [Movie 33] [Movie 34] [Movie 35] [] [Movie 36, Movie 37] [Movie 38, Movie 39]
Fantasy [Movie 40, Movie 41, Movie 42, Movie 43] [Movie 44, Movie 45, Movie 46] [Movie 47, Movie 48] [Movie 49, Movie 50] [] [Movie 51]
Thriller [Movie 52] [Movie 53, Movie 54] [Movie 55, Movie 56] [Movie 57, Movie 58] [Movie 59] []
In [7]:
pd.DataFrame(details_thumbs, columns=names, index=names)
Out[7]:
Action Adventure Comedy Drama Fantasy Thriller
Action [] [https://datacrayon.com/images/lablet.png, htt... [https://datacrayon.com/images/lablet.png, htt... [https://datacrayon.com/images/lablet.png, htt... [https://datacrayon.com/images/lablet.png, htt... [https://datacrayon.com/images/lablet.png]
Adventure [https://datacrayon.com/images/lablet.png, htt... [] [https://datacrayon.com/images/lablet.png, htt... [https://datacrayon.com/images/lablet.png] [https://datacrayon.com/images/lablet.png, htt... [https://datacrayon.com/images/lablet.png, htt...
Comedy [https://datacrayon.com/images/lablet.png, htt... [https://datacrayon.com/images/lablet.png, htt... [] [https://datacrayon.com/images/lablet.png] [https://datacrayon.com/images/lablet.png, htt... [https://datacrayon.com/images/lablet.png, htt...
Drama [https://datacrayon.com/images/lablet.png] [https://datacrayon.com/images/lablet.png] [https://datacrayon.com/images/lablet.png] [] [https://datacrayon.com/images/lablet.png, htt... [https://datacrayon.com/images/lablet.png, htt...
Fantasy [https://datacrayon.com/images/lablet.png, htt... [https://datacrayon.com/images/lablet.png, htt... [https://datacrayon.com/images/lablet.png, htt... [https://datacrayon.com/images/lablet.png, htt... [] [https://datacrayon.com/images/lablet.png]
Thriller [https://datacrayon.com/images/lablet.png] [https://datacrayon.com/images/lablet.png, htt... [https://datacrayon.com/images/lablet.png, htt... [https://datacrayon.com/images/lablet.png, htt... [https://datacrayon.com/images/lablet.png] []

Visualisation

We can use the additional details, and details_thumbs parameters to construct a Chord diagram with rich popup information.

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 [8]:
Chord(matrix, names, details=details, details_thumbs=details_thumbs).show()
Plotapi - Chord Diagram

We can also adjust the popup thumbnail width, margin, and font size. The corresponding parameters are thumbs_width, thumbs_margin, and thumbs_font_size.

In [9]:
Chord(matrix, names, details=details, details_thumbs=details_thumbs,
      thumbs_width=40, thumbs_margin=10, thumbs_font_size=10).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.

Made with Plotapi

You can create beautiful, interactive, and engaging visualisations like this one with Plotapi in any programming language.

Plotapi, beautiful by default.

Let plotapi do the heavy lifting – enabling beautiful interactive visualisations with a single line of code (instead of hundreds).

Get Plotapi