Engaging plots, made easy.

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

from plotapi import Chord

Chord(matrix, names).show()

Visualizations Bar Fight

Event information

Let's take a look at how we can display event content during our visualisation at different times. This can be useful for displaying additional information or images that are relevant to specific events.

Sample data

Let's import PlotAPI and load our sample data.

from plotapi import BarFight

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


Next, we'll start specifying event content to appear at certain points during our visualisation. PlotAPI expects a list of dictionary items to configure each event.

events = [
        "order": 0,
        "event": '<p>Event information content can be <b>formatted with HTML</b>!</p><p>You can even include CSS - the <a href ="https://plotapi.com">power</a> of both are available.</p>',
        "order": 1,
        "event": '<b>Something Special</b><br><img src="https://datacrayon.com/datasets/pokemon_img/150.png"><p>Something special happened here, probably!</p>',
        "order": 4,
        "event": "<p>By specifying a <b>duration</b>, an event can be displayed for longer than the default value - much like this one!</p>",
        "duration": 10000,

We can see that each dictionary item has three properties:

  • order, which determines with time period this event belongs to. This should correspond to the orders specified in the samples.
  • event, the HTML content of the event information popup.
  • duration, the maximum display duration for the corresponding event content.

By default, a PlotAPI Bar Fight visualisation will pause for the duration of an event. However, it can be configured to either continue running or wait for the user to press a continue button.

Bar Fight