Data, Maps, Usability, and Performance
It has been a while since I released the D3 Map Starter Kit and a lot has changed. The 4.0 version of D3 is modular, decentralized, and split into small libraries that you can use independently. It has changed some of the APIs so I have updated the World Map Template to work with D3 version 4, but how do we build a map with just the D3.js micro-libraries?
Read more
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
I have seen a lot of cool D3 maps of US states, counties, and even zipcodes but what about cities or towns? I don’t mean plotting geo coordinates of a particular city but actually drawing the city or town boundary on the map. A population choropleth is a good use case for this but I have only seen one example of Vermont that shows town specific information. The initial problem is where do we even get the specific town boundary geospatial data?
Read more
I have taken another look at my responsive D3 map and had some time today to fix a few issues and make some enhancements. Normally, I would have updated my last post with the changes, but I wanted to take some time to explain the individual upgrades. Previously, I really focused on creating a world map with D3 that can not only be responsive in terms of screen size but also make that responsiveness work with zoom and pan limits. I added country names and colors to the geo data and included a simple tooltip feature for each country. Now, I am expanding on that with many enhancements, cross-browser fixes, and more simplified code.
Check out the new D3 World Map Template
Here is the updated D3.js v4 World Map Template
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
Here is an update to the 1000 D3 examples compilation and in addition to many more d3 examples, the list is now sorted alphabetically. Most of the D3 examples in this list come from this excel list but I also added some updates and my examples to push the list over 2K. Examples are really helpful when doing any kind of development so I am hoping that this big list of D3 examples will be a valuable resource. Bookmark and share with others. Here is the huge list of D3 demos:
Read more
Histograms are really powerful means of visualizing the distribution of data. I have previously created a histogram generator with jQplot, and today I wanted to do something similar with D3.js. My motivation for this came from finding D3 histogram functions and I wanted to see how they work. I also wanted to allow the user to specify the size of the graph, the data, labels for x and y axis, and the amount of bins.
Read more
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.
Read more
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.
Read more
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