Web Datavis researcher by day, Indie Game designer by night
height = 800
forest_padding = 24
data = {
function walk(n) {
let o = {
name: n.label
}
if(n.children) {
o.children = n.children.map(d => walk(d))
}
else {
o.value = n.population
}
return o
}
return walk(tree)
}
forest_stats = forest.map(tree => ({
count: tree.children.length
}))
mutable selection_a = null
mutable selection_b = null
hierarchy = d => d3.hierarchy(d)
.sum(d => d.value)
.sort((a, b) => b.value - a.value)
forest = {
let trees = [ubertree]
d3.range(ubertree.height-1).forEach(level => {
let prev = trees[trees.length-1]
let current = hierarchy({
name: '',
children: [].concat(...prev.data.children.map(c => c.children ? c.children : []))
})
current.value = ubertree.value // all treemaps have the same scale
trees.push(current)
})
return trees
}
treemap = tree => d3.treemap()
.tile(d3.treemapSquarify)
.size([width-1, height/forest.length-forest_padding-1])
.paddingInner(1)
.paddingBottom(d => d.depth == 0 && tree != forest[forest.length-1] ? 12 : 0)
.round(true)
(tree)
treemap_nodes = forest.map(d => treemap(d).descendants())
format = d3.format(",d")
d3 = require("d3@5")
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.
