{
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);
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.