Risk, finance, economic modelling, forecasting and stress testing
Public
Edited
Mar 11
data = FileAttachment("tree.csv").csv({ typed: true })
lineplot("Mining", 150, 350)
{ let maxdate = d3.max(data, d => d.Date);
let hierarchyData = d3.hierarchy(
d3.group(data.filter(d => d.Date >= maxdate), d => d.Industry))
.sum(d => d.GVA)
.sort((a, b) => b.value - a.value)
d3.treemap().size([800, 800]).padding(1)(hierarchyData);
let plotdata = hierarchyData.leaves().map(d =>
({ ...d, h: d.y1 - d.y0, w: d.x1 - d.x0, ya: 800-d.y1 }));
let plt = Plot.plot({
height: 800,
width: 800,
x: { axis: null },
y: { axis: null },
marks: [
Plot.rect(hierarchyData.leaves(), {
x1: "x0",
x2: "x1",
y1: "y0",
y2: "y1",
fill: "#f1f1f1",
opacity: 0.5,
tip: true,
title: d => d.data.Industry }),
plotdata.map(d => {
return (index, {x,y}) => {
return htl.svg`<g transform="translate(${d.x0}, ${d.ya})">
${lineplot(d.data.Industry, d.h, d.w) }
</g>`; }
})
]});
return plt;
}
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.
