Data Visualization Projects - Visualize Data with a Treemap Diagram

Tell us what’s happening:

the wii sports tile is not displayed, but does show up in the console.log(root.leaves())

Your code so far

const map = d3
.treemap()
.size([w-padding.left-padding.right, h-padding.top-220])
.paddingInner(1);

d3.json(url)
.then(json => generateMap(json))
.catch(e => console.error(${e.name}: ${e.message}));

const generateMap = (ds) => {

const categories = ds.children.map(({ name }) => name);
const oScale = d3.scaleOrdinal(categories, colors);

const root = d3
.hierarchy(ds)
.sum(d => d.value)
.sort((a, b) => b.height - a.height || b.value - a.value);

map(root);
console.log(root.leaves())
const cell = svg
.selectAll(‘g’)
.data(root.leaves())
.enter()
.append(‘g’)
.classed(‘tile’, true)
.attr(‘transform’, d => translate(${padding.left + d.x0},${padding.top + d.y0}))
.append(‘rect’)
.attr(‘width’, d => d.x1 - d.x0)
.attr(‘height’, d => d.y1 - d.y0)
.attr(‘fill’, d => oScale(d.data.category))
.attr(‘data-name’, d => d.data.name)
.attr(‘data-category’, d => d.data.category)
.attr(‘data-value’, d => d.data.value)

Your browser information:

full project: https://codepen.io/vhiv94/pen/XWQZdKm

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36 OPR/107.0.0.0

aha! the legend code (which I omitted from the post because I didn’t realize I had this problem in a previous project) was messing with the treemap code. I gave the legend it’s own

in the svg container
, and all is well!

hah, ‘<‘div’>’ creates a return line in posts

then, I realized the real problem was selectAll(‘g’). so I demoted the legend to a group again and added it back to the main container, and changed all selectAll statements in my code to select the class attributed below them and in stead of the type appended. Now, the code is truly scalable without changing the index file.

.selectAll(‘.legend-item’)
.data(categories)
.enter()
.append(‘rect’)
.classed(‘legend-item’, true)

instead of

.selectAll(‘rect’)
.data(categories)
.enter()
.append(‘rect’)