Math to D3


Last night I presented a talk entitledd “Math to D3” at the Bay Area’s D3 meetup in Oakland. It started with my story of my own journey from analyst to D3 developer, and advice based on what I learned along the way. Then I focussed on how to get from a sketch, to equations, to D3 code for 5 different examples. My main goal was to share the magic of drawing with data via D3, and share how to translate data into visual attributes using equations. I wanted to empower people to feel that they could create their own custom works - to go beyond adapting existing examples.

Many introductions to D3 focus on the enter/exit/update framework including the functions selectAll, data, append, etc. I decided to compliment this by focusing on writing the equations (functions) used to actually transform the data into values to define the visual attributes of the SVG elements. The focus was be on the very central part of defining attributes, rather than on the rest of the design (legend, axis, etc).

The audience had a wide range of experience with D3, from people who had never used it before to people who “dream in D3.”

The video is on YouTube here and the deck is here.

Note that there was one thing that came up regarding Voronoi polygons and Delaunay triangulation where I wasn’t sure of the answer. I sorted it out, and will describe it in the next post :).