Text size on a TreeMap

New To Observable
1

Hi! I’m using a treemap directly from the insert cell options. It says it’s a nested hierarchy with D3.

The boxes are too big for the text, so I want these labels to be larger.

I’ve used the following queries, but nothing works:

  • style: {fontSize: “16px”}
  • size: 12
  • font-size: “16px”
  • labelSize: 12

Does someone know what can I do? :face_holding_back_tears:

Example:
Treemap(flare, {
path: (d) => d.name.replaceAll(“.”, “/”), // e.g. flare/animate/Easing
label: (d) => d.name.split(“.”).pop(), // display text
group: (d) => d.name.split(“.”)[1], // for color; e.g. animate
value: (d) => d?.size, // area of each rect
title: (d, n) => [n.id, n.value.toLocaleString()].join(“\n”), // hover text
width,
height: 500
})

2

Hi @andie0215 ! I apologize that it’s taken so long to get back to you on this.

The TreeMap code that you get when inserting from the ‘add cell’ menu works by importing code from Treemap, CSV / D3 | Observable . The code in this original notebook is written in such a way that you can point it at a different dataset (that is structured in a similar way to the original ‘flare’ dataset), and it will ‘just work’. However some parameters are hard-coded in the original. To change them, you would need to take a different approach, such as forking the original notebook and changing parameters the the complete code. This is the section there that controls font size:
(within the ‘TreeMap’ function):

const svg = d3.create("svg")
      .attr("viewBox", [-marginLeft, -marginTop, width, height])
      .attr("width", width)
      .attr("height", height)
      .attr("style", "max-width: 100%; height: auto; height: intrinsic;")
      .attr("font-family", "sans-serif")
      .attr("font-size", 10);
1 Like
3

You can also apply the font size directly on the Treemap SVG:

d3.select(
  Treemap(flare, {
    path: (d) => d.name.replaceAll(".", "/"), // e.g. flare/animate/Easing
    label: (d) => d.name.split(".").pop(), // display text
    group: (d) => d.name.split(".")[1], // for color; e.g. animate
    value: (d) => d?.size, // area of each rect
    title: (d, n) => [n.id, n.value.toLocaleString()].join("\n"), // hover text
    width,
    height: 500
  })
).attr("font-size", 14).node()
2 Likes
4

Thank you so much for your answer!! I think it will be very useful when tunning other parameters.

5

THANK YOU SO MUCH @mootari!!!
Can this .attr().node() be set on other attributes?

6

Yes, any attribute on the SVG element itself. If you want to modify child elements you would probably have to temporarily assign the top-level SVG element to a variable and query / modify child elements before returning the SVG (or use selection.each).

You can learn more about d3.select here: