Composing Visualizations (d3)

Community Help
1

I was wondering if anyone had some guidance or thoughts on how to approach composing visualizations together. Right now I’m working with some SVG based d3 visualizations, and was hoping to find a sensible way to “export” individual visualizations from their own notebooks, and combine them together in a new cell in a new notebook.

For example, I’d love to take something like the angle cell from here https://beta.observablehq.com/@digitaltopo/angle and combine it with another visualization, like a unit circle, or a Cartesian grid https://beta.observablehq.com/@digitaltopo/cartesian-grid.

Here’s the approach I’ve tried so far:

Using these two “visualization components”:

Composed: https://beta.observablehq.com/@digitaltopo/composed-viz

The approach is basically:

  1. In the individual components, check to see if there is a canvas passed in. If not, then we’ll create and draw to a new canvas, so that the component can be used in a stand-alone way.
  2. In the composedViz create a canvas and pass it to the individual components.

Note: Yes the grid and angles aren’t scaled together properly in the examples, but hopefully you get the idea of what we’re trying to do.

I’d probably also leverage viewof for the individual components so we can read values out of them as well.

In the composed visualization, I wasn’t expecting the standAloneAnge and the angle in composedViz to be linked… how is this happening anyway? Is the DOM.svg shared across cells?

Wondering what others thoughts’ are on this. Thank you!

2

This is entirely off topic, but if Mike or Jeremy or anyone happens to glance by here and might know what’s going on, I notice that your angle drawing animates very smoothly in Firefox but in a very “jittery” way in Safari (version 11.0.3) – the angle seems to blink back and forth between older and newer values as the mouse moves.

Are the mousemove events firing out of order or something?

If I log the coordinates in the console I get 3-5 lines where the source of the log is listed as d3.min.js:2:8203, followed by a line where the source is worker.6cd90…86.js:2:36038, where the two types toggle between two different values (I speculate one of the two types is a bit delayed?). In Firefox all of the lines in the console have worker.6cd90…86.js as the source.

Interestingly, jashkenas’s version at https://beta.observablehq.com/@jashkenas/angle-forked-for-the-forums doesn’t seem to have this blinky issue (and when I log coordinates, none of the logs are sourced to the worker in Safari, but they all still are in Firefox). However, in that version (in Safari; and both versions in Firefox) the drawing of the angle lags considerably behind the mouse cursor.