Changing the Colours and Icons

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

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

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

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

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

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

#plotapi-chart-42db4490 .tick text
fill: #999;

#plotapi-chart-42db4490 .domain
stroke-width: 0;

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

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

text-align: center;

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

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

#plotapi-chart-42db4490 text::selection,
#plotapi-chart-42db4490 div::selection,
#plotapi-chart-42db4490 img::selection,
#plotapi-chart-42db4490 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-42db4490_svg .event_group”).transition().duration(250).style(“opacity”, 0);
elapsed_time = 0;
last_proc = elapsed;
else
if (sequence_index = 2000

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-42db4490_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-42db4490_svg .event_detail_text”).html(function (d)
return (
‘

”
);
);

d3.select(“#plotapi-chart-42db4490_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_index-1, 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_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-42db4490_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-42db4490_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-42db4490_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-42db4490_svg .bartext_group .grp”+element.id)
.transition()
.duration(200)
.style(“opacity”, 1);

)
.on(“mouseout”, function (d, i)
d3.selectAll(“#plotapi-chart-42db4490_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-42db4490_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-42db4490_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_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([0, 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-42db4490_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-42db4490_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-42db4490_svg .line_group”)
.selectAll(“*”)
.remove();
d3.select(“#plotapi-chart-42db4490_svg .bar_group”)
.selectAll(“*”)
.remove();
d3.select(“#plotapi-chart-42db4490_svg .bartext_group”)
.selectAll(“*”)
.remove();

d3.select(“#plotapi-chart-42db4490_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([0, sequence.length-1])
.range([0, 760.0]);

x_axis = d3
.axisBottom()
.scale(x_scale)
.ticks(sequence.length-1, undefined)
.tickSize(-420)
.tickFormat((d) => format_current_order(sequence[d]))

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

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

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

d3.select(“#plotapi-chart-42db4490_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-42db4490_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-42db4490_svg .proceed")
.attr("width", 0)
.style("fill", "#420a91");

d3.select("#plotapi-chart-42db4490_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-42db4490_svg .event_group").interrupt().style("opacity", 0);

d3.select("#plotapi-chart-42db4490_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-42db4490_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-42db4490_restart")
.transition()
.delay(last_event_duration)
.style(
"opacity",
0.6
);

d3.select("#plotapi-chart-42db4490_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-42db4490_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-42db4490_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-42db4490_svg .event_group").style("opacity", 0);

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

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

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

);

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

);

d3.select("#plotapi-chart-42db4490_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-42db4490_restart");

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

);

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

);

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

);

d3.select("#plotapi-chart-42db4490 svg").on(
"mouseenter",
function ()
d3.select("#plotapi-chart-42db4490_icon").style("opacity", 0.6);
if (!restart_opacity_lock)
d3.select("#plotapi-chart-42db4490_restart").style(
"opacity",
0.6
);

);

d3.select("#plotapi-chart-42db4490 svg").on(
"mouseleave",
function ()
d3.select("#plotapi-chart-42db4490_icon").style("opacity", 0);
d3.select("#plotapi-chart-42db4490_plus").style("opacity", 0);
d3.select("#plotapi-chart-42db4490_minus").style("opacity", 0);
if (!restart_opacity_lock)
d3.select("#plotapi-chart-42db4490_restart").style(
"opacity",
0
);

);

}

}());