block by cmgiven 4cfa1a95f9b952622280a90138842b79

Map to Force-Directed Graph

Full Screen

Block-a-Day #1. A map transitions into an interactive force-directed graph (and back).

Data Sources: OpenFlights

What I Learned: I went down a few rabbit holes here; for a while, I was planning to use forces to draw each node to its lat/lon. This felt clunky (and I didn’t have a good way to toggle forces on and off, although it occurs to me now that I could swap out two discrete simulations…). In the end, I settled on the current approach of replacing the simulation with a basic transition.

What I’d Do With More Time: Great arcs? Also this would be more visually interesting with color, even if that was only used to encode the region of each airport.

Block-a-Day

Just what it sounds like. For fifteen days, I will make a D3.js v4 block every single day. Rules:

  1. Ideas over implementation. Do something novel, don’t sweat the details.
  2. No more than two hours can be spent on coding (give or take).
  3. Every. Single. Day.

index.html