| <!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> |
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
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
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=""> |
| var countries_data = {"type":"FeatureCollection","features":[ | |
| {"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[74.92,37.24],[74.57,37.03],[72.56,36.82],[71.24,36.13],[71.65,35.42],[71.08,34.06],[69.91,34.04],[70.33,33.33],[69.51,33.03],[69.33,31.94],[66.72,31.21],[66.26,29.85],[62.48,29.41],[60.87,29.86],[61.85,31.02],[60.84,31.5],[60.58,33.07],[60.94,33.52],[60.51,34.14],[61.28,35.61],[62.72,35.25],[63.12,35.86],[64.5,36.28],[64.8,37.12],[66.54,37.37],[67.78,37.19],[69.32,37.12],[70.97,38.47],[71.59,37.9],[71.68,36.68],[73.31,37.46],[74.92,37.24]]]]},"properties":{"name":"Afghanistan"},"id":"AF"}, | |
| {"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[19.44,41.02],[19.37,41.85],[19.65,42.62],[20.07,42.56],[20.59,41.88],[20.82,40.91],[20.98,40.86],[20.01,39.69],[19.29,40.42],[19.44,41.02]]]]},"properties":{"name":"Albania"},"id":"AL"}, | |
| {"type":"Feature","geometry":{"type":"MultiPolygon","coordinates":[[[[2.96,36.8],[8.62,36.94],[8.18,36.52],[8.25,34.64],[7.49,33.89],[9.06,3 |
| (function(window) { | |
| var data, | |
| xy = d3 | |
| .geo | |
| .equirectangular() | |
| .scale($('#map_container').width()) | |
| .translate([$('#map_container').width() / 2, $('#map_container').height() / 2]), | |
| path = d3 | |
| .geo | |
| .path() |
| 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 |