Results for tag: data
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
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
Read more
Final Demo: US Ski Resorts on PolyMaps
PolyMaps is a free JavaScript library for making dynamic maps using tiled vector data in spherical mercator projection. In other words you get a full-fledged slippy maps (image tiles, pan, zoom, etc) library that works with SVG. This is very similar to my geo example with D3, but D3 is more of a visualization library with geographical capabilities while PolyMaps is more focused on just mapping. PolyMaps has nice documentation and examples, and it was a breeze to create a simple map.
Now, lets add some data. I have mentioned GeoCommons before, but I wanted to show how easy it is to find and visualize some interesting data sets from GeoCommons. You could just upload some data to GeoCommons and let them create a map for you but we are going to browse the website for uploaded geo data and make our own map. PolyMaps uses GeoJSON and GeoCommons allows you to transform their data sets into various formats so lets get started.
Read more
Here is an update with over 2000 D3js examples.
One of the best things that I like about D3 is the ridiculous amount of awesome demos available online and last night I have stumbled on an excel sheet with 1,134 examples of data visualizations with D3. If you are just starting out with D3 you will appreciate the well organized API docs and really great tutorials and cheat sheets but there is nothing like seeing a demo with code. There are many D3 examples online but I have not seen such a big list published anywhere so I am dropping it below, with thumbnail images of each D3 demo on link mouseover. Here are 1,134 D3 examples:
Read more
Histograms are a great way of visualizing the distribution of data. I use them a lot at work but today I was searching for a histogram generator and did not come up quickly with meaningful results. I did find histogram generators like this but I needed something better. I am pretty familiar with jqPlot so I decided to write my own histogram generator, something a little better than this jsfiddle histogram example.
Read more
