Countries and Capitals with D3 and Natural Earth

Countries and Capitals D3 Demo

Can you recognize the country and capital in the picture above? If you have been playing around with Natural Earth vector and raster map data, which is a great free geographical resource, chances are this large area of the earth will not be clearly defined. To be fair, the name of this self-declared de facto sovereign state is included in Natural Earth data, but when we convert the shapefiles to GeoJSON or TopoJSON, that name is rarely included. It could be included, but it makes sense to leverage some standards when doing a mapping between names and areas, and the unrecognized state of this country results in no corresponding ISO code. As a result, most D3.js geo examples will have this area undefined or will show a -99 identification.

Considering the size of this land, I think that we might need a new standard on how we do mappings. There are actually 16 places in the Natural Earth Database that are missing ISO 3166 codes. Most of them are tiny, or unknown, but Somaliland and a place like Kosovo should have some code. There are also some inconsistencies the other way, like these 4 lands that do have ISO 3166 codes but are missing from Natural Earth:
Read more

Responsive D3 Map with Zoom and Pan Limits

D3 Geo Boilerplate: Responsive, Zoom Limits, TopoJson, and Tooltips

Here is the updated version, the new D3 World Map Template.

Over the last few weeks, I have been building a lot of D3 demos based on all kinds of world map data visualizations. D3 can be used to visualize any kind of data but I am mostly focusing on geographic information about the whole world. So, I create a world map using GeoJSON or TopoJSON, add zoom functionality, tooltips for each country, and repeat this whole process with every demo. As a result, I wanted to create a starting point, a boilerplate, that I could use for the next project which prompted this post. Here are the highlights:

1. TopoJSON with Country Colors and Names
2. Responsive with Zoom and Pan Limits
3. Minimal CSS and Simple Tooltips

Read more

D3 GeoJson and TopoJson Renderer

Online GeoJSON and TopoJSON renderer

Recently, GitHub announced that it supports automatic rendering of GeoJSON files that you upload and store on GitHub repositories. They use Leaflet.js and I think it is an awesome feature as GitHub stores many GeoJSON files. Thirteen days later they added support for TopoJSON and it inspired me to create my own online automatic renderer of geographic files. Why? Simply because there are many times when I don’t feel like committing files to GitHub. Also, I want to use D3 to render the file with a simple drag and drop and do all the processing on the client side with HTML5.
Read more

Time Zone World Map with D3 and TopoJson

I was doing some API work with time zones recently and was surprised not to find a D3 time zone map implementation. After some browsing, I did find a OpenLayers and Gmaps time zone map implementation but it does not use GeoJSON. I found a KML file of time zones here and decided to quickly put together a D3.js time zone world map using TopoJSON.
Read more

D3 Globe with Canvas, WebGL, and Three.js

D3.js comes with a lot of geographical projections and there are many cool demos that let you explore different ways of visualizing a map of our earth. I really like the orthographic projection as it gives you a perspective (or azimuthal) projection where earth is a sphere or globe as it appears from outer space. D3 already has some great examples of this projection, and I have also made my own basic D3 Globe with very little code. But today, I want to expand on this concept and try to incorporate an image of the earth into the globe projection to create a more realistic view of earth. First, I will attempt to make this happen with just HTML5 Canvas and then I will explore other technologies like WebGL and Three.js to make the globe more responsive.
Read more

D3 Maps with Image Tiles

After creating some D3 maps, I wanted to investigate how to make these maps look better. I could definitely improve the presentation of the map element, use better colors for different countries, and make other minor changes but leveraging image tiles with D3.js would be cool. However, using an external tile server, loading a lot more resources, and paying performance costs are important considerations. So, today, I am going to explore different options for integrating map tiles with D3 and GeoJSON.
Read more

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.
Read more

Drawing MBTA Commuter Rail Map using their CSV and D3

After checking out the MBTA Developers Page and recently playing with D3.js, I wanted to draw the commuter rail stations and connections on a real map using Geo location data from MBTA feeds. Their Commuter Rail data page has a CSV file which lists all the stations per line with Geo coordinates, stop sequence, and much more. This is great and I can use my previous D3 example to draw lines in between all the stations, but when I started working on this, I have encountered some challenges.
Read more

Traceroute on a Map using Pingdom API, MaxMind, and D3

Today, I was looking at the traceroute module for NodeJS and was thinking about combining the results of a traceroute with a geolocation service that translates the IP addresses into Geo coordinates that can be placed on a world map built with D3. MaxMind Geolocation database seemed like a good idea and I was trying to figure out how to do that on Redis for nodeJS. Then I stumbled on GeoIP which seems to make it easier to use MaxMind with Node. Actually, Philip Tellis created geoip-lite which is a native NodeJS API for the GeoLite data from MaxMind. MapTail, for example, uses geoip-lite to display visitors on a realtime map.

But, I do not have a public server with NodeJS and when I noticed that Pingdom tools has a traceroute method in their API, I decided to implement this project in PHP, using curl to retrieve traceroute information from the Pingdom API, converting IP to location using MaxMind on MySQL, and placing the geo coordinates on a D3.js map. Let’s get started.
Read more

Image to SVG to GeoJSON Converters

Often times, you find the data that you need in a format that you don’t want. Perhaps, you are looking for GeoJSON but the data is in a ShapeFile, or you need an SVG format but you can only find a bitmap image. Maybe you need to convert an SVG to JSON, or CSV to TSV, or something else. Either way, converters are really useful to convert the same data to a format that integrates with your application and I wanted to start a collection of different kinds of great data converters that I have found online. Recently, I have even wrote my own converter and some of that work has inspired this post.
Read more