Preamble¶

In [1]:

import pandas as pd
from plotapi import LineFight

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

Introduction¶

Plotapi BarFight, PieFight, and LineFight, expect a list of dict items that define the value of nodes over time. The following is an example of this data structure.

In [2]:

samples = [
    "order": 2000.01, "name": "Sankey", "value": 10,
    "order": 2000.01, "name": "Terminus", "value": 10,
    "order": 2000.01, "name": "Chord", "value": 40,
    "order": 2000.01, "name": "Bar Fight", "value": 90,
    "order": 2000.01, "name": "Pie Fight", "value": 70,

    "order": 2000.02, "name": "Sankey", "value": 30,
    "order": 2000.02, "name": "Terminus", "value": 20,
    "order": 2000.02, "name": "Chord", "value": 40,
    "order": 2000.02, "name": "Bar Fight", "value": 120,
    "order": 2000.02, "name": "Pie Fight", "value": 55,

    "order": 2000.03, "name": "Sankey", "value": 35,
    "order": 2000.03, "name": "Terminus", "value": 45,
    "order": 2000.03, "name": "Chord", "value": 60,
    "order": 2000.03, "name": "Bar Fight", "value": 85,
    "order": 2000.03, "name": "Pie Fight", "value": 100,

    "order": 2000.04, "name": "Sankey", "value": 25,
    "order": 2000.04, "name": "Terminus", "value": 60,
    "order": 2000.04, "name": "Chord", "value": 90,
    "order": 2000.04, "name": "Bar Fight", "value": 50,
    "order": 2000.04, "name": "Pie Fight", "value": 105,

    "order": 2000.05, "name": "Sankey", "value": 60,
    "order": 2000.05, "name": "Terminus", "value": 80,
    "order": 2000.05, "name": "Chord", "value": 120,
    "order": 2000.05, "name": "Bar Fight", "value": 30,
    "order": 2000.05, "name": "Pie Fight", "value": 95,
]

Dataset¶

Let’s work backwards to the DataFrame, our starting point for this data wrangling exercise.

In [8]:

df = (
    pd.DataFrame(samples)
    .pivot(index="order", columns="name")["value"]
    .reset_index()
    .rename_axis(None, axis=1)
)

df

Out[8]:

.dataframe tbody tr th:only-of-type
vertical-align: middle;

.dataframe tbody tr th
vertical-align: top;

.dataframe thead th
text-align: right;

	order	Bar Fight	Chord	Pie Fight	Sankey	Terminus
0	2000.01	90	40	70	10	10
1	2000.02	120	40	55	30	20
2	2000.03	85	60	100	35	45
3	2000.04	50	90	105	25	60
4	2000.05	30	120	95	60	80

Great! Now let’s work back to the samples dict.

Wrangling¶

Our journey back to the samples list of dict items will be through pandas.melt.

In [4]:

df_melted = pd.melt(
    df,
    id_vars="order",
    value_vars=list(df.columns[1:]),
    var_name="name",
    value_name="value",
)

df_melted.head(10)

Out[4]:

.dataframe tbody tr th:only-of-type
vertical-align: middle;

.dataframe tbody tr th
vertical-align: top;

.dataframe thead th
text-align: right;

	order	name	value
0	2000.01	Bar Fight	90
1	2000.02	Bar Fight	120
2	2000.03	Bar Fight	85
3	2000.04	Bar Fight	50
4	2000.05	Bar Fight	30
5	2000.01	Chord	40
6	2000.02	Chord	40
7	2000.03	Chord	60
8	2000.04	Chord	90
9	2000.05	Chord	120

We’re nearly there. This next step is optional – we’re going to sort by order.

In [5]:

df_melted = df_melted.sort_values("order")
df_melted.head(10)

Out[5]:

.dataframe tbody tr th:only-of-type
vertical-align: middle;

.dataframe tbody tr th
vertical-align: top;

.dataframe thead th
text-align: right;

	order	name	value
0	2000.01	Bar Fight	90
20	2000.01	Terminus	10
5	2000.01	Chord	40
15	2000.01	Sankey	10
10	2000.01	Pie Fight	70
1	2000.02	Bar Fight	120
21	2000.02	Terminus	20
6	2000.02	Chord	40
16	2000.02	Sankey	30
11	2000.02	Pie Fight	55

Now for the final step – let’s get our list of dict items.

In [6]:

samples = df_melted.to_dict(orient="records")
samples

Out[6]:

['order': 2000.01, 'name': 'Bar Fight', 'value': 90,
 'order': 2000.01, 'name': 'Terminus', 'value': 10,
 'order': 2000.01, 'name': 'Chord', 'value': 40,
 'order': 2000.01, 'name': 'Sankey', 'value': 10,
 'order': 2000.01, 'name': 'Pie Fight', 'value': 70,
 'order': 2000.02, 'name': 'Bar Fight', 'value': 120,
 'order': 2000.02, 'name': 'Terminus', 'value': 20,
 'order': 2000.02, 'name': 'Chord', 'value': 40,
 'order': 2000.02, 'name': 'Sankey', 'value': 30,
 'order': 2000.02, 'name': 'Pie Fight', 'value': 55,
 'order': 2000.03, 'name': 'Terminus', 'value': 45,
 'order': 2000.03, 'name': 'Sankey', 'value': 35,
 'order': 2000.03, 'name': 'Pie Fight', 'value': 100,
 'order': 2000.03, 'name': 'Chord', 'value': 60,
 'order': 2000.03, 'name': 'Bar Fight', 'value': 85,
 'order': 2000.04, 'name': 'Pie Fight', 'value': 105,
 'order': 2000.04, 'name': 'Chord', 'value': 90,
 'order': 2000.04, 'name': 'Sankey', 'value': 25,
 'order': 2000.04, 'name': 'Bar Fight', 'value': 50,
 'order': 2000.04, 'name': 'Terminus', 'value': 60,
 'order': 2000.05, 'name': 'Pie Fight', 'value': 95,
 'order': 2000.05, 'name': 'Chord', 'value': 120,
 'order': 2000.05, 'name': 'Sankey', 'value': 60,
 'order': 2000.05, 'name': 'Bar Fight', 'value': 30,
 'order': 2000.05, 'name': 'Terminus', 'value': 80]

Perfect! We’re all done.

Visualisation¶

No Plotapi exercise is complete without a visualisation.

As we can see, we have set our license details in the preamble with LineFight.set_license().

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.

In [7]:

LineFight(samples, format_current_order="0.2f").show()

Plotapi – Line Fight Diagram

#plotapi-chart-76680346 path
fill: none;
stroke-linecap: round

#plotapi-chart-76680346 .tick:first-of-type text
stroke-width: 0;

#plotapi-chart-76680346 .x_axis .tick:not(:first-of-type) line
stroke-opacity: 0;

#plotapi-chart-76680346 .y_axis .tick:not(:first-of-type) line
stroke: #999;
stroke-opacity: 0.5;
stroke-dasharray: 2,2

#plotapi-chart-76680346 .y_axis .tick:first-of-type line
stroke-width: 0;
stroke: #999;
stroke-opacity: 0.4;

#plotapi-chart-76680346 .x_axis .tick:first-of-type line
stroke-width: 0;
stroke: #999;
stroke-opacity: 0.4;

#plotapi-chart-76680346 .tick text
fill: #999;

#plotapi-chart-76680346 .domain
stroke-width: 0;

#plotapi-chart-76680346 .title
stroke: #fcfcfc;
paint-order: stroke;
stroke-width: 3px;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-opacity: 0.4;

#plotapi-chart-76680346 .current_order_text
font-size: 2em;
font-weight: bold;
fill-opacity: 0.4;
fill: #000;
font-size: 2em;
paint-order: stroke;
stroke: #fcfcfc;
stroke-width: 2px;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-opacity: 1;
font-weight: bold;

#plotapi-chart-76680346
font-family: “Lato”, sans-serif;

text-align: center;

#plotapi-chart-76680346 .event_detail_bg
fill: black;
opacity: 0.7;

#plotapi-chart-76680346 .event_detail_text div,
#plotapi-chart-76680346 .event_detail_text p,
#plotapi-chart-76680346 .event_detail_text span
font-size: 16px;

#plotapi-chart-76680346 text::selection,
#plotapi-chart-76680346 div::selection,
#plotapi-chart-76680346 img::selection,
#plotapi-chart-76680346 p::selection
background: none;

(function() {
var jupyter_classic = !(typeof(IPython)===”undefined”);
var dependencies_paths =
‘d3’: ‘https://plotapi.com/static/js/d3.v7.min’,
‘pako’: ‘https://plotapi.com/static/js/pako.min’

if(jupyter_classic)
require.config(

paths: dependencies_paths

);

require([‘d3’, ‘pako’], function(d3, pako)
window.d3 = d3;
window.pako = pako;
plotapi_plot();
);

else{
var dependencies = Object.values(dependencies_paths);

function dependency_loader(dependencies_loaded){
var script = document.createElement(“script”);
script.type = “text/javascript”;
script.src = dependencies[dependencies_loaded] + “.js”;

script.onload = function ()
if(dependencies_loaded
update(elapsed);
);

function update(elapsed)
if (elapsed_time > 0)
d3.select(“#plotapi-chart-76680346_svg .event_group”).transition().duration(250).style(“opacity”, 0);
elapsed_time = 0;
last_proc = elapsed;
else skip_first)
skip_first = false;
current_order_text.text(
format_current_order(sequence[sequence_index])
);
show_event();
sequence_index++;
update_current(sequence_index);
last_proc = elapsed;

let last_event_duration = 0;
if (elapsed – last_proc a.id);
contestants.sort((a, b) => b.current_value – a.current_value);
current_order = contestants.map((a) => a.id);
var delta = elapsed – last_proc;
draw(delta);
else if (sequence_index == sequence.length – 1)
last_event_duration = show_event();
contestants.sort((a, b) => b.current_value – a.current_value);
draw(2000);

d3.select(“#plotapi-chart-76680346_svg .event_group”).transition().delay(last_event_duration).duration(250).style(“opacity”, 0);

sequence_index++;

if (sequence_index == sequence.length && !finished)
contestants.sort((a, b) => b.current_value – a.current_value);
update_minimap();
finished = true;
t.stop();

show_restart(last_event_duration);

}

function show_event()

var event_fired = false;

var element = events.find(item =>
return item.order === sequence_index
)

if(element == undefined)
return 0;

timer_stop(element);

d3.select(“#plotapi-chart-76680346_svg .event_detail_text”).html(function (d)
return (
‘

‘ +
element.event +
“

”
);
);

d3.select(“#plotapi-chart-76680346_svg .event_group”)
.interrupt()
.transition()
.duration(250)
.style(“opacity”, 1)
;

return element.duration ? element.duration : 5000

function update_current(current)
x_travel_scale = d3
.scaleLinear()
.domain([0, 2000])
.range([sequence[sequence_index-1], sequence[sequence_index]]);

if (sequence_index > 0)
update_minimap();

current_data = data.filter((d) => d.order == current);

for (var index = 0; index d.id == element.id);
if (contestant.length != 0)
if(sequence_index > 1 && contestant[0].line_data.length == 1)
contestant[0].icon.transition()
.duration(200)
.style(“opacity”, 1)
contestant[0].line_path.transition()
.duration(200)
.style(“opacity”, 1)
contestant[0].line_path_bg.transition()
.duration(200)
.style(“opacity”, 0.25)

if (!isNaN(element.value))
contestant[0].current_value = contestant[0].target_value;
contestant[0].target_value = element.value;
contestant[0].line_data.push(“x”:sequence[sequence_index],”y”: contestant[0].current_value)
contestant[0].travel_scale = d3
.scaleLinear()
.domain([0, 2000])
.range([contestant[0].current_value, element.value]);

else
var target_value = !isNaN(element.value) ? element.value : 0;

var x_pos = 0;

contestant_rect = d3
.select(“#plotapi-chart-76680346_svg .bar_group”)
.append(“rect”)
.attr(“x”, 0)
.attr(“y”, y_scale(index))
.attr(“width”, x_pos)
.attr(“height”, bar_height)
.style(“fill”, color(element.id))

.style(“display”, “none”)
;

contestant_icon_image = icon(element.id);

if(contestant_icon_image == undefined)

contestant_icon = d3
.select(“#plotapi-chart-76680346_svg .bar_group”)
.append(‘circle’)
.attr(“cx”, 0)
.attr(“cy”, y_scale(index) + icon_padding)
.attr(‘r’, icon_size/2)
.style(“opacity”, 1)
.style(“stroke-opacity”, 0.25)
.attr(“stroke-width”, 8)
.attr(“stroke”, darken_color(color(element.id),-0.5))
.attr(‘fill’, color(element.id));

else
contestant_icon = d3
.select(“#plotapi-chart-76680346_svg .bar_group”)
.append(“image”)
.attr(“x”, 0)
.attr(“y”, y_scale(index) + icon_padding)
.attr(“width”, icon_size)
.attr(“height”, icon_size)
.style(“opacity”, 1)
.attr(“xlink:href”, contestant_icon_image)

contestant_icon
.on(“mouseover”, function (d, i)
d3.selectAll(“#plotapi-chart-76680346_svg .bartext_group .grp”+element.id)
.transition()
.duration(200)
.style(“opacity”, 1);

)
.on(“mouseout”, function (d, i)
d3.selectAll(“#plotapi-chart-76680346_svg .bartext_group .grp”+element.id)
.transition()
.transition()
.duration(200)
.style(“opacity”, 0);

);

contestant_line_path_bg = line_group.append(“path”)
.attr(“stroke-width”, 12)
.style(“stroke”, color(element.id))
.style(“opacity”, 0.25);

contestant_line_path = line_group.append(“path”)
.style(“stroke”, color(element.id))
.attr(“stroke-width”, 4)

if(sequence_index > 0)
contestant_icon.style(“opacity”, 0);
contestant_line_path.style(“opacity”, 0);
contestant_line_path_bg.style(“opacity”, 0);

contestant_text_value = d3
.select(“#plotapi-chart-76680346_svg .bartext_group”)
.append(“text”)
.attr(“x”, x_pos – 5)
.attr(“y”, bar_text_upper_y(index))
.text(element.value)
.style(“text-anchor”, “end”)
.style(“dominant-baseline”, “central”)
.style(“fill”, “black”)
.attr(“opacity”,”0″)
.style(“font-size”, bartext_font_size + “px”)
.classed(“grp”+element.id,true);

contestant_text_name = d3
.select(“#plotapi-chart-76680346_svg .bartext_group”)
.append(“text”)
.attr(“x”, 0)
.attr(“y”, bar_text_lower_y(index))
.text(unique_names[element.id])
.style(“text-anchor”, “end”)
.style(“dominant-baseline”, “central”)
.style(“fill”, “black”)
.attr(“opacity”,”0″)
.style(“font-weight”, “900”)
.style(“font-size”, bartext_font_size + “px”)
.classed(“grp”+element.id,true);

contestant =
id: element.id,
rect: contestant_rect,
line_data: [“x”:sequence[sequence_index],”y”: target_value],
line_path: contestant_line_path,
line_path_bg: contestant_line_path_bg,
icon_image: !(contestant_icon_image == undefined),
icon: contestant_icon,
text_value: contestant_text_value,
text_name: contestant_text_name,
current_value: target_value,
target_value: target_value,
travel_scale: d3
.scaleLinear()
.domain([0, 2000])
.range([target_value, target_value]),
;

contestants.push(contestant);

}

function draw(delta)
x_axis_current_x = x_travel_scale(delta);
x_scale = d3
.scaleLinear()
.domain([sequence[0], sequence[sequence.length-1]])
.range([0, 760.0]);

x_axis.scale(x_scale);
x_scale_current_x = x_scale(x_axis_current_x);

d3.select(“#plotapi-chart-76680346_svg”)
.select(“.x_axis”)
.transition()
.duration(250)
.ease(d3.easeLinear)
.call(x_axis);

for (var index = 0; index d.current_value);

if (new_max != current_max)
current_max = new_max;

y_scale = d3
.scaleLinear()
.domain([10.0, 120.0])
.range([420, 0]);

y_axis.scale(y_scale);

d3.select(“#plotapi-chart-76680346_svg”)
.select(“.y_axis”)
.transition()
.duration(250)
.ease(d3.easeLinear)
.call(y_axis);

var y_scale_current_y = y_scale(element.current_value);

element.line_data[element.line_data.length-1].y = element.current_value
element.line_data[element.line_data.length-1].x = x_axis_current_x

var line = d3.line()
.x(function(d,i) return x_scale(d.x);)
.y(function(d) return y_scale(d.y);)

var path = element.line_path
.attr(“d”, line(element.line_data))

var path_bg = element.line_path_bg
.attr(“d”, line(element.line_data))

element.text_name
.attr(
“x”,
x_scale_current_x –
text_padding –
(icon_size/2)
)
.attr(“y”, bar_text_lower_y(y_scale_current_y));

element.text_value
.attr(
“x”,
x_scale_current_x –
text_padding –
(icon_size/2)
)
.text(format_value(element.current_value))
.attr(“y”, bar_text_upper_y(y_scale_current_y));

element.rect.attr(“width”, x_scale_current_x);

element.icon
.attr(
“x”,
x_scale_current_x – (icon_size/2)
)
.attr(“y”, y_scale_current_y – ((icon_size)/2))
.attr(
“cx”,
x_scale_current_x
)
.attr(“cy”, y_scale_current_y);

if (
false

)
element.rect
.interrupt()
.transition()
.ease(d3.easeSinOut)
.duration(500)
.attr(“y”, y_scale(index));

element.icon
.interrupt()
.transition()
.ease(d3.easeSinOut)
.duration(500)
.attr(“y”, y_scale(index) + icon_padding);

element.text_name
.interrupt()
.transition()
.ease(d3.easeSinOut)
.duration(500)
.attr(“y”, bar_text_lower_y(index));

element.text_value
.interrupt()
.transition()
.ease(d3.easeSinOut)
.duration(500)
.attr(“y”, bar_text_upper_y(index));

}
}

function initialise()
contestants = [];
d3.select(“#plotapi-chart-76680346_svg .line_group”)
.selectAll(“*”)
.remove();
d3.select(“#plotapi-chart-76680346_svg .bar_group”)
.selectAll(“*”)
.remove();
d3.select(“#plotapi-chart-76680346_svg .bartext_group”)
.selectAll(“*”)
.remove();

d3.select(“#plotapi-chart-76680346_svg .minimap_group”)
.selectAll(“*”)
.remove();
last_proc = 0;
top_n = 5;

bar_padding = 0;
bar_height = d3.max([420 / 5 – bar_padding, 0]);
icon_padding =0;
text_padding = 5;
current_order = [];
last_order = [];
elapsed_time = 0;
sequence_index = 0;
current_max = null;
bartext_font_size = 14;
icon_size = 40
y_scale = d3
.scaleLinear()
.domain([10.0, 120.0])
.range([420, 0]);

update_current(sequence_index);

current_order_text.text(format_current_order(sequence[sequence_index]))

new_max = d3.max(contestants, (d) => d.current_value);

if (new_max != current_max)
current_max = new_max;

x_scale = d3
.scaleLinear()
.domain([sequence[0], sequence[sequence.length-1]])
.range([0, 760.0]);

x_axis = d3
.axisBottom()
.scale(x_scale)
.ticks(sequence.length-1, undefined)
.tickSize(-420)
.tickFormat((d) => d3.format(“,”)(d));

y_axis = d3
.axisLeft()
.scale(y_scale)
.ticks(7.6, undefined)
.tickSize(-760.0)
.tickFormat((d) => d3.format(“,”)(d));

d3.select(“#plotapi-chart-76680346_svg .axis_group”)
.selectAll(“*”)
.remove();

var x_axis_line = d3
.select(“#plotapi-chart-76680346_svg .axis_group”)
.append(“g”)
.attr(“class”, “axis x_axis”)
.attr(“transform”, `translate(0, 420)`)
.call(x_axis)
.selectAll(“.tick line”)
.classed(“origin”, (d) => d == 0);

var y_axis_line = d3
.select(“#plotapi-chart-76680346_svg .axis_group”)
.append(“g”)
.attr(“class”, “axis y_axis”)
.attr(“transform”, `translate(0, 0))`)
.call(y_axis)

d3.select(“#plotapi-chart-76680346_svg”)
.select(“.y_axis”)
.style(“text-anchor”, “start”)

function darken_color(color, factor)
return d3.color(color).darker(factor)

function color(index)
node = nodes[index];
if (node.color)
return node.color;

var ratio = index / (5);
return d3.interpolateRainbow(ratio);

function icon(index)
node = nodes[index];
if (node.icon)
return node.icon;

return undefined;

function bar_text_upper_y(index)
return (index-(icon_size/2) ) + icon_size * 0.75;

function bar_text_lower_y(index)
return (index-(icon_size/2) ) + icon_size * 0.25;

function update_minimap()
var minimap_order = contestants.slice();
minimap_order.sort((a, b) => b.current_value – a.current_value);
minimap_order = minimap_order.slice(0,6);

min_value = d3.min([minimap_order[minimap_order.length-1].current_value,0]);

minimap_order = minimap_order.slice(0,5);

if(min_value Math.abs(min_value) + item.current_value)
.reduce((prev, next) => prev + next);

else
current_sum = minimap_order
.map((item) => item.current_value)
.reduce((prev, next) => prev + next);

if (current_sum != 0)
var mm_bar_height = 42.0;
var mm_bar_drop_height = 126.0;

mm_y_scale = d3
.scaleLinear()
.domain([0, current_sum])
.range([0, mm_bar_height]);
mm_x_scale = d3
.scaleLinear()
.domain([0, sequence.length])
.range([0, 253.33333333333334]);

var mm_pos_x = mm_x_scale(sequence_index – 1);
var mm_width = mm_x_scale(1);

var mm_running_total = 0;
for (var mm_index = 0; mm_index < minimap_order.length; mm_index++)
const element = minimap_order[mm_index];

var mm_pos_y = mm_y_scale(mm_running_total);
if(min_value < 0)
var mm_height = mm_y_scale(element.current_value + Math.abs(min_value));

else
var mm_height = mm_y_scale(element.current_value);

d3.select("#plotapi-chart-76680346_svg .minimap_group")
.append("rect")
.attr("x", 506.66666666666663 + mm_pos_x)
.attr("y", 420 – mm_bar_drop_height + mm_pos_y)
.attr("width", mm_width)
.attr("height", mm_height)
.style("fill", color(element.id))
.style("opacity", 0)
.transition()
.duration(500)
.style("opacity", 1)
.attr("y", 420 – mm_bar_height + mm_pos_y);

if(min_value < 0)
mm_running_total += element.current_value + Math.abs(min_value);

else
mm_running_total += element.current_value;

}

function timer_stop(element)
elapsed_time = t._time;
t.stop();

d3.select("#plotapi-chart-76680346_svg .proceed")
.attr("width", 0)
.style("fill", "#420a91");

d3.select("#plotapi-chart-76680346_svg .proceed")
.interrupt()
.transition()
.ease(d3.easeLinear)
.duration(element.duration ? element.duration : 5000)
.attr("width", 253.33333333333334)
.style("fill", "#40f99b");

t.restart(update, element.duration ? element.duration : 5000);

function restart()
d3.select("#plotapi-chart-76680346_svg .event_group").interrupt().style("opacity", 0);

d3.select("#plotapi-chart-76680346_svg .proceed").interrupt().attr("width", 0);

finished = false;
restart_opacity_lock = false;
skip_first = true;
t.stop();
t.restart(update, 0);

initialise();

d3.select("#plotapi-chart-76680346_restart")
.transition()
.ease(d3.easeQuad)
.duration(500)
.attr("width", 20)
.attr("height", 20)
.attr("x", 715.0)
.attr("y", -20)
.style("opacity", 0.6);

function show_restart(last_event_duration)
d3.select("#plotapi-chart-76680346_restart")
.transition()
.delay(last_event_duration)
.style(
"opacity",
0.6
);

d3.select("#plotapi-chart-76680346_restart")
.transition()
.ease(d3.easeQuad)
.delay(last_event_duration)
.duration(500)
.attr("width", 100)
.attr("height", 100)
.attr("x", 330.0)
.attr("y", 160.0)
.style("opacity", 0.6)
.on("end", function (d, i) restart_opacity_lock = true; );

var event_detail_bg = d3.select("#plotapi-chart-76680346_svg .event_group")
.append("rect")
.attr("x", 506.66666666666663)
.attr("y", 220)
.attr("width", 253.33333333333334)
.attr("height", 200)
.attr("rx", 5)
.attr("ry", 5)
.classed("event_detail_bg", true);

var event_detail_text = d3.select("#plotapi-chart-76680346_svg .event_group")
.append("foreignObject")
.classed("event_detail_text", true)
.attr("x", 506.66666666666663)
.attr("y", 220)
.attr("width", 253.33333333333334)
.attr("height", 200)
.style("display", "block")
.style("color", "white")
.style("padding", "10px")
.html(function (d)
return "";
);

d3.select("#plotapi-chart-76680346_svg .event_group").style("opacity", 0);

var event_detail_autoplay = d3.select("#plotapi-chart-76680346_svg .event_group")
.append("rect")
.attr("x", 506.66666666666663)
.attr("y", 210)
.attr("width", 0)
.attr("rx", 5)
.attr("ry", 5)
.attr("height", 10)
.style("opacity", 0.7)
.style("fill", "#420a91")
.classed("proceed", true);

var current_order_text = d3
.select("#plotapi-chart-76680346_svg .order_group")
.append("text")
.classed("current_order_text", true)
.attr("x", 755.0)
.attr("y", 415)
.text(format_current_order(sequence[sequence_index]))
.style("text-anchor", "end")
.style("dominant-baseline", "text-top");

initialise();

d3.select("#plotapi-chart-76680346_svg .overlay_group")
.append("svg:a")
.attr("xlink:href", "https://plotapi.com")
.attr("target", "_blank")
.append("image")
.attr("xlink:href", "https://plotapi.com/gallery/icon/plotapi.svg")
.attr("width", 20)
.attr("height", 20)
.attr("x", 740.0)
.attr("y", -20)
.style("opacity", 0)
.attr("id", "plotapi-chart-76680346_icon");

d3.select("#plotapi-chart-76680346_icon")
.append("title")
.text("Produced with Plotapi");

d3.select("#plotapi-chart-76680346_icon").on(
"mouseover",
function (d, i)
d3.select("#plotapi-chart-76680346_icon").style("opacity", 1);

);

d3.select("#plotapi-chart-76680346_icon").on(
"mouseout",
function (d, i)
d3.select("#plotapi-chart-76680346_icon").style("opacity", 0.6);

);

d3.select("#plotapi-chart-76680346_svg .overlay_group")
.append("svg:a")
.append("image")
.style("cursor", "pointer")
.attr("xlink:href", "https://plotapi.com/gallery/icon/restart.svg")
.attr("width", 20)
.attr("height", 20)
.attr("x", 715.0)
.attr("y", -20)
.style("opacity", 0)
.attr("id", "plotapi-chart-76680346_restart");

d3.select("#plotapi-chart-76680346_restart").on(
"click",
function (d, i)
restart();

);

d3.select("#plotapi-chart-76680346_restart").on(
"mouseover",
function (d, i)
d3.select("#plotapi-chart-76680346_restart").style("opacity", 1);

);

d3.select("#plotapi-chart-76680346_restart").on(
"mouseout",
function (d, i)
d3.select("#plotapi-chart-76680346_restart").style(
"opacity",
0.6
);

);

d3.select("#plotapi-chart-76680346 svg").on(
"mouseenter",
function ()
d3.select("#plotapi-chart-76680346_icon").style("opacity", 0.6);
if (!restart_opacity_lock)
d3.select("#plotapi-chart-76680346_restart").style(
"opacity",
0.6
);

);

d3.select("#plotapi-chart-76680346 svg").on(
"mouseleave",
function ()
d3.select("#plotapi-chart-76680346_icon").style("opacity", 0);
d3.select("#plotapi-chart-76680346_plus").style("opacity", 0);
d3.select("#plotapi-chart-76680346_minus").style("opacity", 0);
if (!restart_opacity_lock)
d3.select("#plotapi-chart-76680346_restart").style(
"opacity",
0
);

);

}

}());

Here we can see the default behaviour of Plotapi LineFight.

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.

Cookie	Duration	Description
cookielawinfo-checkbox-analytics	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional	11 months	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy	11 months	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.

Hands on with Lenovo’s new Android Tablets, Chromebooks, and Displays announced at IFA

How to Buy Circle Stock

Final Cut Pro’s Major Update Elevates Video Editing on Mac and iPad

Belkin’s 11-in-1 Pro Dock: Power-Packed Connectivity

Stimulus Check Update- Alaska And Pennsylvania To Receive Checks

Miami Hurricanes vs. Virginia Tech: Previewing the Hokies

Are There Any Stimulus Checks Coming Your Way In October?

Goldman Sachs Plans To Downsize 4,000 White Collar Workers

Iowa vs. LSU final score, results: Tigers set championship record en route to first national title

Oracle EDM Expands to Enterprise Profitability and Cost Management

Let Robots Do Your Lab Work

Cessna crashes in Southern California, killing 6

DataFrame to Samples Dict

Preamble¶

Introduction¶

Dataset¶

Wrangling¶

Visualisation¶

Viberate (VIB) Price Prediction 2022 — Will VIB Hit $0.1 Soon?

Preamble¶

Introduction¶

Dataset¶

Wrangling¶

Visualisation¶

You May Like