Visualizations Bar Fight
Node icons and colors
Let's take a look at how we can change the colours and icons for nodes in our Bar Fight diagram. These configurations override the color scheme.
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},
]
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 thesamplesdefinitions 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.
BarFight(samples,
nodes=nodes).show()