Projects

Building Hamiltonian Graphs from LCF Notation


Updated November 14th, 2012

  • Uses Ember.js to handle UI events, the graph model, and fragment URLs
  • Improved performance to handle much larger graphs (draws a total of 50,000 vertices and edges before warning about performance)
  • Numbers in the LCF code are modifiable using arrow keys
  • Added random LCF code generation
  • Added freeze frame
  • Added gallery of graphs
  • Updated Bootstrap to handle larger graphs and support full screen display
  • Added vertex and edge count

I found this Wolfram MathWorld article on LCF notation after researching bilinear interpolation. The article inspired me to build a LCF notation parser that would create the graphs using d3.js. Originally, I only planned on displaying the circular graph without animation.  Adding the graph construction animation was definitely a wow milestone, but, after I enabled the forces on the links, it turned into a woah moment. The 3D structure of the graph actually reveals itself without having to build in any 3D calculations. This was a really fun project to build and it’s still exciting to watch it build a torus.

The The On-Line Encyclopedia of Integer Sequences is a good place to look for number series that result in interesting graphs.

Image of February 5th, 2012 Version

Chicago Ward Remap Outlines

The wards in Chicago were recently remapped and I was mesmerized by the idea of creating an interaction that would animate the transition from the old to the new wards. I shortly found out that tweening polygons in a non-intersecting and interlocked fashion is a complicated topic. I’ve done a lot of reading about the math and research that has been done in this space and found a few interesting theories which I would like to implement in a future version. Currently, the morphing/tweening/interpolation is done with an array interpolator. Unfortunately, this technique causes the intermediate polygons to self-intersect and morph inefficiently. Ideally, I would overlay these polygons on a slippy map and there would be no gaps between the polygons during the morphing.

Overall, I am happy with the way this prototype came out and how it highlights the need for more robust polygon morphing. I am excited to see what the map transition will look like when a more fluid animation is implemented.

Page 1 of 3123