d3 sketches & examples

I have myriad examples, explorations, sketches, and teaching tools posted on bl.ocks. Some are more complete than others. The ones below are a few of my favorites. 

 

Exploring Voronoi

In the Weather Lines project, I used Voronoi polygons to help users select thin lines by selecting the line closest to where they clicks, as shown below. While creating that, I got curious to better understand how Voronoi polygons were defined mathematically. So, I created a tool for Exploring Voronoi based on the mathematics behind the Voronoi polygons to explore the relationship between the points, the bisecting lines that form triangles, and the relevant circles. 

Weather Lines visualization

Weather Lines visualization

Hidden voronoi polygons made visible in red, which manage mouse hover detection to highlight the closest point/line 

Hidden voronoi polygons made visible in red, which manage mouse hover detection to highlight the closest point/line 

 

adding waves

Inspired by an exhibit at San Francisco's Exploratorium, I created an online example of adding two waves. In particular, I liked that in the original exhibit the higher wave was physical bars so it made the vertical addition more clear. Most drawn examples of adding waves shows the waves as areas, so it's less intuitive that there is a vertical addition taking place. 

 

D3 Bingo

For the 2015 D3 unconf, I created a little D3 Bingo board which could be easily forked and personalized on blockbuilder.