Visualizing Flights Origins and Departures with d3.js

05 April 2015

This was built for a class project in my Information Visualization class.

My goals were pretty straightforward. I wanted to try a multidimensional dataset - with a lot of different connections.I wanted a nice way of exploring it that was relatively simple - clicking to filter, allowing for visual exploration. I would optimally would have liked to include a visualization like this one but I couldn't figure out how to do that without just copying and pasting the code. It took me a really long time to figure out the whole join thing, especially with a key function but I got it eventually as you can see in the renderText function.

I tried my best to write all my code by hand, I did virtually no copying and pasting except for the fade function that is in the Chord Tutorial reference below - it's fairly straightforward regardless.

This was my favorite assignment, I wish we would have had more time to use d3.

The visualization contains data about the flights that happened in June 1994. Clicking on one of the edge nodes (the groups) will change the visualization to only include that airport and any flights that go in and out of that airport. Hovering over it will show you what you might expect.

Scroll through this list to select airports that you want to explore! Hovering over one of the edges of the diagram will highlight which airport you are hovering over. Clicking it with focus in on just that airport. Airports are listed in order clockwise from 12:00.

References:

June 1994 Flight Data