Mirror Neuron #1: D3 Scatterplot

Trying to cook something with D3

Going off of the D3 Livestream with Ian and Anjana. Very lovely walkthrough for making a scatterplot using D3 in Observable. Followed along and got a nice result. Also a good chance to try to embed a code cell from an Observable Notebook into a webpage. I’ve done some D3 stuff in the past, but am still learning to cook. Up to basic knife skills…

Penguin Scatterplot

Notebook on Observable

  • Embedding chart cell


  • I had to reconfigure the SVG creation to get the embedded code to display something (otherwise it just was showing what was hardcoded, like the one seagreen circle).
  • I’m not sure how to get the color legend to work in this situation
  • Observable is fantastic for power users, but can be slightly intimidating, or at least require a change of perspective. Reordering cells is fantastic, but can be difficult to parse how something was done after the fact. After some practice, should be more intuitive (wore a path to follow).

Image Credit

Machete by Zach Bogart from the Noun Project

Zach Bogart
Zach Bogart
Data Explorer

Science, Design, & Data. I’ll know it when I see it.