silentPlot = {
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("id", "mapArea");
//create svg background color
let bg = svg
.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", width)
.attr("height", height)
.attr("fill", "#000000")
.on("mouseover", function () {
d3.select("#directions").transition().duration(1000).attr("opacity", 0);
d3.selectAll(".deathCircles")
.data(vizData)
//wait before anything happens...
// .transition()
// .duration(initialDelay)
// .attr("opacity", 0)
//fade in a little bit
// .transition()
// .delay((d, i) => Math.random() * 1000)
// .attr("opacity", 0.2)
//fade out again
// .transition()
// .duration(2000)
// .attr("opacity", 0)
//wait before the finale
.transition()
.delay(2000)
.attr("opacity", 0)
//fade in for real
.transition()
.duration((d, i) => Math.random() * 1000)
.delay((d, i) => Math.random() * 5000)
.attr("opacity", 1)
.attr("cy", (d) => y(d.total));
})
.on("mouseout", function (d) {
d3.select("#directions").transition().duration(1000).attr("opacity", 1);
d3.selectAll(".deathCircles")
.transition()
.duration(1000)
.attr("opacity", 0)
.transition()
.duration(0)
.attr("cy", margin.top);
});
let directions = svg
.append("text")
.attr("id", "directions")
.attr("pointer-events", "none")
.attr("x", width / 2)
.attr("y", height / 2)
.attr("fill", "white")
.attr("font-family", "sans-serif")
.attr("text-anchor", "middle")
.attr("alignment-baseline", "center")
.text("pay your respects by pausing here");
const gx = svg.append("g").call(xAxis);
const gy = svg.append("g").call(yAxis);
svg
.selectAll(".deathCircles")
.data(vizData)
.enter()
.append("circle")
.attr("cx", (d) => x(d.date))
.attr("cy", margin.top)
.attr("r", (d) => radScale(d.cases))
.attr("opacity", 0)
.attr("class", "deathCircles")
.attr("pointer-events", "none")
.attr("fill", (d) => d3.interpolatePuBuGn(colorScale(d.cases)));
return svg.node();
}
colorScale = d3
.scaleLinear()
.domain(d3.extent(vizData, (d) => d.cases))
.range([0.4, 0.7])
x = d3
.scaleTime()
.domain(d3.extent(vizData, (d) => d.date))
.range([margin.left, width - margin.right])
y = d3
.scaleLinear()
.domain(d3.extent(vizData, (d) => d.total))
.range([height - margin.bottom, margin.top])
xAxis = (g) =>
g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).tickSizeOuter(0))
.call((g) => g.selectAll(".tick line").attr("stroke", "white"))
.call((g) => g.select(".domain").attr("stroke", "white"))
.call((g) => g.selectAll(".tick text").attr("fill", "white"))
yAxis = (g) =>
g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
.call((g) => g.select(".domain").remove())
.call((g) => g.selectAll(".tick line").attr("stroke", "white"))
.call((g) => g.select(".domain").attr("stroke", "white"))
.call((g) => g.selectAll(".tick text").attr("fill", "white"))
groupBy = function(xs, key) {
return xs.reduce(function(rv, x) {
(rv[x[key]] = rv[x[key]] || []).push(x);
return rv;
}, {});
}
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.
