| var election = new Datamap({ | |
| scope: 'world', | |
| element: document.getElementById('arcs'), | |
| projection: 'mercator' | |
| }); | |
| var presidentialTrips = [ | |
| { | |
| origin: { |
| <!DOCTYPE html> | |
| <html lang="en-us"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>SVG</title> | |
| </head> | |
| <body> | |
| <h1>SVG</h1> | |
| <svg width=500 height=500> | |
| <circle r=200 cx=250 cy=250 stroke=#fa0fa0 stroke-width=20 fill=#bada55></circle> |
| window.console = window.console || {log: function(m) {}, info: function(m) {}}; |
datamaps can show plots ("bubbles"), as specified by a list of objects with properties like latitude, longitude, radius and fillKey(if you want to color code the plots).
Extra properties will be passed to the popup template and plot-click/plot-mouseover/plot-mouseout events.
Data source: Milestone nuclear explosions
This example shows how to create a choropleth map using datamaps.
The data object's keys should be the "id" of the geographical feature. For US states, it's the state initials ('AL' for Alabama, 'NY' for New York).
Each value of the data object should include a fillData key which corresponds to keys in the fills object of the map configuration.
All data passed in via data is passed into the popupTemplate function and all corresponding events.
Events emitted:
| <!doctype html> | |
| <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--> | |
| <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]--> | |
| <!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]--> | |
| <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]--> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| <title></title> | |
| <meta name="description" content=""> |
| modules: [{ | |
| name: "foo/bar/bop", | |
| override: { | |
| pragmas: { | |
| out: "bop-build.js" | |
| } | |
| } | |
| }, { | |
| name: "other", | |
| override: { |
| // $.fn.live misuse | |
| (function() { | |
| // cache all elements that match this selector *as they exist on the page right now* | |
| // let's say this is empty at this point in time | |
| var $posts = $(".posts"); | |
| // set up a click listener. this is totally valid with $.fn.live, | |
| // any new ".posts" that get added to the DOM will automatically respond to this |
| /* | |
| Equality operators: ===, !== vs. ==, != | |
| The second set are the 'evil twins'. They attempt to coerce values, | |
| but do a real crap job of it. | |
| Evidence: | |
| */ | |
| '' == 0 // true |
| /* Director's routes config | |
| routes that have segments that start with colons, | |
| like /lists/:listType, will pass in the variable to | |
| the callback. | |
| */ | |
| var routes = { | |
| '/app': function() { | |
| ; |