Visualization can transform the reach of open data and revolutionize transparency and accountability.
CatalanBudget[8000]
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);
groupedDatawithArray= d3.groups(desiredData, d => d.department, d => d.program);
groupedData = d3.group(desiredData, d => d.department, d => d.program);
hierarchycount = d3.hierarchy(groupedData);
hierarchy = d3.hierarchy(groupedData).sum(d => d.amount);
rollupData = d3.rollup(
desiredData,
v => d3.sum(v, d => d.amount),
d => d.department,
d => d.program
)
rollupHierarchy = d3.hierarchy(rollupData);
rollupHierarchywithvalue = d3.hierarchy(rollupData).sum(d=> d[1]);
TidyTreechart = {
//Create the tree data structure
const root = tree(rollupHierarchy);
//Since it's in arbitrary units, we need to find the limits of x1 and x0
let x0 = Infinity;
let x1 = -x0;
root.each(d => {
if (d.x > x1) x1 = d.x;
if (d.x < x0) x0 = d.x;
});
console.log("x0: "+x0+", x1: "+x1);
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, x1 -x0 + root.dx * 2]);//Set the viewBox as the coordinates we have
const g = svg.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.attr("transform", `translate(${root.dy / 3},${root.dx - x0})`);
//By default, trees are assumed from top to bottom. Since we want from left to right, we use x from the tree for y in the chart and vice versa.
//We also translate based on x0 to start at position 0
//create the links
const link = g.append("g")
.attr("fill", "none")
.attr("stroke", "#555")
.attr("stroke-opacity", 0.4)
.attr("stroke-width", 1.5)
.selectAll("path")
.data(root.links())
.join("path")
.attr("d", d3.linkHorizontal() //Shorthand for d3.link with d3.curveBumpX
.x(d => d.y)
.y(d => d.x));
//create the nodes
const node = g.append("g")
.attr("stroke-linejoin", "round")
.attr("stroke-width", 3)
.selectAll("g")
.data(root.descendants())
.join("g")
.attr("transform", d => `translate(${d.y},${d.x})`);
node.append("circle")
.attr("fill", d => d.children ? "#555" : "#999")
.attr("r", 2.5);
//create the node labels
node.append("text")
.attr("dy", "0.3em")
.attr("x", d => d.children ? -6 : 6)
.attr("text-anchor", d => d.children ? "end" : "start")
.attr("font-size", d => d.children ? "0.8em" : "0.6em")
// .text(d => {console.log(d); return d.data.data[0] || "Generalitat";})
.text(d => d.data.data[0] || d.data.data["program"] || "Generalitat")
.clone(true).lower()
.attr("stroke", "white");
// return 0;
return svg.node();
}
rootexample = tree(hierarchy);
tree = data => {
const root = d3.hierarchy(data);
root.dx = 10;
root.dy = width / (root.height + 1);
return d3.tree().nodeSize([root.dx, root.dy])(root);
}
circlePackingChart = {
const root = pack(hierarchy).sort((a, b) => b.value - a.value);
//console.log(root)
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("font", "10px sans-serif")
.attr("text-anchor", "middle");
//create the shadow effect
const shadow = DOM.uid("shadow");
svg.append("filter")
.attr("id", shadow.id)
.append("feDropShadow")
.attr("flood-opacity", 0.3)
.attr("dx", 0)
.attr("dy", 1);
//create the nodes (circles + shadow in the hierarchical mode)
const node = svg.selectAll("g")
.data(d3.group(root.descendants(), d => d.height))
.join("g")
.attr("filter", shadow)
.selectAll("g")
.data(d => d[1])
.join("g")
.attr("transform", d => `translate(${d.x},${d.y})`)
node.append("circle")
.attr("r", d => d.r) //radius computed by the D3 pack module
.attr("fill", d => color(d.height)) //color based on the node depth
.call(addTooltip); //Add a tooltip for each circle
const leaf = node.filter(d => !d.children);
leaf.select("circle")
.attr("id", d => (d.leafUid = DOM.uid("leaf")).id);
leaf.append("clipPath")
.attr("id", d => (d.clipUid = DOM.uid("clip")).id)
.append("use")
.attr("xlink:href", d => d.leafUid.href);
return svg.node();
}
root = pack(hierarchy).sort((a, b) => b.value - a.value);
pack(hierarchy);
height = 500;
width = 500;
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.
