d3.group(data.keys, d => d.name)
chart.update(index)
duration = 2500
parseNumber = string => +string.replace(/,/g, "")
formatNumber = d3.format(",d")
sums = data.keys.map((d, i) => d3.hierarchy(data).sum(d => d.values ? Math.round(d.values[i]) : 0).value)
max = d3.max(sums)
color = d3.scaleOrdinal(data.children.map(d => d.name), d3.schemeCategory10.map(d => d3.interpolateRgb(d, "white")(0.5)))
function nest(data, ...keys) {
const nest = d3.nest();
for (const key of keys) nest.key(key);
function hierarchy({key, values}, depth) {
return {
name: key,
children: depth < keys.length - 1
? values.map(d => hierarchy(d, depth + 1))
: values
};
}
return nest.entries(data).map(d => hierarchy(d, 0));
}
data = {
const keys = d3.range(1, 65, 1);
const [regions, states] = await Promise.all([
FileAttachment("regions@4.csv").text(),
FileAttachment("WorldwideConfirmed26March@3.csv").text()
]).then(([regions, states]) => [
d3.csvParse(regions),
d3.csvParse(states, (d, i) => i === 0 ? null : ({name: d[""], values: keys.map(key => +d[key].replace(/,/g, "") || 1e-6)}))
]);
const regionByState = new Map(regions.map(d => [d.State, d.Region]));
const divisionByState = new Map(regions.map(d => [d.State, d.Division]));
return {keys, children: nest(states, d => regionByState.get(d.name), d => divisionByState.get(d.name))};
}
width = 954
height = width
import {Scrubber} from "@mbostock/scrubber"
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.
