chart = treemap
zoom = d3.zoom()
.translateExtent([[ 0, 0 ],[ width, height ]])
.scaleExtent([ 1, 20 ])
.on('zoom', (d,i) => {
d3.select( chart )
.select('.treemap-container')
.attr('transform', d3.event.transform)
revealText()
})
d3.select( chart )
.select('g.treemap-container')
.call( zoom )
revealText = () => {
const leaf = d3.select(treemap).selectAll('g.leaf')
leaf.each((d, i, arr) => {
// The current leaf element
const current = arr[i]
const left = d.x0,
right = d.x1,
// calculate its width from the data
width = (right - left) * d3.event.transform.k,
top = d.y0,
bottom = d.y1,
// calculate its height from the data
height = (d.y1 - d.y0) * d3.event.transform.k
// Check if it's too small for text
const tooSmall = width < 34 || height < 25
d3.select( current ).select('text')
.attr('opacity', tooSmall ? 0 : 0.9)
})
}
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.
