Map Maker and Editor with D3.js

After building a bunch of D3 map demos, I wanted to combine them all into a Map building tool, a Map Creator based on GeoJSON or TopoJSON with many design features, editing capabilities, and proper export to SVG or PNG. It started out as an enhancement to this GeoJSON and TopoJSON Visualizer and D3 Map Starter Template. I wanted to finally use dat.GUI as a visual controller for map creation. I added some preselected maps of the world, individual countries, and even states as well as the ability to add your own map data. You can change the map projection, resize the map container, and control various design elements from colors, opacity, stroke, and even textures via Textures.js.

You also have some powerful editing capabilities: ability to remove individual objects from the map and ability to merge objects together. The best thing is that you can edit the shape of any object by clicking on it and and zooming in. This exposes small green circles on object borders that can be dragged around and the drag event changes the object shape by automatically editing the SVG path data. My previous examples on working with SVG graphics helped in adding this feature. The final image can be saved as SVG or PNG using code from the Save SVG as PNG article. Finally, I integrated SimpleModal which has a textarea where you can add points (latitude, longitude, and location name) that get added as markers on the map.
Read more

Continents and Map Projections with D3.js

If you are familiar with “slippy map” APIs like Google Maps or Leaflet, than you probably never consider map projections and stick to the default Mercator projection. But there are many other projections (transposing our 3D earth to a 2D object like a paper or computer screen) and D3 comes with a great geo projection plugin. Most D3 examples leverage Natural Earth vector data and I wanted to do the same but show continents on the map instead of countries. So, today, I will create a World Map of Continents with D3 and a map projection visualization that shows how continents change the way they look with different map projections.
Read more

Making Maps from CIA World Factbook

D3 World Map with Country Information
2013 World Population Map
2013 World Population Density Choropleth Map

The CIA world factbook is a great resource for information about various countries and territories. It can and it has been used often to create world maps for specific data points. The problem is that a lot of the data changes frequently and retrieving this content is not straightforward. The pages are not well formed and the data is not delivered in JSON or CSV formats. Instead, these great country metrics are just dumped into the content of the page and even thought the pages are nice and readable, the source is painful to scrape.
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

Leaflet and Zoom into Country via GeoJSON

I was really impressed with Leaflet and UTFgrid but I wondered how hard would it be to allow the end user to highlight countries on mouse hover and zoom into a specific country on mouse click. I did that in my D3 World Map Example by leveraging GeoJSON but Leaflet.js creates a world map using image tiles. Of course, you could load the GeoJSON code as a layer in Leaflet and then use that data to identify countries on mouse over and zoom into the bounds of that country area on click. It’s actually really simple and here is how to do it.
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