Engaging plots, made easy.

Easily turn your data into engaging visualizations. Powerful API for coders. Powerful app for everyone.

main.py
notebook.ipynb
main.rs
from plotapi import Chord

Chord(matrix, names).show()

Visualizations Line Fight

Node icons and colors

Let's take a look at how we can change the colours and icons for nodes in our Line Fight diagram. These configurations override the color scheme.


Sample data

Let's import PlotAPI and load our sample data.

from plotapi import LineFight

samples = [
    {"order": 0, "name": "Sankey", "value": 10},
    {"order": 0, "name": "Terminus", "value": 12},
    {"order": 0, "name": "Chord", "value": 8},
    {"order": 0, "name": "Bar Fight", "value": 9},
    {"order": 0, "name": "Pie Fight", "value": 12},

    {"order": 1, "name": "Sankey", "value": 18},
    {"order": 1, "name": "Terminus", "value": 24},
    {"order": 1, "name": "Chord", "value": 22},
    {"order": 1, "name": "Bar Fight", "value": 14},
    {"order": 1, "name": "Pie Fight", "value": 17},

    {"order": 2, "name": "Sankey", "value": 24},
    {"order": 2, "name": "Terminus", "value": 40},
    {"order": 2, "name": "Chord", "value": 32},
    {"order": 2, "name": "Bar Fight", "value": 19},
    {"order": 2, "name": "Pie Fight", "value": 42},

    {"order": 3, "name": "Sankey", "value": 32},
    {"order": 3, "name": "Terminus", "value": 62},
    {"order": 3, "name": "Chord", "value": 40},
    {"order": 3, "name": "Bar Fight", "value": 25},
    {"order": 3, "name": "Pie Fight", "value": 64},

    {"order": 4, "name": "Sankey", "value": 32},
    {"order": 4, "name": "Terminus", "value": 75},
    {"order": 4, "name": "Chord", "value": 55},
    {"order": 4, "name": "Bar Fight", "value": 45},
    {"order": 4, "name": "Pie Fight", "value": 120},
]

Demonstration

Next, we'll start customising the nodes. PlotAPI expects a list of dictionary items to configure each node.

nodes = [
    {
        "name": "Sankey",
        "color": "#ffd166", 
        "icon": "https://datacrayon.com/datasets/pp_img/2.png"
    },
    {
        "name": "Terminus",
        "color": "#06d6a0", 
        "icon": "https://datacrayon.com/datasets/pp_img/3.png"
    },
    {
        "name": "Chord",
        "color": "#118ab2", 
        "icon": "https://datacrayon.com/datasets/pp_img/5.png"
    },
    {
        "name": "Bar Fight",
        "color": "#073b4c", 
        "icon": "https://datacrayon.com/datasets/pp_img/4.png"
    },
    {
        "name": "Pie Fight",
        "color": "#ef476f", 
        "icon": "https://datacrayon.com/datasets/pp_img/6.png"
    }
]

We can see that each dictionary item has three properties:

  • name, the name of the item, which corresponds to names specified in the samples definitions above.
  • color, the desired colour of the bars (CSS colour e.g. "#073b4c" or "red").
  • icon, the location of the image to use for the icon.
LineFight(samples,
         nodes=nodes).show()
Previous
Line Fight