Fun with Transitions
{
let svg = d3.create("svg")
.attr("width", set_width)
.attr("height", height)
.attr("viewBox", `${-offset} ${-offset} ${set_width} ${height}`);
while (true) {
let data = get_data();
if (svg.selectAll("g").size() == 0) {
draw(svg, data);
yield svg.node();
} else {
await Promises.tick(delay);
}
}
}
get_data = function() {
let points = Array.from({length: number_of_points}, () => Math.round(Math.random() * point_size_range + min_point_size));
let data = [];
// add each point to the data set
for (let i = 0; i < points.length; i++) {
data.push({id: i, value: points[i]});
}
// add the order after the first sort (vertical)
add_vertical_order(data);
// sort the data based on the previous step so we can slice across like values
data = data.sort((a, b) => d3.ascending(a.vertical_order, b.vertical_order));
// add the order after the second sort (horizontal)
add_horizontal_order(data);
// add the final sort order
data = data.sort((a, b) => d3.ascending(a.value, b.value));
for (let i = 0; i < points.length; i++) {
data[i]["final_order"] = i;
}
return data;
}
add_vertical_order = function(data) {
for (let i = 0; i < data.length; i+=num_rows) {
let slice = data.slice(i,i+num_rows).sort((a, b) => d3.ascending(a.value, b.value));
for (let j = 0; j < slice.length; j++) {
slice[j]["vertical_order"] = j;
}
}
}
add_horizontal_order = function(data) {
for (let i=0; i < data.length; i+=num_cols) {
let slice = data.slice(i,i+num_cols).sort((a, b) => d3.ascending(a.value, b.value));
for (let j = 0; j < slice.length; j++) {
slice[j]["horizontal_order"] = j;
}
}
}
draw = function(g, data) {
// add a new g that we'll placing all of the drawing within
let target_g = g.append("g");
// create static base
target_g.append("g")
.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("cx", d => gap*d.id)
.attr("cy", 0)
.transition()
.delay(delay)
.duration(duration)
.attr("r", d => gap*(d.value)/(4*point_size_range))
.attr("fill", d => d3.interpolateCool((d.value - min_point_size)/point_size_range))
// create animated part
target_g.append("g")
.selectAll("circle")
.data(data)
.enter()
.append("circle")
.call(place_top_line);
// remove circles when animation is done
target_g
.transition()
.delay(17*delay)
.duration(duration)
.style("opacity", 0)
.remove();
}
place_top_line = function(selection) {
selection
.attr("cx", d => gap*d.id)
.attr("cy", 0)
.transition()
.delay(delay)
.duration(duration)
.attr("r", d => gap*(d.value)/(4*point_size_range))
.attr("fill", d => d3.interpolateCool((d.value - min_point_size)/point_size_range))
.call(place_middle_grouping);
}
place_middle_grouping = function(selection) {
let mid_point = gap + gap*(number_of_points/num_rows) + gap*num_rows/2;
selection
.transition()
.delay(delay)
.duration(duration)
.attr("cx", d => mid_point + gap*Math.floor(d.id/num_rows))
.attr("cy", d => 2*gap + gap*(d.id % num_rows))
.transition()
.delay(delay)
.duration(duration)
.attr("cy", d => 2*gap + gap*d.vertical_order)
.transition()
.delay(delay)
.duration(duration)
.attr("cx", d => mid_point + gap*d.horizontal_order)
.call(place_bottom_line);
}
place_bottom_line = function(selection) {
selection
.transition()
.delay(d => delay + 100 * d.final_order)
.duration(duration)
.attr("cy", height - 2*offset)
.attr("cx", d => gap*d.final_order);
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
