Plot: Conditionally color ticks/axis text?

Community Help
1

I’m looking for options to change color of Tick Mark & Tick Text (Tick Mark / Observable Plot / Observable / Observable) based on conditions in tickformat. Is there option to realize this?

I could not find answers in github, talk and stackoverflow.

1 Like
2

There is no baked-in solution in Plot, but you can modify the svg with d3:

2 Likes
3

Selection via the new aria-label - awesome!!

4

I’ve added a second example which uses only css.

5

Works perfectly. :+1:
Thanks a lot.

6

You can also render the ticks yourself using a tick and a text mark (and some manual positioning):

untitled (7)
untitled (7)1280×120 18 KB 

Plot.plot({
  x: { domain: [0, 1], ticks: [] },
  marks: [
    Plot.dotX(Array.from({ length: 100 }, Math.random)),
    Plot.tickX(d3.ticks(0, 1, 10), { stroke: x => x, dy: 6, insetTop: 23 }),
    Plot.textX(d3.ticks(0, 1, 10), { fill: x => x, dy: 16, text: x => x.toFixed(1), frameAnchor: "bottom" })
  ]
})
3 Likes