Hierarchical data / 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

4 forks

3 stars

2020-21 MVTEC Dataviz programming course

groupedDatawithArray= d3.groups(desiredData, d => d.department, d => d.chapter);

hierarchycount = d3.hierarchy(groupedData);

rollupHierarchy = d3.hierarchy(rollupData);

rollupHierarchywithvalue = d3.hierarchy(rollupData).sum(d=> d[1]);

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;

});

//console.log("x0: "+x0+", x1: "+x1);

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

//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 viceversa.

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

.text(d => d.data.data[0] || d.data.data["article"] || "Generalitat")

.clone(true).lower()

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

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

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

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 = {

//TODO

}

treemap = data => 0; //TODO

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