Observable Plot heat map: how to create tooltip?

Community Help
1

I understand we can use “title”:

Plot.plot({
  color: {
    type: "quantile",
    n: 9,
    scheme: "blues"
  },
  marks: [
    Plot.geo(school_districts, {
      fill: (d) => {
        return ...
      },
      title: (d) => {
        return ...
      }
    })
  ]
})

But to create true tooltip? I tried the “tip” property but it doesn’t seem to be working correctly. Is there a way to use the “tip” property, or should I create custom code for this? Thanks!

Also, why does this code generate a chart that still has the X and Y axis? Should I explicitly turn off the axes? Couldn’t Plot recognize that this is a map?

...
x: { axis: null },
y: { axis: null }
2

To add tooltips on geojson shapes, you need to specify x and y, the position where the tooltips are anchored. Usually the simplest way to do that is to apply the centroid transform. See Centroid transform | Observable Plot

Re: your second question, the geo mark does not in itself indicate that we’re making “a map”; it could be some contours on a usual x/y grid. But you can specify a projection.

1 Like
3

Thank you @Fil

If I don’t specify a projection, what’s the default projection being used? I didn’t find that information in the doc.

4

There is no default projection. If you don’t specify one, the system works in the x, y coordinate system (defined by the x and y scales).

But since Plot.geo does not inform these scales, your chart is currently underspecified. You can set x and y manually, or add other marks (Plot.dot, etc) that have that effect.

1 Like