Data Visualization Consultant, and an enthusiastic generalist in building software systems
// Data till Sep 2021
series_data = FileAttachment("series_data.json").json()
data = dataset
.filter(d => d.category == datamode && d.name.indexOf("#") == -1)
.sort((a, b) => d3.ascending(a.date, b.date))
d3.group(data, d => d.name)
data.filter(d => d.name === "India")
names = new Set(data.map(d => d.name))
datevalues = Array.from(
d3.rollup(data, ([d]) => d.value, d => d.date, d => d.name)
)
.map(([date, data]) => [new Date(date), data])
.sort(([a], [b]) => d3.ascending(a, b))
function rank(value) {
const data = Array.from(names, name => ({name, value: value(name) || 0}));
data.sort((a, b) => d3.descending(a.value, b.value));
for (let i = 0, n = data.length; i < n; ++i) data[i].rank = i;
return data;
}
rank(name => datevalues[0][1].get(name))
k = 10
nameframes = d3.groups(keyframes.flatMap(([, data]) => data), d => d.name)
prev = new Map(nameframes.flatMap(([, data]) => d3.pairs(data, (a, b) => [b, a])))
next = new Map(nameframes.flatMap(([, data]) => d3.pairs(data)))
function bars(svg) {
let bar = svg
.append("g")
.attr("fill-opacity", 0.6)
.selectAll("rect");
return ([date, data], transition) =>
(bar = bar
.data(data.slice(0, n), d => d.name)
.join(
enter =>
enter
.append("rect")
.attr("fill", color)
.attr("height", y.bandwidth())
.attr("x", x(0))
.attr("y", d => y((prev.get(d) || d).rank))
.attr("width", d => x((prev.get(d) || d).value) - x(0)),
update => update,
exit =>
exit
.transition(transition)
.remove()
.attr("y", d => y((next.get(d) || d).rank))
.attr("width", d => x((next.get(d) || d).value) - x(0))
)
.call(bar =>
bar
.transition(transition)
.attr("y", d => y(d.rank))
.attr("width", d => x(d.value) - x(0))
));
}
formatNumber = d3.format(",d")
formatDate = d3.timeFormat("%d %b")
tickerSize = 150 // The width of formatDate.
color_ = {
const scale = d3
.scaleSqrt()
.domain([n - 1, 0])
.range([`hsla(57, 100%, 50%, 0.36)`, `hsla(7, 100%, 50%, 0.57)`]);
return d => scale(d.rank);
}
color = {
const scale = d3.interpolateRainbow;
return (d, i) =>
scale(
Math.sqrt((d.rank + i * Math.random() + (d.name || '*').length) / 10)
);
}
Array.from(names.values())
x = d3.scaleLinear([0, 1], [margin.left, width - margin.right])
y = d3.scaleBand()
.domain(d3.range(m))
.range([margin.top, margin.top + barSize * (m + 0.1)])
.padding(0.1)
m = names.size
height = margin.top + barSize * n + margin.bottom
barSize = 48
margin = ({top: 16, right: 6, bottom: 6, left: 6})
d3 = require("d3@5", "d3-array@2")
import { radio, slider } from "@jashkenas/inputs"
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.
