Published
Edited
Apr 7, 2020
1 star
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("overflow", "visible");
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
const path = svg.append("g")
.attr("fill", "none")
.attr("stroke", "#56b4e9")
.attr("stroke-width", 1.5)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.selectAll("path")
.data(data.series)
.join("path")
.style("mix-blend-mode", "multiply")
.attr("d", d => line(d.values));
svg.call(hover, path);
return svg.node();
}
// cool!
regex = new RegExp(order)
// deaths first
// could add a regex here for data filter?
// /^D/ for deaths
// /^C/ for confirmed cases
// /^T/ for tests
data = {
const variable = data3.series.filter(d => regex.test(d.name) == true);
const dates = data3.dates;
return {
series: variable,
dates: dates
}
}
data3 = {
//const data = d3.csvParse(await FileAttachment("covid-19-cases-uk.csv").text());
const parseDate = d3.utcParse("%Y-%m-%d");
const dates = Array.from(new Set(data2.map(d => d.date)));
return {
y: "Variable",
series: Array.from(
d3.rollup(data2, ([d]) => +d.Value, d => `${d.Indicator}, ${d.Country}`, d => d.date),
([name, values]) => ({name, values: dates.map(values.get, values)})
),
dates: dates.map(parseDate)
};
}
data2 = {
return d3.csv("https://tom-e-white.com/covid-19-uk-data/data/covid-19-indicators-uk.csv", ({Date, Country, Indicator, Value}) => ({
date: Date,
Country: Country,
Indicator: Indicator,
Value: +Value
}));
}
function hover(svg, path) {
if ("ontouchstart" in document) svg
.style("-webkit-tap-highlight-color", "transparent")
.on("touchmove", moved)
.on("touchstart", entered)
.on("touchend", left)
else svg
.on("mousemove", moved)
.on("mouseenter", entered)
.on("mouseleave", left);
const dot = svg.append("g")
.attr("display", "none");
dot.append("circle")
.attr("r", 2.5);
dot.append("text")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.attr("text-anchor", "middle")
.attr("y", -8);
function moved() {
d3.event.preventDefault();
const ym = y.invert(d3.event.layerY);
const xm = x.invert(d3.event.layerX);
const i1 = d3.bisectLeft(data.dates, xm, 1);
const i0 = i1 - 1;
const i = xm - data.dates[i0] > data.dates[i1] - xm ? i1 : i0;
const s = d3.least(data.series, d => Math.abs(d.values[i] - ym));
const v = data.series.map(function(d){if(d.name == s.name){return d.values[i]}}).filter(d => d != null)
path.attr("stroke", d => d === s ? null : "#ddd").filter(d => d === s).raise();
dot.attr("transform", `translate(${x(data.dates[i])},${y(s.values[i])})`);
dot.select("text").text(s.name + ", " + v);
}
function entered() {
path.style("mix-blend-mode", null).attr("stroke", "#ddd");
dot.attr("display", null);
}
function left() {
path.style("mix-blend-mode", "multiply").attr("stroke", null);
dot.attr("display", "none");
}
}
// - 50 here to accommodate overflowing tooltip
x = d3.scaleUtc()
.domain(d3.extent(data.dates))
.range([margin.left, width - margin.right - 50])
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.
