Hi! I’m creating a treemap, but I don’t know where can I define the Colors per category.
Like I don’t need a scheme, I just want to say category A:lala, B:lala, C:lalala
Treemap(example, {
path: (d) => category(“.”, “/”),
label: (d, n) =>
[
category,
d.frequency
].join(“\n”),
group: (d) => category,
value: (d) => d.frequency,
title: (d, n) => [n.id, n.value.toLocaleString()].join(“\n”), // hover text
width: 800,
height: 250
})
I’m not sure where you’re getting your Treemap function but I think the most up to date treemap on Observable is probably this notebook, which was updated within the last week:
The notebook is set up to be easy to fork and edit to share your results. The data in that notebook is the data is the widely used Flare data set, which describes the class hierarchy for the Flare ActionScript visualization library. The root node is flare and the “categories” are the 10 children of the root node. Thus, the top of the hierarchical structure looks something like so:
A color is associated with each category using the following code:
color = {
let data = d3.stratify().path(d => d.name.replace(/\./g, "/"))(flare);
return d3.scaleOrdinal(data.children.map(d => d.id.split("/").at(-1)), d3.schemeTableau10)
}
Thus, the color is not defined via a simple object like
{
A:lala,
B:lala,
C:lalala
}
as you requested. Rather, the color is defined via a function generated by d3.scaleOrdinal. For example,
color('analytics')
should return the hex string "#4e79a7". Using a D3 scale function like this provides tools that might not be immediately apparent from this example.
Hi Mark! Thanks for your answer!
I was using the native from the cells (Treemap()), not the D3 one.
I managed to define the colors like so:
“colors: [”#48A0A6", “#5635B6”, “#244358”, “#EAAB84”]"
However, I couldn’t define each category, I did it by eye xD