Public
Edited
Feb 12, 2023
{
// SVG set up
let w = 800;
let h = 500;
let svg = d3
.create("svg")
.attr("width", "100%")
.attr("viewBox", [0, 0, w, h])
.style("border", "solid 1px black");
let [xmin, xmax, ymin, ymax] = [-0.5, 13.5, -0.2, 1.4];
let pad = 20;
let x_scale = d3
.scaleLinear()
.domain([xmin, xmax])
.range([pad, w - pad]);
let y_scale = d3
.scaleLinear()
.domain([ymin, ymax])
.range([h - pad, pad]);
let path = d3
.line()
.x((d) => x_scale(d[0]))
.y((d) => y_scale(d[1]));
// Generate some random data
let n = 1000;
let lambda = d3.randomUniform(0.5, 1.5)();
let pts = d3.range(n).map(d3.randomExponential(lambda));
// Bin the data.
// Uncomment the return call to see what I mean
let bins = d3.bin().thresholds(20)(pts);
// return bins;
// The width of each bin and a normalizer
// to get the areas of the bins to be 1.
let dx = bins[1].x1 - bins[1].x0;
let normalizer = 1 / (n * dx);
// Set up the rectangles
let rect_group = svg
.append("g")
.attr("fill", color)
.attr("stroke", "white")
.attr("stroke-width", 3);
rect_group
.selectAll("rect")
.data(bins)
.join("rect")
.attr("x", (b) => x_scale(b.x0))
.attr("width", (b) => x_scale(b.x1) - x_scale(b.x0))
.attr("y", y_scale(0)) // Note the rects are initial right on the x-axis
.attr("height", 0); // And they are very short
// Graph the normal curve with the same mean and standard deviation as the data.
let f = (x) => lambda * Math.exp(-lambda * x);
let graph = svg
.append("path")
.attr("d", path(d3.range(xmin, xmax, 0.01).map((x) => [x, f(x)])))
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-width", 3);
// Draw the axes
svg
.append("g")
.attr("transform", `translate(0, ${y_scale(0)})`)
.call(
d3
.axisBottom(x_scale)
.tickValues([-3, -2, -1, 1, 2, 3])
.tickFormat(d3.format("d"))
.tickSizeOuter(0)
);
svg
.append("g")
.attr("transform", `translate(${x_scale(0)})`)
.call(d3.axisLeft(y_scale).tickValues([0.5, 1, 1.5]).tickSizeOuter(0));
// Set up the point group
let pt_group = svg.append("g").attr("fill", "black");
pt_group
.selectAll("circle")
.data(pts)
.join("circle")
.attr("cx", (pt) => x_scale(pt))
.attr("cy", y_scale(0))
.attr("r", 4)
.attr("opacity", 0); // The points are initially invisible
// Wait 300 milliseconds then transition the points to fade
// in over 600 milliseconds.
Promises.delay(300).then(() =>
pt_group
.selectAll("circle")
.transition()
.duration(600)
.attr("opacity", 0.02)
);
// Another 1300-900 = 400 milliseconds later,
// transition the heights of the rects so that
// they're set after another half second.
Promises.delay(1300).then(function () {
rect_group
.selectAll("rect")
.transition()
.duration(500)
.attr("y", (b) => y_scale(normalizer * b.length))
.attr("height", (b) => y_scale(0) - y_scale(normalizer * b.length));
});
// Finally, draw the graph.
let length = graph.node().getTotalLength();
graph.attr("stroke-dasharray", [0, length]);
Promises.delay(1800).then(() =>
graph.transition().duration(800).attr("stroke-dasharray", [length, length])
);
return svg.node();
}
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.
