Changing the Colours and Icons

Preamble¶

In [1]:
from plotapi import LineFight

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

Introduction¶

Let’s take a look at how we can change the colours and icons for nodes in our Line Fight diagram.

Plotapi Line Fight is a beautiful and feature rich take on the popular Line Chart Race. As we can see, we have set our license details in the preamble with LineFight.set_license().

Dataset¶

Plotapi Line Fight expects at minimum a list of dictionary items, these will define the value of our segments over time.

In [2]:
samples = [
    "order": 0, "name": "Sankey", "value": 10,
    "order": 0, "name": "Terminus", "value": 10,
    "order": 0, "name": "Chord", "value": 40,
    "order": 0, "name": "Bar Fight", "value": 90,
    "order": 0, "name": "Pie Fight", "value": 70,

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

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

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

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

We can see that each dictionary item has three properties:

  • order which determines with time period this item belongs to. This should be numerical, but can be formatted e.g. as dates.
  • name the name of the item, and the text that appears on the element.
  • value the value of the element at the associated point in time.

Next, we’ll start customising the elements, or nodes, that will represent our data over time. Plotapi Line Fight expects a list of dictionary items to configure each node.

In [3]:
nodes = [
    
        "name": "Sankey",
        "color": "#ffd166", 
        "icon": "https://datacrayon.com/datasets/pokemon_img/003.png"
    ,
    
        "name": "Terminus",
        "color": "#06d6a0", 
        "icon": "https://datacrayon.com/datasets/pokemon_img/004.png"
    ,
    
        "name": "Chord",
        "color": "#118ab2", 
        "icon": "https://datacrayon.com/datasets/pokemon_img/025.png"
    ,
    
        "name": "Bar Fight",
        "color": "#073b4c", 
        "icon": "https://datacrayon.com/datasets/pokemon_img/151.png"
    ,
    
        "name": "Pie Fight",
        "color": "#ef476f", 
        "icon": "https://datacrayon.com/datasets/pokemon_img/232.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 elements (CSS colour e.g. “#073b4c” or “red”).
  • icon, the location of the image to use for the icon.

Visualisation¶

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. More on the different output methods later!

Be sure to interact with the visualisation to see what the default settings can do!

In [4]:
LineFight(samples,
         nodes=nodes).show()

Plotapi – Line Fight Diagram

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

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

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

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

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

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

#plotapi-chart-7d609ec5 .tick text
fill: #999;

#plotapi-chart-7d609ec5 .domain
stroke-width: 0;

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

#plotapi-chart-7d609ec5 .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-7d609ec5
font-family: “Lato”, sans-serif;

text-align: center;

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

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

#plotapi-chart-7d609ec5 text::selection,
#plotapi-chart-7d609ec5 div::selection,
#plotapi-chart-7d609ec5 img::selection,
#plotapi-chart-7d609ec5 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-7d609ec5_svg .event_group”).transition().duration(250).style(“opacity”, 0);
t._time = elapsed_time;
elapsed_time = 0;
last_proc = elapsed;
current_order_text.text(
format_current_order(sequence[sequence_index])
);
else
if (sequence_index = 2000

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)
contestants.sort((a, b) => b.current_value – a.current_value);
draw(2000);
sequence_index++;

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

d3.select(“#plotapi-chart-7d609ec5_restart”).style(
“opacity”,
0.6
);

d3.select(“#plotapi-chart-7d609ec5_restart”)
.transition()
.ease(d3.easeQuad)
.duration(500)
.attr(“width”, 100)
.attr(“height”, 100)
.attr(“x”, 330.0)
.attr(“y”, 160.0)
.style(“opacity”, 0.6);

}

function show_event(element)

timer_stop();

d3.select(“#plotapi-chart-7d609ec5_svg .event_detail_text”).html(function (d)
return (

‘ +
element.event +


);
);

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

function update_current(current)
var event_fired = false;

var event_element = events.find(item =>
return item.order === current
)

if(event_element != undefined)
event_fired = true;
show_event(event_element)

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-7d609ec5_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-7d609ec5_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-7d609ec5_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-7d609ec5_svg .bartext_group .grp”+element.id)
.transition()
.duration(200)
.style(“opacity”, 1);

)
.on(“mouseout”, function (d, i)
d3.selectAll(“#plotapi-chart-7d609ec5_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-7d609ec5_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-7d609ec5_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 force_order(easeFn)
return;
bar_height = d3.max([420 / top_n – bar_padding, 0]);
bartext_font_size = 14;
y_scale = d3.scaleLinear().domain([0, top_n]).range([0, 420]);

for (var index = 0; index top_n)
easing = d3.easeCubic;
duration = 0;

const element = contestants[index];

var x_scale_current_x = x_scale(element.current_value);

element.text_name.attr(
“x”,
x_scale_current_x –
text_padding –
(element.icon_image ? bar_height – icon_padding : 0)
);

element.text_value
.attr(
“x”,
x_scale_current_x –
text_padding –
(element.icon_image ? bar_height – icon_padding : 0)
)
.text(format_value(element.current_value));

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

element.icon.attr(
“x”,
x_scale_current_x – (bar_height – icon_padding)
);

element.rect
.transition()
.ease(easing)
.duration(duration)
.attr(“height”, bar_height)
.attr(“y”, y_scale(index));

icon_size = 40

element.icon
.attr(“width”, icon_size)
.attr(“height”, icon_size)
.transition()
.ease(easing)
.duration(duration)
.attr(“y”, y_scale(index) + icon_padding);

element.text_name
.style(“font-size”, bartext_font_size + “px”)
.transition()
.ease(easing)
.duration(duration)
.attr(“y”, bar_text_lower_y(index));

element.text_value
.style(“font-size”, bartext_font_size + “px”)

.transition()
.ease(easing)
.duration(duration)
.attr(“y”, bar_text_upper_y(index));

}

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-7d609ec5_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-7d609ec5_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-7d609ec5_svg .line_group”)
.selectAll(“*”)
.remove();
d3.select(“#plotapi-chart-7d609ec5_svg .bar_group”)
.selectAll(“*”)
.remove();
d3.select(“#plotapi-chart-7d609ec5_svg .bartext_group”)
.selectAll(“*”)
.remove();

d3.select(“#plotapi-chart-7d609ec5_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-7d609ec5_svg .axis_group”)
.selectAll(“*”)
.remove();

var x_axis_line = d3
.select(“#plotapi-chart-7d609ec5_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-7d609ec5_svg .axis_group”)
.append(“g”)
.attr(“class”, “axis y_axis”)
.attr(“transform”, `translate(0, 0))`)
.call(y_axis)

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

force_order(d3.easeCubic);

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-7d609ec5_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()
elapsed_time = t._time;
t.stop();

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

d3.select("#plotapi-chart-7d609ec5_svg .proceed")
.interrupt()
.transition()
.ease(d3.easeLinear)
.duration(5000)
.attr("width", 253.33333333333334)
.style("fill", "#40f99b");

t.restart(update, 5000);

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

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

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

initialise();

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

var event_detail_bg = d3.select("#plotapi-chart-7d609ec5_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-7d609ec5_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-7d609ec5_svg .event_group").style("opacity", 0);

var event_detail_autoplay = d3.select("#plotapi-chart-7d609ec5_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-7d609ec5_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-7d609ec5_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-7d609ec5_icon");

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

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

);

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

);

d3.select("#plotapi-chart-7d609ec5_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-7d609ec5_restart");

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

);

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

);

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

);

d3.select("#plotapi-chart-7d609ec5 svg").on(
"mouseenter",
function ()
d3.select("#plotapi-chart-7d609ec5_icon").style("opacity", 0.6);
if (!finished)
d3.select("#plotapi-chart-7d609ec5_restart").style(
"opacity",
0.6
);

);

d3.select("#plotapi-chart-7d609ec5 svg").on(
"mouseleave",
function ()
d3.select("#plotapi-chart-7d609ec5_icon").style("opacity", 0);
d3.select("#plotapi-chart-7d609ec5_plus").style("opacity", 0);
d3.select("#plotapi-chart-7d609ec5_minus").style("opacity", 0);
if (!finished)
d3.select("#plotapi-chart-7d609ec5_restart").style(
"opacity",
0
);

);

}

}());

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.