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'},
]
| /** | |
| * @jsx React.DOM | |
| */ | |
| import React from 'react'; | |
| var ImagePlaceholder = { | |
| imgLoadError: function() { | |
| this.getDOMNode().querySelector('img').src = '/img/no-image.jpg'; | |
| } | |
| }; |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>Realtime Traffic Mapper</title> | |
| <link rel="stylesheet" href="http://www.maxux.net/devs/maptraffic/style.css" media="all" type="text/css" /> | |
| <style> | |
| html, body, #map { | |
| height: 100%; |
Since the custom map data requires a AJAX request, all of the map plugins need to be instantiated in the done callback provided by Datamaps.
http://datamaps.markmarkoh.com/using-custom-map-data-w-datamaps/
The Voronoi tessellation shows the closest point on the plane for a given set of points. This example updates the Voronoi diagram in response to mouse interaction! Colors by Cynthia Brewer; algorithm by Steven Fortune; implementation based on work by Nicolas Garcia Belmonte; interaction inspired by Raymond Hill.
| <!DOCTYPE html> | |
| <html> | |
| <meta charset="utf-8"> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://d3js.org/topojson.v1.min.js"></script> | |
| <script src="http://datamaps.github.io/scripts/datamaps.none.min.js"></script> | |
| <div id="container" style="position: relative; width: 500px; height: 300px;"></div> | |
| <script> |
Instead of passing a distinct latitude/longitude with each bubble, you can optionally pass a centered property which should be the ISO ID ( 2 character for US states (like NY), 3 character for Countries (like USA) ). The bubbles will appeared in the centermost point of each geography.
More DataMaps here
| <script id='popup-template' type='text/x-handlebars-template'> | |
| {{{ popup_template }}} | |
| </script> | |
| <script> | |
| var chartParams = {{{ chartParams }}} | |
| chartParams.element = document.getElementById('{{chartId}}') | |
| {{# popup_template }} | |
| var tmplFn = Handlebars.compile( | |
| document.getElementById("popup-template").innerHTML.replace(/\"#!(.*?)!#\"/g, "\\$1") |
| ### Keybase proof | |
| I hereby claim: | |
| * I am markmarkoh on github. | |
| * I am markmarkoh (https://keybase.io/markmarkoh) on keybase. | |
| * I have a public key whose fingerprint is 3E98 C273 2434 4AB1 832C DD4C 7875 6107 8850 09AE | |
| To claim this, I am signing this object: |