Extending Observable Plot with D3 in Observable Framework

[seether9000]

Hello,

I’m working with Observable Plot (not in the notebook, but within the Observable Framework) and want to create complex plots. This includes e.g. highlighting shapes and using a split legend for charts.

However, I’ve encountered limitations with Observable Plot, so I’ve switched to D3. But is rather cumbersome to produce simple charts and I’m interested in additions.

1. Is it possible to add charts/shapes to the SVG output from e.g. Plot.lineY using D3?
2. If yes, can I access the scaling functions (like the x/y scales) used within Plot.lineY to further extend the plot with D3?

Thanks in advance for your help!

[Fil]

Yes! You can create a custom mark by specifying a function:

Plot.plot({
  marks: [
    Plot.lineY(data, {x: "x", y: "y"}),
    (_index, scales, _values, dimensions, context) => {
      console.log({ scales, dimensions, context });
      return svg`<g><text x=100 y=20>HELLO`;
    }
  ]
});

the returned element must be a SVGElement; for a scatterplot, is typically a <g> container with a <circle> for each data point.

scales contain the scales for x and y, dimensions indicates the width, height, etc. of the current frame/facet, and context gives more information about the chart, such as its owner SVG, etc.

The variables _index and _values are not used in this context, but they will be present if you create a custom render function in your mark:

Plot.plot({
  marks: [
    Plot.lineY(data, {
      x: "x",
      y: "y",
      render: (index, scales, values, dimensions, context) => {
        console.log({ index, scales, values, dimensions, context });
        return svg`<g><text x=100 y=20>HELLO`;
      }
    })
  ]
});

In that case index shows which data points are to be rendered (ie. valid data points that belong to this facet/frame). And values contains the scaled channels so you can directly plot them as you see fit. (It also contains the unscaled channels, if that's what you need.)

The documentation is still in flux, see https://github.com/observablehq/plot/pull/1811/files

[seether9000]

Hello, thank you for your response!

I'm experimenting with the custom mark using a simple SVG element created with D3, but it doesn't seem to render anything. Could you help me figure out what I'm doing wrong?

Plot.plot({
  marks: [
    Plot.lineY(data, { x: "x", y: "y" }),
    (_index, scales, _values, dimensions, context) => {
      const svg = d3.create('svg')
        .attr('width', dimensions.width)
        .attr('height', dimensions.width);
      
      svg.append('circle')
        .attr('cx', 100)
        .attr('cy', 10)
        .attr('r', 50);
      
      return svg.node();
    }
  ]
});

Additionally, I tried your second option—the custom render function. It seems to be missing a comma separator, but even after correcting that, it still doesn't display a line graph. It only displays the text

[Fil]

For the first example, here's a working version:

Plot.plot({
  marks: [
    Plot.lineY(
      [
        { x: 1, y: 2 },
        { x: 2, y: 3 },
        { x: 3, y: 0 }
      ],
      { x: "x", y: "y" }
    ),
    (_index, scales, _values, dimensions, context) => {
      const g = d3.create("svg:g");
      g.append("circle")
        .attr("cx", 100)
        .attr("cy", 50)
        .attr("r", 50)
        .attr("fill", "red");
      return g.node();
    }
  ]
})

I fixed the second example; it is supposed to log the arguments and display a text, which explains why you're only seeing a text :)

Here's a third example where I'm using the last argument "next" to have Plot generate the line chart, then I can animate it with D3:

Plot.plot({
  marks: [
    Plot.lineY(
      [
        { x: 1, y: 2 },
        { x: 2, y: 3 },
        { x: 3, y: 0 }
      ],
      {
        x: "x",
        y: "y",
        render: (index, scales, values, dimensions, context, next) => {
          console.log({ index, scales, values, dimensions, context });
          const g = next(index, scales, values, dimensions, context);
          d3.select(g)
            .attr("opacity", 0)
            .transition()
            .duration(2000)
            .attr("opacity", 1);
          return g;
        }
      }
    )
  ]
})