May 28, 2024

Shopping Center

Delighting shopping center buffs

DataFrame to Samples Dict

DataFrame to Samples Dict

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.