Results for tag: maps
Guess the Country Game
After creating my last D3 game, I wanted to follow up with a similar concept but focus more on country names and zooming animation. It’s basically a recreation of Mike Bostock’s World Tour but in a game format with some extra features, like zooming into a country, keeping score, and providing hints. Most of the code has been re-implemented from my other D3 demos and I have added capitals data directly into the TopoJSON. Let’s look at the code.
Drag and Drop SVG Geography Game
I wanted to write a game for a while, so today I decided to create a geography game with D3.js. The idea is to let the player drag and drop territories into their appropriate place on the world map. The map is rendered using the Robinson projection and only the top 100 territories are chosen according to land area. These 100 “countries” are shuffled on each refresh and upon a successful drop, the land changes color to green. If the player makes a mistake, a hint is provided: all the countries that border the selected country. The player has one more try to drag the land into the right place or the land turns red, animates on its own to the right place, and the next territory is loaded. The goal is to get a perfect score and learn where every country is located on a map. Let’s look at the code.
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.
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:
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.
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:
- TopoJSON with Country Colors and Names
- Responsive with Zoom and Pan Limits
- Minimal CSS and Simple Tooltips
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.
I was doing some API work with time zones recently and was surprised not to find a D3 time zone map implementation. I decided to look into it some more and could not even find a good geoJSON time zone file. After some more browsing, I did fine and 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.
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.
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.