Map Direct Flights with D3

Final Demo: Direct Flights World Map

Update:

Many countries do not have direct flights. Recently, there has been a lot of talk about Edward Snowden not having a direct flight from Russia to Venezuela. I have updated the routes map to capture the fastest flights in between countries where a direct flight does not exist and for such two countries, the result shows all possible flights with one connection. Here are the possible flights for Edward Snowden from Russia to Venezuela.

Direct Flights with Connections

I like to travel and the problem I have with Kayak, Momondo, and other travel search solutions is that they want me to give them a specific source location and destination location. They do have a radius search but my trips don’t really have specific locations, I want to know all my options and all I care about is price. Usually, I am interested in exploring some country, I intent on seeing various cities in that country and don’t really care which city I fly into or fly out of. I also don’t really want to be limited to a radius in the origin city, it’s not a big deal to drive from Los Angeles to San Diego or Boston to New York if it results in a cheaper direct flight.

What I really want is more information about airlines and their routes. I want to see all the direct flights in between countries, inside a country, and from specific airports. I don’t know why this thing does not exist but when I build my OpenLayers demo, I realized that OpenFlights has airline routes information. So, today I am going to use that data file to create an interactive world map in D3 and let you select two countries which will show you all the direct flights between those 2 countries. You can also click on an airport and get all direct flights from that airport. Clicking on a single country will give you all direct flights from that country to the world and clicking twice on a country will give you all the direct flights within a country.

I have written previously about D3 World Maps so it was really easy to setup a simple world map in D3. I finally figured out how to properly limit zoom, so here is our simple world map in D3js with zoom functionality and limit. If you look at the source, line 87 has the scaleExtent function that limits the map redraw on zoom. After the map is loaded, I added d3.csv function to load all the routes and 3 filter functions that will be used to parse the flight routes between countries, airports, and the world. Once you pull all the correct connections, they get passed to a process function that draws the airport points and flight arcs with additional tooltips and click events for the airports.

I also wanted to add a table which gives you a different way to explore the data. The table has airline, origin, and source information and you can sort the table using this sorttable script. Here is the D3 demo of visualizing direct flight connections between countries and airports. The final point, and maybe the biggest and most unfortunate, is that I expect some inaccuracy in the flight data. Also, the names of countries are created using a tsv file that corresponds to the GeoJSON data that draws the countries but might not completely correspond to the countries in the flights data. I would love to optimize this over time, so please report any bugs in the comments.

External:

Simple D3js Map Explained
D3 for Mere Mortals
D3 Zoom Behavior
D3 Tutorial
Render Queue
US Airports with TopoJSON
Flights Stream