Hello, I am currently working on the last data visualization project: visualize data with a tree map. My progress can be found here .
I have to give my treemap cells a “fill” value based on their category(Wii, PS4 etc.)
I know I can do this manually with a lot of typing, but for my last project I wanted to do this “right” by using scale, however I keep bumping into problems.
I have tried:
const ordinalScale=d3.scaleOrdinal().domain(consoles).range(consoleColors);
"or"
const ordinalScale=d3.scale.ordinal().domain(consoles).range(consoleColors);
"and even"
const ordinalScale=d3.scaleOrdinal(d3.schemeCategory10)
I really tried googling first but all these methods some to work on other peoples code but not mine.
Any advice would be more than welcome.
My color scale function is
let getGraphScaleColor = d3.scaleOrdinal(d3.schemeCategory10);
And I call it from my rectangle/legend/tooltip fills with
return getGraphScaleColor(d.parent.data.name);
So the last line you tried should have worked (once you call it), but doesn’t on codepen. Mine is a little different as I’m not using React, but adding that line really shouldn’t cause the graph to not draw.
When I copied your code locally and ran it through npm’s ‘create-react-app’ setup and got everything installed, it was throwing several errors and warnings. After I squashed those, the color scale worked (mine from above), but the treemap was drawn twice (?).
I believe there must be something else that’s not quite right. The first thing I would try is to remove everything from the JS packages on codepen except react, react-dom, and d3. d3 itself should have all those d3 subpackages you included. If that doesn’t help, either try the codepen debug view with the console, or run it locally so that you can see the errors from node and from the browser’s console. Or maybe one of the other prototyping platforms has better error reporting than codepen.
1 Like
Thank you once again.
Removing everything from JS packages immediately worked.