Example 'draw this chart' workflow


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. (Thank you Bill Greer)

This converts it nicely:


This example illustrates how to use the findPeaks API. You can download the library from

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.

View convertExample.js
var isoCodeConverterData = {"BD": "BGD", "BE": "BEL", "BF": "BFA", "BG": "BGR", "BA": "BIH", "BB": "BRB", "WF": "WLF", "BL": "BLM", "BM": "BMU", "BN": "BRN", "BO": "BOL", "BH": "BHR", "BI": "BDI", "BJ": "BEN", "BT": "BTN", "JM": "JAM", "BV": "BVT", "BW": "BWA", "WS": "WSM", "BQ": "BES", "BR": "BRA", "BS": "BHS", "JE": "JEY", "BY": "BLR", "BZ": "BLZ", "RU": "RUS", "RW": "RWA", "RS": "SRB", "TL": "TLS", "RE": "REU", "TM": "TKM", "TJ": "TJK", "RO": "ROU", "TK": "TKL", "GW": "GNB", "GU": "GUM", "GT": "GTM", "GS": "SGS", "GR": "GRC", "GQ": "GNQ", "GP": "GLP", "JP": "JPN", "GY": "GUY", "GG": "GGY", "GF": "GUF", "GE": "GEO", "GD": "GRD", "GB": "GBR", "GA": "GAB", "SV": "SLV", "GN": "GIN", "GM": "GMB", "GL": "GRL", "GI": "GIB", "GH": "GHA", "OM": "OMN", "TN": "TUN", "JO": "JOR", "HR": "HRV", "HT": "HTI", "HU": "HUN", "HK": "HKG", "HN": "HND", "HM": "HMD", "VE": "VEN", "PR": "PRI", "PS": "PSE", "PW": "PLW", "PT": "PRT", "SJ": "SJM", "PY": "PRY", "IQ": "IRQ", "PA": "PAN", "PF": "PYF",
View topojson.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

Graticule && Orthographic Projections

In the latest datamaps (v0.3.4), you can specify orthographic as your projection to show a map in a more 'globe' like fashion.

Additionally you can specify the rotation through projectionConfiguration, which is a new configuration block that I'll be building out for more control over projections.


Seeing that the bubbles json call returns something like:

       {name: 'Hot', latitude: 21.32, longitude: 5.32, radius: 10, fillKey: 'gt50'},
       {name: 'Chilly', latitude: -25.32, longitude: 120.32, radius: 18, fillKey: 'lt50'},
       {name: 'Hot again', latitude: 21.32, longitude: -84.32, radius: 8, fillKey: 'gt50'},
View partials.jsx
* @jsx React.DOM
import React from 'react';
var ImagePlaceholder = {
imgLoadError: function() {
this.getDOMNode().querySelector('img').src = '/img/no-image.jpg';
View index.html
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<title>Realtime Traffic Mapper</title>
<link rel="stylesheet" href="" media="all" type="text/css" />
html, body, #map {
height: 100%;