Geo Data Resources

You might have recently heard about Obama’s executive order to open government data and this made me want to dedicate a post that aggregates various sources for geographical data. The US Government’s Data.gov website currently has over 200,000 datasets and I am impressed at the available formats and filtering capabilities. There are over 400 data sets on next.data.gov. The health data community has over 800 data sets and the U.S. Census Bureau has a really large collection of maps and data available to explore.

Adding to this, we have the CIA World Factbook which has a lot of relevant country information but not in an open standards format. My last post highlighted how you could use CasperJS to scrape and transform that data into CSV or JSON files. But, let’s explore non-government data sets and geo resources:
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

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

Exploring MapBox Tile Maps and Data

MapBox is amazing. I love looking around at all their tile maps, examples, and browsing through various geographical data visualizations. I also like how their solutions works, their API, and other things like TileMill and Wax, so this post is going to explore some interesting vector tiles from MapBox and various interesting maps.

Let’s start with a quick demo I put together that explores various MapBox tiles. All of them show New Your City but you can zoom out to explore how these tiles and maps look on a world level. If you open up the console and look at the network tab, you can see a JSON file being retrieved for each of these tile sets. The comic looking map (examples.bc17bb2a), for example, loads the following JSON file. It gives you some information about the tile set like the URLs for tiles that you could use to load these tiles in other slippy maps like LeafLet or OpenLayers.
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

Reverse Geocoding on ModestMaps

I have previously shown how to do reverse geocoding with MaxMind and now I want to show how to leverage a geocoding web service to visualize locations on a map. I have already done a ModestMaps with API calls and markers example in the past so I can leverage that to create this demo. Instead of using Google Maps Geocoding, I am going to use GeoNames Web Services and render the results on a ModestMap for comparison with MapBox image tiles.
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