This is a d3.js visualization of US zip codes.
Original zip code dataset from Geocommons.
5MB shapefile with properties such as zipcode, state, name, population, area, more.
http://geocommons.com/overlays/54893 (Thank you Bill Greer)
This converts it nicely:
This example uses custom map data that includes counties in the state of New York.
Custom map data is specified with geographyConfig.dataUrl, which will attempt to make d3.json request to that URL.
In this example, counties are referred to by their FIPs code.
The data was converted from a .SHP file to TopoJSON, instructions to do that here
Example 'draw this chart' workflow
| /** | |
| * @jsx React.DOM | |
| */ | |
| import React from 'react'; | |
| var ImagePlaceholder = { | |
| imgLoadError: function() { | |
| this.getDOMNode().querySelector('img').src = '/img/no-image.jpg'; | |
| } | |
| }; |
This example illustrates how to use the findPeaks API. You can download the library from https://github.com/efekarakus/d3-peaks.
The algorithm is based on "Improved peak detection in mass spectrum by incorporating continuous wavelet transform-based pattern matching" by Pan Du, Warren A. Kibbe and Simon M. Lin. The paper can be found here.
datamaps is also delivered as a jQuery/Zepto plugin, as shown in this example (in addition to a Backbone view).
datamaps will add datamap to an existing version of jQuery if it's on the page. Otherwise, if there is no jQuery/Zepto, it will add a global copy of Zepto for you to use.
Add a container div to the page and select with jQuery/Zepto and call the datamap function. Pass customization options to datamap.
This example shows a custom popup function (any JS templating language that compiles to a function like _.templates and handlebars).
The custom template has two model objects
| var paths = [ | |
| { | |
| "origin":{"latitude":42.350939,"longitude":-71.05229}, | |
| "destination":{"latitude":35.466872,"longitude":139.622747}, | |
| "options": {"strokeWidth": 2, "strokeColor": "rgba(0,0,255,0.33)"} | |
| }, | |
| { | |
| "origin":{"latitude":42.350939,"longitude":-71.05229}, | |
| "destination":{"latitude":39.908617,"longitude":19.581969}, | |
| "options": {"strokeWidth": 1, "strokeColor": "rgba(0,0,255,0.33)"} |
| //slow on a large enough collection ( > ~50 ) | |
| var self = this; | |
| collectionData.each(function(model) { | |
| self.$el.append( model.get("name") ); | |
| }); | |
| //to make it fast again, you can create an element in memory and operate on that | |
| var $inMemoryjQueryElement = $("<div/>"); | |
| collectionData.each(function(model) { | |
| $inMemoryjQueryElement.append( model.get("name") ); |
| <!doctype HTML> | |
| <meta charset = 'utf-8'> | |
| <html> | |
| <head> | |
| <script src='http://d3js.org/d3.v3.min.js' type='text/javascript'></script> | |
| <script src='http://d3js.org/topojson.v1.min.js' type='text/javascript'></script> | |
| <script src='http://datamaps.github.io/scripts/datamaps.all.min.js' type='text/javascript'></script> | |
| <style> |
| # read data and replace dots in names with underscores | |
| obesity = read.csv( | |
| 'http://www.stat.berkeley.edu/classes/s133/data/obesity.csv', | |
| stringsAsFactors = F | |
| ) | |
| names(obesity) = gsub("\\.", "_", names(obesity)) | |
| # add column with two letter state names and | |
| obesity = plyr::mutate(obesity, | |
| State = str_trim(State), |