md`# SPIP Statistics`
height = 500
color = d3
.scaleOrdinal()
.domain(keys)
.range(spipColors)
spipColors = ["#101010", "#101010", "#303030", "#505050", "#707070", "#909090", "#933", "#FFFFFF", "#955", "#955", "#955", "#FFE599", "#B6D7A8", "#B6D7A8", "#D5A6BD", "#D5A6BD"]
margin = ({top: 20, right: 30, bottom: 30, left: 40})
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
svg.append("g")
.selectAll("path")
.data(series)
.join("path")
.attr("fill", ({key}) => color(key))
.attr("d", area)
.append("title")
.text(({key}) => key);
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
return svg.node();
}
spip = Object.assign(
d3.csvParse(await fetch("https://jamesrezo.github.io/stats-backup/spip.since-one-year.csv")
.then(response => response.text())).map(d => {
d.version = ["all", "older", "unknown"].includes(d.version)
? d.version
: "v" + d.version;
d.date = d3.utcParse("%Y-%m-%d")(d.date.slice(0, 10));
return d;
}),
{ y: "Sites" }
)
bydate = d3.rollup(
spip,
v => {
const r = {
date: v[0].date
};
v.forEach(d => (r[d.version] = d.sites));
if (r["v3.1"]) r["all"] = 2 * r["all"] - d3.sum(keys, k => r[k]);
return r;
},
d => +(24 * 3600 * 1000 * +Math.floor(d.date / (24 * 3600 * 1000)))
)
keys = new Set(spip.map(d => d.version).sort())
series = d3
.stack()
.keys(keys)
.order(d3.stackOrderReverse)
.value((d, key) => d[key] || 0)(bydate.values())
area = d3
.area()
.x(d => x(d.data.date))
.y0(d => y(d[0]))
.y1(d => y(d[1]))
x = d3.scaleUtc()
.domain(d3.extent(spip, d => d.date))
.range([margin.left, width - margin.right])
y = {
const max = d3.max(series, d => d3.max(d, d => d[1]));
return d3
.scaleLinear()
.domain([0, max])
.nice()
.range([height - margin.bottom, margin.top]);
}
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
.call(g => g.select(".domain").remove())
.call(g => g.select(".tick:last-of-type text").clone()
.attr("x", 3)
.attr("text-anchor", "start")
.attr("font-weight", "bold")
.text(spip.y))
d3 = require("d3@6.0.0-rc.3")
import {swatches} from "@d3/color-legend"
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.
