DataFrame to Samples Dict

#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 {
if (sequence_index = 2000 || 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 (
‘

”
);
});

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
);
}
}
);

}

}());