Published
Edited
Nov 30, 2020
1 star
md`# Learn tree mapping visualization
This notebook record learning how to visualize a tree map based on the Java dataset
`
original = d3.csv(link, row=>{
row.size = +row.size;
return row;
})
processed = original.map(function(row){
let parent = row.name.substring(0, row.name.lastIndexOf("."));
return {
name: row.name,
parent: nodes.has(parent) || row.name === "java" ? parent: "java",
size: row.size
};
})
root = d3.stratify()
.id(row => row.name)
.parentId(row => row.parent)(processed)
java11 = {
root.count()
root.each(node => {
node.data.leaves = node.value;
})
root.sum(row => row.size)
root.each(node => {
node.data.total = node.value;
})
return root
}
names = root.children.map(d => d.data.name)
newRoot = java11.children[0].children[0]
modules = {
let names = newRoot.children.map(d => d.data.name);
// add root node as well
names.unshift(newRoot.data.name);
return names;
}
dendrogram = {
let data = findModule();
data.sort((a, b) => {
return b.height - a.height || b.count - a.count;
})
let layout = d3.tree().size([width - 2*pad, height - 2*pad])
layout(data)
let svg = d3.select(DOM.svg(width, height))
.style("width", width)
.style("height", height)
let plot = svg.append("g")
.attr("id", "plot")
.attr("transform", translate(pad, pad));
drawLinks(plot.append("g"), data.links(), straightLine);
drawNodes(plot.append("g"), data.descendants(), true);
return svg.node();
}
nodeLink = {
let data = findModule();
data.sort((a, b) => {
return b.height - a.height || b.count - a.count;
})
let layout = d3.tree().size([width - 2*pad, height - 2*pad]);
layout(data);
let svg = d3.select(DOM.svg(width, height))
.style('width', width)
.style('height', height)
let plot = svg.append('g')
.attr('id', 'plot')
.attr('transform', translate(pad, pad));
drawLinks(plot.append('g'), data.links(), curveLine);
drawNodes(plot.append('g'), data.descendants(), true);
return svg.node()
}
cirtree = {
let data = findModule();
data.sort((a,b) => {
return b.height - a.height || b.count - a.count;
});
let layout = d3.tree().size([2 * Math.PI, (diameter / 2) - pad]);
layout(data);
let svg = d3.select(DOM.svg(width, height))
.style('width', width)
.style('height', height)
let plot = svg.append('g')
.attr('id', 'plot')
.attr('transform', translate(pad, pad));
drawLinks(plot.append('g'), data.links(), curveLine);
drawNodesRadial(plot.append('g'), data.descendants(), true);
return svg.node()
}
function drawNodes(g, nodes, raise){
let circles = g.selectAll('circle')
.data(nodes)
.enter()
.append('circle')
.attr('r', d => d.r ? d.r : r)
// .attr('transform', d=>`
// rotate(${d.x * 180 / Math.PI - 90})
// translate(${d.y},0)
// `)
.attr('cx', d => d.x)
.attr('cy', d => d.y)
.attr('id', d => d.data.name)
.attr('class', 'node')
.style('fill', d=>color(d.depth));
}
function drawNodesRadial(g, nodes, raise){
let circles = g.selectAll('circle')
.data(nodes)
.enter()
.append('circle')
.attr('r', d => d.r ? d.r : r)
.attr('transform', d=>`
rotate(${d.x * 180 / Math.PI - 90})
translate(${d.y},0)
`)
// .attr('cx', d => d.x)
// .attr('cy', d => d.y)
.attr('id', d => d.data.name)
.attr('class', 'node')
.style('fill', d=>color(d.depth));
}
function drawLinks(g, links, generator){
let paths = g.selectAll('path')
.data(links)
.enter()
.append('path')
.attr('d', generator)
.attr('class', 'link');
}
straightLine = {
let line = d3.line()
.curve(d3.curveLinear)
.x(d => d.x)
.y(d => d.y)
let generator = function(node){
return line([node.source, node.target]);
}
return generator;
}
curveLine = {
let generator = d3.linkVertical()
.x(d => d.x)
.y(d => d.y);
return generator
}
radialLine = {
let generator = d3.linkRadial()
.angle(d => d.theta + Math.PI / 2)
.radius(d => d.radial);
return generator
}
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.
