Hierarchical data - Daily solution / antonbardera

Assistant professor in the Universitat de Girona. In Fundació Visualització per a la Transparència (ViT). In Master’s Degree in Visual Tools to Empower Citizens.

Workspace

Published

2020-21 MVTEC Dataviz programming course

Edited

Nov 12, 2020

Fork of Hierarchical data

•

1 fork

2020-21 MVTEC Dataviz programming course

TidyTreechart = {

const root = tree(hierarchy);

let x0 = Infinity;

let x1 = -x0;

root.each(d => {

if (d.x > x1) x1 = d.x;

if (d.x < x0) x0 = d.x;

});

const svg = d3.create("svg")

.attr("viewBox", [0, 0, width, x1 - x0 + root.dx * 2]);

const g = svg.append("g")

.attr("font-family", "sans-serif")

.attr("font-size", 10)

.attr("transform", `translate(${root.dy / 3},${root.dx - x0})`);

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()

.x(d => d.y)

.y(d => d.x));

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);

node.append("text")

.attr("dy", "0.31em")

.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 => d.data.data[0] || d.data.data["article"] || "Generalitat")

.clone(true).lower()

.attr("stroke", "white");

return svg.node();

}

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);

const svg = d3.create("svg")

.attr("viewBox", [0, 0, width, height])

.style("font", "10px sans-serif")

.attr("text-anchor", "middle");

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);

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 + 1},${d.y + 1})`);

node.append("circle")

.attr("r", d => d.r)

.attr("fill", d => color(d.height))

.call(addTooltip);

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();

}

treemapChart = {

const root = treemap(hierarchy);

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] || d.data["article"]).join("/")}\n${format(d.value)}€`);

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["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();

}

treemap = data => d3.treemap()

.tile(d3.treemapSquarify)

.size([width, height])

.padding(1)

.round(true)

(hierarchy)

treemapcolor = d3.scaleOrdinal(d3.schemeCategory10)

height = 700;

width = 700;

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.

Learn more