md`# Treemap of exposed PHP Versions
in SPIP Statistics`
chart = {
const root = treemap;
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("font", "10px sans-serif");
const leaf = svg.selectAll("g")
.data(root.leaves())
.join("g")
.attr("transform", d => `translate(${d.x0},${d.y0})`);
leaf.append("title")
.text(d => `${d.ancestors().reverse().map(d => d.data[0]).join("/")}\n${d.value}`);
leaf.append("rect")
.attr("id", d => (d.leafUid = DOM.uid("leaf")).id)
.attr("fill", d => { return namedColors[d.data.version]; })
.attr("stroke", "white")
.attr("fill-opacity", 0.6)
.attr("width", d => d.x1 - d.x0)
.attr("height", d => d.y1 - d.y0);
leaf.append("clipPath")
.attr("id", d => (d.clipUid = DOM.uid("clip")).id)
.append("use")
.attr("xlink:href", d => d.leafUid.href);
leaf.append("text")
.attr("clip-path", d => d.clipUid)
.selectAll("tspan")
.join("tspan")
.attr("x", 3)
.attr("y", (d, i, nodes) => `${(i === nodes.length - 1) * 0.3 + 1.1 + i * 0.9}em`)
.attr("fill-opacity", (d, i, nodes) => i === nodes.length - 1 ? 0.7 : null)
.text(d => d);
return svg.node();
}
spip = await fetch("https://jamesrezo.github.io/stats-backup/php.json").then(response => response.json())
group = d3.group(spip, d => d.version.substring(0, 1), d => d.version.substring(0, 3))
hierarchy = d3.hierarchy(group)
treemap = d3.treemap().size([width, height])(hierarchy.sum(d => d.sites))
width = 800
height = 800
namedColors = ({
"4.3": "#101010",
"4.4": "#101010",
"5.0": "#303030",
"5.1": "#505050",
"5.2": "#505050",
"5.3": "#505050",
"5.4": "#880000",
"5.5": "#880000",
"5.6": "#880000",
"7.0": "#990000",
"7.1": "#990000",
"7.2": "#990000",
"7.3": "#FFE599",
"7.4": "#FFE599",
"8.0": "#FFE599",
"8.1": "#B6D7A8",
"8.2": "#B6D7A8",
"8.3": "#B6D7A8",
"8.4": "#B6D7A8",
"8.5": "#D5A6BD",
})
d3 = require("d3@6.0.0-rc.3")
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.
