Connect with us

Technology

Event Information Modes

Published

on

Preamble?

In [1]:

from plotapi import BarFight

BarFight.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 Bar Fight diagram.
Plotapi Bar Fight is a beautiful and feature rich take on the popular Bar Chart Race. As we can see, we have set our license details in the preamble with BarFight.set_license().

Dataset?

Plotapi Bar 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”: 12},
{“order”: 0, “name”: “Chord”, “value”: 8},
{“order”: 0, “name”: “Bar Fight”, “value”: 9},
{“order”: 0, “name”: “Pie Fight”, “value”: 12},

{“order”: 1, “name”: “Sankey”, “value”: 18},
{“order”: 1, “name”: “Terminus”, “value”: 24},
{“order”: 1, “name”: “Chord”, “value”: 22},
{“order”: 1, “name”: “Bar Fight”, “value”: 14},
{“order”: 1, “name”: “Pie Fight”, “value”: 17},

{“order”: 2, “name”: “Sankey”, “value”: 24},
{“order”: 2, “name”: “Terminus”, “value”: 40},
{“order”: 2, “name”: “Chord”, “value”: 32},
{“order”: 2, “name”: “Bar Fight”, “value”: 19},
{“order”: 2, “name”: “Pie Fight”, “value”: 42},

{“order”: 3, “name”: “Sankey”, “value”: 32},
{“order”: 3, “name”: “Terminus”, “value”: 62},
{“order”: 3, “name”: “Chord”, “value”: 40},
{“order”: 3, “name”: “Bar Fight”, “value”: 25},
{“order”: 3, “name”: “Pie Fight”, “value”: 64},

{“order”: 4, “name”: “Sankey”, “value”: 38},
{“order”: 4, “name”: “Terminus”, “value”: 75},
{“order”: 4, “name”: “Chord”, “value”: 55},
{“order”: 4, “name”: “Bar Fight”, “value”: 45},
{“order”: 4, “name”: “Pie Fight”, “value”: 120},
]

Next, we’ll start specifying event content to appear at certain points during our visualisation. Plotapi Bar Fight expects a list of dictionary items to configure each event.

In [3]:

events = [
{
“order”: 0,
“event”: ‘<p>Event information content can be <b>formatted with HTML</b>!</p><p>You can even include CSS – the <a href =”https://plotapi.com”>power</a> of both are available.</p>’
},
{
“order”: 1,
“event”: ‘<b>Something Special</b><br><img src=”https://datacrayon.com/datasets/pokemon_img/150.png”><p>Something special happened here, probably!</p>’
},
{
“order”: 4,
“event”: ‘<p>By specifying a <b>duration</b>, an event can be displayed for longer than the default value – much like this one!</p>’,
}
]

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!

Default Event Mode?

Without any additional configuration, the default event mode will pause the visualisation for the event duration.
This duration is specified either per-event using the events structure above, or globally using the event_duration parameter as seen below.

In [4]:

BarFight(samples,
events=events,
event_duration=7500).show()

Plotapi – Bar Fight Diagram


);
});

d3.select(“#plotapi-chart-1f7f52fb_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)
}

current_data = data.filter((d) => d.order == current);

for (var index = 0; index d.id == element.id);
if (contestant.length != 0) {
if (!isNaN(element.value)) {
contestant[0].current_value = contestant[0].target_value;
contestant[0].target_value = element.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-1f7f52fb_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))
.attr(“stroke-width”, 4)
.attr(“stroke-opacity”, 1)
.style(“stroke”, darken_color(color(element.id),0.3))
;

contestant_icon_image = icon(element.id);

contestant_icon = d3
.select(“#plotapi-chart-1f7f52fb_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_text_value = d3
.select(“#plotapi-chart-1f7f52fb_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”, “white”)
.style(“font-size”, bartext_font_size + “px”);

contestant_text_name = d3
.select(“#plotapi-chart-1f7f52fb_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”, “white”)
.style(“font-weight”, “900”)
.style(“font-size”, bartext_font_size + “px”);

contestant = {
id: element.id,
rect: contestant_rect,
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);
}
}

if (sequence_index > 0) {
update_minimap();
}

}

function force_order(easeFn) {
bar_height = d3.max([420 / top_n – bar_padding, 0]);
bartext_font_size = d3.max([(bar_height – 10) / 2, 0]);
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 = d3.max([bar_height – (icon_padding * 2), 0]);

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) {
for (var index = 0; index d.current_value);

if (new_max != current_max) {
current_max = new_max;

x_scale = d3
.scaleLinear()
.domain([0, current_max])
.range([0, 780]);

x_axis.scale(x_scale);

d3.select(“#plotapi-chart-1f7f52fb_svg”)
.select(“.x_axis”)
.transition()
.duration(250)
.ease(d3.easeLinear)
.call(x_axis);
}

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

if (
last_order.indexOf(element.id) !=
current_order.indexOf(element.id)
) {
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-1f7f52fb_svg .bar_group”)
.selectAll(“*”)
.remove();
d3.select(“#plotapi-chart-1f7f52fb_svg .bartext_group”)
.selectAll(“*”)
.remove();

d3.select(“#plotapi-chart-1f7f52fb_svg .minimap_group”)
.selectAll(“*”)
.remove();
last_proc = 0;
top_n = 5;

bar_padding = 8;
bar_height = d3.max([420 / 5 – bar_padding, 0]);
icon_padding =2;
text_padding = 5;
current_order = [];
last_order = [];
elapsed_time = 0;
sequence_index = 0;
current_max = null;
y_scale = d3.scaleLinear().domain([0, top_n]).range([0, 420]);
bartext_font_size = d3.max([(bar_height – 10) / 2, 0]);
icon_size = d3.max([bar_height – (icon_padding * 2), 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, current_max])
.range([0, 780]);

}

x_axis = d3
.axisTop()
.scale(x_scale)
.ticks(7.8, undefined)
.tickSize((-420))
.tickFormat((d) => d3.format(“,”)(d));

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

var x_axis_line = d3
.select(“#plotapi-chart-1f7f52fb_svg .axis_group”)
.append(“g”)
.attr(“class”, “axis x_axis”)
.attr(“transform”, `translate(0, -2.0)`)
.call(x_axis)
.selectAll(“.tick line”)
.classed(“origin”, (d) => d == 0);

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 y_scale(index) + bar_height * 0.75;
}

function bar_text_lower_y(index) {
return y_scale(index) + bar_height * 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,5);

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, 260.0]);

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 d.current_value > 0 && !isNaN(d.current_value)
);
if (top_n d.current_value > 0 && !isNaN(d.current_value)
);
if (top_n > 1) {
top_n–;
force_order(d3.easeElastic);
}
}
);

d3.select(“#plotapi-chart-1f7f52fb_minus”).on(
“mouseover”,
function (d, i) {
d3.select(“#plotapi-chart-1f7f52fb_minus”).style(“opacity”, 1);
}
);

d3.select(“#plotapi-chart-1f7f52fb_minus”).on(
“mouseout”,
function (d, i) {
d3.select(“#plotapi-chart-1f7f52fb_minus”).style(“opacity”, 0.6);
}
);

d3.select(“#plotapi-chart-1f7f52fb svg”).on(
“mouseenter”,
function () {
d3.select(“#plotapi-chart-1f7f52fb_icon”).style(“opacity”, 0.6);
d3.select(“#plotapi-chart-1f7f52fb_plus”).style(“opacity”, 0.6);
d3.select(“#plotapi-chart-1f7f52fb_minus”).style(“opacity”, 0.6);
if (!finished) {
d3.select(“#plotapi-chart-1f7f52fb_restart”).style(
“opacity”,
0.6
);
}
}
);

d3.select(“#plotapi-chart-1f7f52fb svg”).on(
“mouseleave”,
function () {
d3.select(“#plotapi-chart-1f7f52fb_icon”).style(“opacity”, 0);
d3.select(“#plotapi-chart-1f7f52fb_plus”).style(“opacity”, 0);
d3.select(“#plotapi-chart-1f7f52fb_minus”).style(“opacity”, 0);
if (!finished) {
d3.select(“#plotapi-chart-1f7f52fb_restart”).style(
“opacity”,
0
);
}
}
);

}

}());

Running Event Mode?

By specifying event_pause=False, we can keep the visualisation running during the duration of the event content.
In this mode, the event duration is treated as a maximum duration, such that any subsequent events will interrupt the previous one.

In [5]:

BarFight(samples,
events=events,
event_pause=False).show()

Plotapi – Bar Fight Diagram


);
});

d3.select(“#plotapi-chart-5cdc3e1a_svg .event_group”)
.interrupt()
.transition()
.duration(250)
.style(“opacity”, 1)
d3.select(“#plotapi-chart-5cdc3e1a_svg .event_group”)
.transition()
.delay(element.duration ? element.duration : 5000)
.duration(250)
.style(“opacity”, 0)
;
}

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

current_data = data.filter((d) => d.order == current);

for (var index = 0; index d.id == element.id);
if (contestant.length != 0) {
if (!isNaN(element.value)) {
contestant[0].current_value = contestant[0].target_value;
contestant[0].target_value = element.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-5cdc3e1a_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))
.attr(“stroke-width”, 4)
.attr(“stroke-opacity”, 1)
.style(“stroke”, darken_color(color(element.id),0.3))
;

contestant_icon_image = icon(element.id);

contestant_icon = d3
.select(“#plotapi-chart-5cdc3e1a_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_text_value = d3
.select(“#plotapi-chart-5cdc3e1a_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”, “white”)
.style(“font-size”, bartext_font_size + “px”);

contestant_text_name = d3
.select(“#plotapi-chart-5cdc3e1a_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”, “white”)
.style(“font-weight”, “900”)
.style(“font-size”, bartext_font_size + “px”);

contestant = {
id: element.id,
rect: contestant_rect,
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);
}
}

if (sequence_index > 0) {
update_minimap();
}

}

function force_order(easeFn) {
bar_height = d3.max([420 / top_n – bar_padding, 0]);
bartext_font_size = d3.max([(bar_height – 10) / 2, 0]);
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 = d3.max([bar_height – (icon_padding * 2), 0]);

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) {
for (var index = 0; index d.current_value);

if (new_max != current_max) {
current_max = new_max;

x_scale = d3
.scaleLinear()
.domain([0, current_max])
.range([0, 780]);

x_axis.scale(x_scale);

d3.select(“#plotapi-chart-5cdc3e1a_svg”)
.select(“.x_axis”)
.transition()
.duration(250)
.ease(d3.easeLinear)
.call(x_axis);
}

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

if (
last_order.indexOf(element.id) !=
current_order.indexOf(element.id)
) {
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-5cdc3e1a_svg .bar_group”)
.selectAll(“*”)
.remove();
d3.select(“#plotapi-chart-5cdc3e1a_svg .bartext_group”)
.selectAll(“*”)
.remove();

d3.select(“#plotapi-chart-5cdc3e1a_svg .minimap_group”)
.selectAll(“*”)
.remove();
last_proc = 0;
top_n = 5;

bar_padding = 8;
bar_height = d3.max([420 / 5 – bar_padding, 0]);
icon_padding =2;
text_padding = 5;
current_order = [];
last_order = [];
elapsed_time = 0;
sequence_index = 0;
current_max = null;
y_scale = d3.scaleLinear().domain([0, top_n]).range([0, 420]);
bartext_font_size = d3.max([(bar_height – 10) / 2, 0]);
icon_size = d3.max([bar_height – (icon_padding * 2), 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, current_max])
.range([0, 780]);

}

x_axis = d3
.axisTop()
.scale(x_scale)
.ticks(7.8, undefined)
.tickSize((-420))
.tickFormat((d) => d3.format(“,”)(d));

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

var x_axis_line = d3
.select(“#plotapi-chart-5cdc3e1a_svg .axis_group”)
.append(“g”)
.attr(“class”, “axis x_axis”)
.attr(“transform”, `translate(0, -2.0)`)
.call(x_axis)
.selectAll(“.tick line”)
.classed(“origin”, (d) => d == 0);

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 y_scale(index) + bar_height * 0.75;
}

function bar_text_lower_y(index) {
return y_scale(index) + bar_height * 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,5);

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, 260.0]);

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 d.current_value > 0 && !isNaN(d.current_value)
);
if (top_n d.current_value > 0 && !isNaN(d.current_value)
);
if (top_n > 1) {
top_n–;
force_order(d3.easeElastic);
}
}
);

d3.select(“#plotapi-chart-5cdc3e1a_minus”).on(
“mouseover”,
function (d, i) {
d3.select(“#plotapi-chart-5cdc3e1a_minus”).style(“opacity”, 1);
}
);

d3.select(“#plotapi-chart-5cdc3e1a_minus”).on(
“mouseout”,
function (d, i) {
d3.select(“#plotapi-chart-5cdc3e1a_minus”).style(“opacity”, 0.6);
}
);

d3.select(“#plotapi-chart-5cdc3e1a svg”).on(
“mouseenter”,
function () {
d3.select(“#plotapi-chart-5cdc3e1a_icon”).style(“opacity”, 0.6);
d3.select(“#plotapi-chart-5cdc3e1a_plus”).style(“opacity”, 0.6);
d3.select(“#plotapi-chart-5cdc3e1a_minus”).style(“opacity”, 0.6);
if (!finished) {
d3.select(“#plotapi-chart-5cdc3e1a_restart”).style(
“opacity”,
0.6
);
}
}
);

d3.select(“#plotapi-chart-5cdc3e1a svg”).on(
“mouseleave”,
function () {
d3.select(“#plotapi-chart-5cdc3e1a_icon”).style(“opacity”, 0);
d3.select(“#plotapi-chart-5cdc3e1a_plus”).style(“opacity”, 0);
d3.select(“#plotapi-chart-5cdc3e1a_minus”).style(“opacity”, 0);
if (!finished) {
d3.select(“#plotapi-chart-5cdc3e1a_restart”).style(
“opacity”,
0
);
}
}
);

}

}());Read More

Source Here: datacrayon.com

Technology

Changing the Colours and Icons

Published

on

Preamble?

In [1]:

from plotapi import BarFight

BarFight.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 Bar Fight diagram.
Plotapi Bar Fight is a beautiful and feature rich take on the popular Bar Chart Race. As we can see, we have set our license details in the preamble with BarFight.set_license().

Dataset?

Plotapi Bar 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”: 12},
{“order”: 0, “name”: “Chord”, “value”: 8},
{“order”: 0, “name”: “Bar Fight”, “value”: 9},
{“order”: 0, “name”: “Pie Fight”, “value”: 12},

{“order”: 1, “name”: “Sankey”, “value”: 18},
{“order”: 1, “name”: “Terminus”, “value”: 24},
{“order”: 1, “name”: “Chord”, “value”: 22},
{“order”: 1, “name”: “Bar Fight”, “value”: 14},
{“order”: 1, “name”: “Pie Fight”, “value”: 17},

{“order”: 2, “name”: “Sankey”, “value”: 24},
{“order”: 2, “name”: “Terminus”, “value”: 40},
{“order”: 2, “name”: “Chord”, “value”: 32},
{“order”: 2, “name”: “Bar Fight”, “value”: 19},
{“order”: 2, “name”: “Pie Fight”, “value”: 42},

{“order”: 3, “name”: “Sankey”, “value”: 32},
{“order”: 3, “name”: “Terminus”, “value”: 62},
{“order”: 3, “name”: “Chord”, “value”: 40},
{“order”: 3, “name”: “Bar Fight”, “value”: 25},
{“order”: 3, “name”: “Pie Fight”, “value”: 64},

{“order”: 4, “name”: “Sankey”, “value”: 38},
{“order”: 4, “name”: “Terminus”, “value”: 75},
{“order”: 4, “name”: “Chord”, “value”: 55},
{“order”: 4, “name”: “Bar Fight”, “value”: 45},
{“order”: 4, “name”: “Pie Fight”, “value”: 120},
]

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 bar.

value the value of the bar at the associated point in time.

Next, we’ll start customising the bars, or nodes, that will represent our data over time. Plotapi Bar 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 bars (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]:

BarFight(samples,
nodes=nodes).show()

Plotapi – Bar Fight Diagram


);
});

d3.select(“#plotapi-chart-c7486add_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)
}

current_data = data.filter((d) => d.order == current);

for (var index = 0; index d.id == element.id);
if (contestant.length != 0) {
if (!isNaN(element.value)) {
contestant[0].current_value = contestant[0].target_value;
contestant[0].target_value = element.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-c7486add_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))
.attr(“stroke-width”, 4)
.attr(“stroke-opacity”, 1)
.style(“stroke”, darken_color(color(element.id),0.3))
;

contestant_icon_image = icon(element.id);

contestant_icon = d3
.select(“#plotapi-chart-c7486add_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_text_value = d3
.select(“#plotapi-chart-c7486add_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”, “white”)
.style(“font-size”, bartext_font_size + “px”);

contestant_text_name = d3
.select(“#plotapi-chart-c7486add_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”, “white”)
.style(“font-weight”, “900”)
.style(“font-size”, bartext_font_size + “px”);

contestant = {
id: element.id,
rect: contestant_rect,
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);
}
}

if (sequence_index > 0) {
update_minimap();
}

}

function force_order(easeFn) {
bar_height = d3.max([420 / top_n – bar_padding, 0]);
bartext_font_size = d3.max([(bar_height – 10) / 2, 0]);
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 = d3.max([bar_height – (icon_padding * 2), 0]);

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) {
for (var index = 0; index d.current_value);

if (new_max != current_max) {
current_max = new_max;

x_scale = d3
.scaleLinear()
.domain([0, current_max])
.range([0, 780]);

x_axis.scale(x_scale);

d3.select(“#plotapi-chart-c7486add_svg”)
.select(“.x_axis”)
.transition()
.duration(250)
.ease(d3.easeLinear)
.call(x_axis);
}

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

if (
last_order.indexOf(element.id) !=
current_order.indexOf(element.id)
) {
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-c7486add_svg .bar_group”)
.selectAll(“*”)
.remove();
d3.select(“#plotapi-chart-c7486add_svg .bartext_group”)
.selectAll(“*”)
.remove();

d3.select(“#plotapi-chart-c7486add_svg .minimap_group”)
.selectAll(“*”)
.remove();
last_proc = 0;
top_n = 5;

bar_padding = 8;
bar_height = d3.max([420 / 5 – bar_padding, 0]);
icon_padding =2;
text_padding = 5;
current_order = [];
last_order = [];
elapsed_time = 0;
sequence_index = 0;
current_max = null;
y_scale = d3.scaleLinear().domain([0, top_n]).range([0, 420]);
bartext_font_size = d3.max([(bar_height – 10) / 2, 0]);
icon_size = d3.max([bar_height – (icon_padding * 2), 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, current_max])
.range([0, 780]);

}

x_axis = d3
.axisTop()
.scale(x_scale)
.ticks(7.8, undefined)
.tickSize((-420))
.tickFormat((d) => d3.format(“,”)(d));

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

var x_axis_line = d3
.select(“#plotapi-chart-c7486add_svg .axis_group”)
.append(“g”)
.attr(“class”, “axis x_axis”)
.attr(“transform”, `translate(0, -2.0)`)
.call(x_axis)
.selectAll(“.tick line”)
.classed(“origin”, (d) => d == 0);

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 y_scale(index) + bar_height * 0.75;
}

function bar_text_lower_y(index) {
return y_scale(index) + bar_height * 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,5);

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, 260.0]);

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 d.current_value > 0 && !isNaN(d.current_value)
);
if (top_n d.current_value > 0 && !isNaN(d.current_value)
);
if (top_n > 1) {
top_n–;
force_order(d3.easeElastic);
}
}
);

d3.select(“#plotapi-chart-c7486add_minus”).on(
“mouseover”,
function (d, i) {
d3.select(“#plotapi-chart-c7486add_minus”).style(“opacity”, 1);
}
);

d3.select(“#plotapi-chart-c7486add_minus”).on(
“mouseout”,
function (d, i) {
d3.select(“#plotapi-chart-c7486add_minus”).style(“opacity”, 0.6);
}
);

d3.select(“#plotapi-chart-c7486add svg”).on(
“mouseenter”,
function () {
d3.select(“#plotapi-chart-c7486add_icon”).style(“opacity”, 0.6);
d3.select(“#plotapi-chart-c7486add_plus”).style(“opacity”, 0.6);
d3.select(“#plotapi-chart-c7486add_minus”).style(“opacity”, 0.6);
if (!finished) {
d3.select(“#plotapi-chart-c7486add_restart”).style(
“opacity”,
0.6
);
}
}
);

d3.select(“#plotapi-chart-c7486add svg”).on(
“mouseleave”,
function () {
d3.select(“#plotapi-chart-c7486add_icon”).style(“opacity”, 0);
d3.select(“#plotapi-chart-c7486add_plus”).style(“opacity”, 0);
d3.select(“#plotapi-chart-c7486add_minus”).style(“opacity”, 0);
if (!finished) {
d3.select(“#plotapi-chart-c7486add_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.Read More

Source: datacrayon.com

Continue Reading

Technology

Displaying Event Information

Published

on

Preamble?

In [1]:

from plotapi import BarFight

BarFight.set_license(“your username”, “your license key”)

Introduction?

Let’s take a look at how we can display event content during our visualisation at different times. This can be useful for displaying additional information or images that are relevant to specific events.
Plotapi Bar Fight is a beautiful and feature rich take on the popular Bar Chart Race. As we can see, we have set our license details in the preamble with BarFight.set_license().

Dataset?

Plotapi Bar 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”: 12},
{“order”: 0, “name”: “Chord”, “value”: 8},
{“order”: 0, “name”: “Bar Fight”, “value”: 9},
{“order”: 0, “name”: “Pie Fight”, “value”: 12},

{“order”: 1, “name”: “Sankey”, “value”: 18},
{“order”: 1, “name”: “Terminus”, “value”: 24},
{“order”: 1, “name”: “Chord”, “value”: 22},
{“order”: 1, “name”: “Bar Fight”, “value”: 14},
{“order”: 1, “name”: “Pie Fight”, “value”: 17},

{“order”: 2, “name”: “Sankey”, “value”: 24},
{“order”: 2, “name”: “Terminus”, “value”: 40},
{“order”: 2, “name”: “Chord”, “value”: 32},
{“order”: 2, “name”: “Bar Fight”, “value”: 19},
{“order”: 2, “name”: “Pie Fight”, “value”: 42},

{“order”: 3, “name”: “Sankey”, “value”: 32},
{“order”: 3, “name”: “Terminus”, “value”: 62},
{“order”: 3, “name”: “Chord”, “value”: 40},
{“order”: 3, “name”: “Bar Fight”, “value”: 25},
{“order”: 3, “name”: “Pie Fight”, “value”: 64},

{“order”: 4, “name”: “Sankey”, “value”: 38},
{“order”: 4, “name”: “Terminus”, “value”: 75},
{“order”: 4, “name”: “Chord”, “value”: 55},
{“order”: 4, “name”: “Bar Fight”, “value”: 45},
{“order”: 4, “name”: “Pie Fight”, “value”: 120},
]

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 bar.

value the value of the bar at the associated point in time.

Next, we’ll start specifying event content to appear at certain points during our visualisation. Plotapi Bar Fight expects a list of dictionary items to configure each event.

In [3]:

events = [
{
“order”: 0,
“event”: ‘<p>Event information content can be <b>formatted with HTML</b>!</p><p>You can even include CSS – the <a href =”https://plotapi.com”>power</a> of both are available.</p>’
},
{
“order”: 1,
“event”: ‘<b>Something Special</b><br><img src=”https://datacrayon.com/datasets/pokemon_img/150.png”><p>Something special happened here, probably!</p>’
},
{
“order”: 4,
“event”: ‘<p>By specifying a <b>duration</b>, an event can be displayed for longer than the default value – much like this one!</p>’,
“duration”: 10000
}
]

We can see that each dictionary item has three properties:

order, which determines with time period this event belongs to. This should correspond to the orders specified in the samples.

event, the HTML content of the event information popup.

duration, the maximum display duration for the corresponding event content.

By default, a Plotapi Bar Fight visualisation will pause for the duration of an event. However, it can be configured to either continue running or wait for the user to press a continue button. Check the next section in the Plotapi Gallery for an example!

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]:

BarFight(samples,
events=events).show()

Plotapi – Bar Fight Diagram


);
});

d3.select(“#plotapi-chart-f5e9caaa_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)
}

current_data = data.filter((d) => d.order == current);

for (var index = 0; index d.id == element.id);
if (contestant.length != 0) {
if (!isNaN(element.value)) {
contestant[0].current_value = contestant[0].target_value;
contestant[0].target_value = element.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-f5e9caaa_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))
.attr(“stroke-width”, 4)
.attr(“stroke-opacity”, 1)
.style(“stroke”, darken_color(color(element.id),0.3))
;

contestant_icon_image = icon(element.id);

contestant_icon = d3
.select(“#plotapi-chart-f5e9caaa_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_text_value = d3
.select(“#plotapi-chart-f5e9caaa_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”, “white”)
.style(“font-size”, bartext_font_size + “px”);

contestant_text_name = d3
.select(“#plotapi-chart-f5e9caaa_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”, “white”)
.style(“font-weight”, “900”)
.style(“font-size”, bartext_font_size + “px”);

contestant = {
id: element.id,
rect: contestant_rect,
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);
}
}

if (sequence_index > 0) {
update_minimap();
}

}

function force_order(easeFn) {
bar_height = d3.max([420 / top_n – bar_padding, 0]);
bartext_font_size = d3.max([(bar_height – 10) / 2, 0]);
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 = d3.max([bar_height – (icon_padding * 2), 0]);

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) {
for (var index = 0; index d.current_value);

if (new_max != current_max) {
current_max = new_max;

x_scale = d3
.scaleLinear()
.domain([0, current_max])
.range([0, 780]);

x_axis.scale(x_scale);

d3.select(“#plotapi-chart-f5e9caaa_svg”)
.select(“.x_axis”)
.transition()
.duration(250)
.ease(d3.easeLinear)
.call(x_axis);
}

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

if (
last_order.indexOf(element.id) !=
current_order.indexOf(element.id)
) {
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-f5e9caaa_svg .bar_group”)
.selectAll(“*”)
.remove();
d3.select(“#plotapi-chart-f5e9caaa_svg .bartext_group”)
.selectAll(“*”)
.remove();

d3.select(“#plotapi-chart-f5e9caaa_svg .minimap_group”)
.selectAll(“*”)
.remove();
last_proc = 0;
top_n = 5;

bar_padding = 8;
bar_height = d3.max([420 / 5 – bar_padding, 0]);
icon_padding =2;
text_padding = 5;
current_order = [];
last_order = [];
elapsed_time = 0;
sequence_index = 0;
current_max = null;
y_scale = d3.scaleLinear().domain([0, top_n]).range([0, 420]);
bartext_font_size = d3.max([(bar_height – 10) / 2, 0]);
icon_size = d3.max([bar_height – (icon_padding * 2), 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, current_max])
.range([0, 780]);

}

x_axis = d3
.axisTop()
.scale(x_scale)
.ticks(7.8, undefined)
.tickSize((-420))
.tickFormat((d) => d3.format(“,”)(d));

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

var x_axis_line = d3
.select(“#plotapi-chart-f5e9caaa_svg .axis_group”)
.append(“g”)
.attr(“class”, “axis x_axis”)
.attr(“transform”, `translate(0, -2.0)`)
.call(x_axis)
.selectAll(“.tick line”)
.classed(“origin”, (d) => d == 0);

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 y_scale(index) + bar_height * 0.75;
}

function bar_text_lower_y(index) {
return y_scale(index) + bar_height * 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,5);

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, 260.0]);

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 d.current_value > 0 && !isNaN(d.current_value)
);
if (top_n d.current_value > 0 && !isNaN(d.current_value)
);
if (top_n > 1) {
top_n–;
force_order(d3.easeElastic);
}
}
);

d3.select(“#plotapi-chart-f5e9caaa_minus”).on(
“mouseover”,
function (d, i) {
d3.select(“#plotapi-chart-f5e9caaa_minus”).style(“opacity”, 1);
}
);

d3.select(“#plotapi-chart-f5e9caaa_minus”).on(
“mouseout”,
function (d, i) {
d3.select(“#plotapi-chart-f5e9caaa_minus”).style(“opacity”, 0.6);
}
);

d3.select(“#plotapi-chart-f5e9caaa svg”).on(
“mouseenter”,
function () {
d3.select(“#plotapi-chart-f5e9caaa_icon”).style(“opacity”, 0.6);
d3.select(“#plotapi-chart-f5e9caaa_plus”).style(“opacity”, 0.6);
d3.select(“#plotapi-chart-f5e9caaa_minus”).style(“opacity”, 0.6);
if (!finished) {
d3.select(“#plotapi-chart-f5e9caaa_restart”).style(
“opacity”,
0.6
);
}
}
);

d3.select(“#plotapi-chart-f5e9caaa svg”).on(
“mouseleave”,
function () {
d3.select(“#plotapi-chart-f5e9caaa_icon”).style(“opacity”, 0);
d3.select(“#plotapi-chart-f5e9caaa_plus”).style(“opacity”, 0);
d3.select(“#plotapi-chart-f5e9caaa_minus”).style(“opacity”, 0);
if (!finished) {
d3.select(“#plotapi-chart-f5e9caaa_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.Read More

Original Source: datacrayon.com

Continue Reading

Technology

Animal Crossing Villager Species and Personality

Published

on

Preamble?

In [1]:

from plotapi import Chord
import json

Chord.set_license(“your username”, “your license key”)

Introduction?

In this notebook we’re going to use Plotapi Chord to visualise the co-occurrences between the species and personality of Aniaml Crossing villagers. We”ll use Python, but Plotapi can be used from any programming language.
In a chord diagram (or radial network), entities are arranged radially as segments with their relationships visualised by ribbons that connect them. The size of the segments illustrates the numerical proportions, whilst the size of the arc illustrates the significance of the relationships. Chord diagrams are useful when trying to convey relationships between different entities, and they can be beautiful and eye-catching.

Dataset?

We’re going to use data from Animal Crossing New Horizons data. Previously, we made use of the data available in this repository. However, since the 2.0 update, we’ve created our own! Let’s get loading the data.

In [2]:

with open(“ac_species_personality.json”, “r”) as f:
data = json.load(f)

Visualisation?

Let’s use Plotapi Chord for this visualisation, you can see more examples in the Gallery.
We’re going to adjust some layout and template parameters, and flip the intro animation on too.
Because we’re using a data-table, we can also click on any part of the diagram to “lock” the selection.

In [3]:

Chord(
data[“matrix”],
data[“names”],
colors=data[“colors”],
details=data[“details”],
details_thumbs=data[“details_thumbs”],
noun=”villagers!”,
thumbs_width=50,
curved_labels=True,
popup_width=600,
bipartite=True,
bipartite_idx=data[“bipartite_idx”],
bipartite_size=0.4,
padding=0.0,
width=800,
data_table_column_width=100,
font_size_large=”16px”,
data_table=data[“data_table”],
data_table_show_indices=False
).show()

Plotapi – Chord DiagramRead More

Source Here: datacrayon.com

Continue Reading

Trending

Merablue.com