Plotapi – Line Fight Diagram
#plotapi-chart-00aa58fd path
fill: none;
stroke-linecap: round
#plotapi-chart-00aa58fd .tick:first-of-type text
stroke-width: 0;
#plotapi-chart-00aa58fd .x_axis .tick:not(:first-of-type) line
stroke-opacity: 0;
#plotapi-chart-00aa58fd .y_axis .tick:not(:first-of-type) line
stroke: #999;
stroke-opacity: 0.5;
stroke-dasharray: 2,2
#plotapi-chart-00aa58fd .y_axis .tick:first-of-type line
stroke-width: 0;
stroke: #999;
stroke-opacity: 0.4;
#plotapi-chart-00aa58fd .x_axis .tick:first-of-type line
stroke-width: 0;
stroke: #999;
stroke-opacity: 0.4;
#plotapi-chart-00aa58fd .tick text
fill: #999;
#plotapi-chart-00aa58fd .domain
stroke-width: 0;
#plotapi-chart-00aa58fd .title
stroke: #fcfcfc;
paint-order: stroke;
stroke-width: 3px;
stroke-linecap: butt;
stroke-linejoin: miter;
stroke-opacity: 0.4;
#plotapi-chart-00aa58fd .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-00aa58fd
font-family: “Lato”, sans-serif;
text-align: center;
#plotapi-chart-00aa58fd .event_detail_bg
fill: black;
opacity: 0.7;
#plotapi-chart-00aa58fd .event_detail_text div,
#plotapi-chart-00aa58fd .event_detail_text p,
#plotapi-chart-00aa58fd .event_detail_text span
font-size: 16px;
#plotapi-chart-00aa58fd text::selection,
#plotapi-chart-00aa58fd div::selection,
#plotapi-chart-00aa58fd img::selection,
#plotapi-chart-00aa58fd 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-00aa58fd_svg .event_group”).transition().duration(250).style(“opacity”, 0);
elapsed_time = 0;
last_proc = elapsed;
else
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);
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;
d3.select(“#plotapi-chart-00aa58fd_svg .event_detail_text”).html(function (d)
return (
‘
‘ +
element.event +
“
”
);
);
d3.select(“#plotapi-chart-00aa58fd_svg .event_group”)
.interrupt()
.transition()
.duration(250)
.style(“opacity”, 1)
d3.select(“#plotapi-chart-00aa58fd_svg .event_group”)
.transition()
.delay(element.duration ? element.duration : 5000)
.duration(250)
.style(“opacity”, 0)
;
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-00aa58fd_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-00aa58fd_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-00aa58fd_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-00aa58fd_svg .bartext_group .grp”+element.id)
.transition()
.duration(200)
.style(“opacity”, 1);
)
.on(“mouseout”, function (d, i)
d3.selectAll(“#plotapi-chart-00aa58fd_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-00aa58fd_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-00aa58fd_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-00aa58fd_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-00aa58fd_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-00aa58fd_svg .line_group”)
.selectAll(“*”)
.remove();
d3.select(“#plotapi-chart-00aa58fd_svg .bar_group”)
.selectAll(“*”)
.remove();
d3.select(“#plotapi-chart-00aa58fd_svg .bartext_group”)
.selectAll(“*”)
.remove();
d3.select(“#plotapi-chart-00aa58fd_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-00aa58fd_svg .axis_group”)
.selectAll(“*”)
.remove();
var x_axis_line = d3
.select(“#plotapi-chart-00aa58fd_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-00aa58fd_svg .axis_group”)
.append(“g”)
.attr(“class”, “axis y_axis”)
.attr(“transform”, `translate(0, 0))`)
.call(y_axis)
d3.select(“#plotapi-chart-00aa58fd_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-00aa58fd_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 restart()
d3.select("#plotapi-chart-00aa58fd_svg .event_group").interrupt().style("opacity", 0);
d3.select("#plotapi-chart-00aa58fd_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-00aa58fd_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-00aa58fd_restart")
.transition()
.delay(last_event_duration)
.style(
"opacity",
0.6
);
d3.select("#plotapi-chart-00aa58fd_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-00aa58fd_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-00aa58fd_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-00aa58fd_svg .event_group").style("opacity", 0);
var event_detail_autoplay = d3.select("#plotapi-chart-00aa58fd_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-00aa58fd_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-00aa58fd_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-00aa58fd_icon");
d3.select("#plotapi-chart-00aa58fd_icon")
.append("title")
.text("Produced with Plotapi");
d3.select("#plotapi-chart-00aa58fd_icon").on(
"mouseover",
function (d, i)
d3.select("#plotapi-chart-00aa58fd_icon").style("opacity", 1);
);
d3.select("#plotapi-chart-00aa58fd_icon").on(
"mouseout",
function (d, i)
d3.select("#plotapi-chart-00aa58fd_icon").style("opacity", 0.6);
);
d3.select("#plotapi-chart-00aa58fd_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-00aa58fd_restart");
d3.select("#plotapi-chart-00aa58fd_restart").on(
"click",
function (d, i)
restart();
);
d3.select("#plotapi-chart-00aa58fd_restart").on(
"mouseover",
function (d, i)
d3.select("#plotapi-chart-00aa58fd_restart").style("opacity", 1);
);
d3.select("#plotapi-chart-00aa58fd_restart").on(
"mouseout",
function (d, i)
d3.select("#plotapi-chart-00aa58fd_restart").style(
"opacity",
0.6
);
);
d3.select("#plotapi-chart-00aa58fd svg").on(
"mouseenter",
function ()
d3.select("#plotapi-chart-00aa58fd_icon").style("opacity", 0.6);
if (!restart_opacity_lock)
d3.select("#plotapi-chart-00aa58fd_restart").style(
"opacity",
0.6
);
);
d3.select("#plotapi-chart-00aa58fd svg").on(
"mouseleave",
function ()
d3.select("#plotapi-chart-00aa58fd_icon").style("opacity", 0);
d3.select("#plotapi-chart-00aa58fd_plus").style("opacity", 0);
d3.select("#plotapi-chart-00aa58fd_minus").style("opacity", 0);
if (!restart_opacity_lock)
d3.select("#plotapi-chart-00aa58fd_restart").style(
"opacity",
0
);
);
}
}());