Visualization can transform the reach of open data and revolutionize transparency and accountability.
CatalanBudget= FileAttachment("out-2.csv").csv();
minimum_amount = 20000;
desiredData = CatalanBudget.map(d => ({
amount : +d.Amount,
department : d.Department,
program: d.Program,
chapter : d.Chapter,
article : d.Article}))
.filter(d => d.amount > minimum_amount);
groupedData = d3.group(desiredData, d => d.department, d => d.program);
hierarchy = d3.hierarchy(groupedData).sum(d => d.amount);
treemapChart = {
const height = 700;
//Create the treemap data structure
const treemap = data => d3.treemap()
.tile(d3.treemapSquarify)
.size([width, height])
.padding(1)
.round(true)
(hierarchy);
const root = treemap(hierarchy);
//Create the SVG
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("font", "10px sans-serif");
//Create a group for each leave node
const leaf = svg.selectAll("g")
.data(root.leaves())
.join("g")
.attr("transform", d => `translate(${d.x0},${d.y0})`);
//Format defines how the numbers have to be shown
const format = d3.format(".3s");
//The title consists of the names of the hierarchy and the amount
//It's a "cheap" way of having a tooltip-like information -> but depends on the browser
leaf.append("title")
.text(d => `${d.ancestors().reverse().map(d => d.data[0] || d.data["article"]).join("/")}\n${format(d.value)}€`);
//Color scale
const treemapcolor = d3.scaleOrdinal(d3.schemeCategory10);
//Append a rect for each leave
//a id is needed for later define the cliping and the text
leaf.append("rect")
.attr("id", d => (d.leafUid = DOM.uid("leaf")).id)
.attr("fill", d => { while (d.depth > 1) d = d.parent; return treemapcolor(d.data[0]); })
.attr("fill-opacity", 0.6)
.attr("width", d => d.x1 - d.x0)
.attr("height", d => d.y1 - d.y0);
//Clip path is used to don't overflow the rect with the text
leaf.append("clipPath")
.attr("id", d => (d.clipUid = DOM.uid("clip")).id)
.append("use")
.attr("xlink:href", d => d.leafUid.href);
//We add the informative text to each leave
leaf.append("text")
.attr("clip-path", d => d.clipUid)
.selectAll("tspan")
.data(d => d.data["article"].split(/(?=[A-Z][a-z])|\s+/g).concat(format(d.data["amount"])+"€"))
.join("tspan")
.attr("x", 3)
.attr("y", (d, i, nodes) => `${(i === nodes.length - 1) * 0.3 + 1.1 + i * 0.9}em`)
.attr("font-size", "0.7em")
.attr("fill-opacity", (d, i, nodes) => i === nodes.length - 1 ? 0.7 : null)
.text(d => d);
return svg.node();
}
rolledData = d3.rollup(desiredData, v => d3.sum(v, d => d.amount), d => d.department, d => d.program);
hierarchyBasedOnRollup = d3.hierarchy(rolledData).sum(d=> d[1]);
treemapChartWithRollup = {
const height = 700;
//Create the treemap data structure, now based on the rollup
const treemap = data => d3.treemap()
.tile(d3.treemapSquarify)
.size([width, height])
.padding(1)
.round(true)
(hierarchyBasedOnRollup);
const root = treemap(hierarchyBasedOnRollup);
//Create the SVG
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})`);
const format = d3.format(".3s");
leaf.append("title")
.text(d => `${d.ancestors().reverse().map(d => d.data[0] || d.data["article"]).join("/")}\n${format(d.value)}€`);
const treemapcolor = d3.scaleOrdinal(d3.schemeCategory10);
leaf.append("rect")
.attr("id", d => (d.leafUid = DOM.uid("leaf")).id)
.attr("fill", d => { while (d.depth > 1) d = d.parent; return treemapcolor(d.data[0]); })
.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")
.data(d => [d.data[0],format(d.data[1])+"€"]) //We create an array with the two elements to be shown
.join("tspan")
.attr("x", 3)
.attr("y", (d, i, nodes) => `${(i === nodes.length - 1) * 0.3 + 1.1 + i * 0.9}em`)
.attr("font-size", "0.7em")
.attr("fill-opacity", (d, i, nodes) => i === nodes.length - 1 ? 0.7 : null)
.text(d => d);
return svg.node();
}
chart = {
const height = 2400;
const partition = data => d3.partition()
.size([height, width])
.padding(1)
(data.sort((a, b) => b.value - a.value))
const root = partition(hierarchy);
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("font", "10px sans-serif");
const cell = svg
.selectAll("g")
.data(root.descendants())
.join("g")
.attr("transform", d => `translate(${d.y0},${d.x0})`);
const color = d3.scaleSequential()
.domain([0,height])
.interpolator(d3.interpolateRainbow);
cell.append("rect")
.attr("width", d => d.y1 - d.y0)
.attr("height", d => d.x1 - d.x0)
.attr("fill-opacity", 0.8)
.attr("fill", d => {
if (!d.depth) return "#ccc";
while (d.depth > 1) d = d.parent;
//return color(d.x0);
return color((d.x1 + d.x0)/2);
});
const text = cell.filter(d => (d.x1 - d.x0) > 16).append("text")
.attr("x", 4)
.attr("y", 13);
text.append("tspan")
.text(d => {
let msg = d.data["article"] ||d.data[0]||"Generalitat";
//console.log("Name:"+(d.data["article"] ||d.data[0]||"Generalitat"));
if(msg.length > 35) {
msg = msg.slice(0,32);
msg+="...";
}
return msg;
});
const format = d3.format(".3s");
text.append("tspan")
.attr("fill-opacity", 0.7)
.text(d => ` ${format(d.value)}€`);
cell.append("title")
.text(d => `${d.ancestors().map(d => (d.data["article"] || d.data[0])).reverse().join("/")}\n${format(d.value)}€`);
return svg.node();
}
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.
