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
| <!DOCTYPE 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://rawgithub.com/markmarkoh/datamaps/master/dist/datamaps.usa.min.js"></script> | |
| <div id="container1" style="width: 700px; height: 405px; position: relative;"></div> | |
| <script src="/src/js/components/d3/d3.min.js"></script> | |
| <script src="/src/js/components/topojson/topojson.js"></script> | |
| <!-- <script src="/src/js/json2.js"></script> --> | |
| <script src="/src/rel/datamaps.usa.js"></script> | |
| <script> | |
| var election = new Datamap({ | |
| scope: 'usa', | |
| element: document.getElementById('container1'), | |
| geographyConfig: { | |
| popupOnHover: false, | |
| highlightOnHover: false, | |
| borderColor: '#444', | |
| borderWidth: 0.5 | |
| }, | |
| fills: { | |
| 'Visited': '#306596', | |
| 'neato': '#0fa0fa', | |
| 'Trouble': '#bada55', | |
| defaultFill: '#dddddd' | |
| } | |
| }); | |
| election.bubbles([ | |
| {centered: 'NY', fillKey: 'Trouble', radius: 10}, | |
| {centered: 'KY', fillKey: 'neato', radius: 5}, | |
| {centered: 'TX', fillKey: 'neato', radius: 15}, | |
| {centered: 'CA', fillKey: 'Trouble', radius: 46}, | |
| {centered: 'WA', fillKey: 'neato', radius: 2}, | |
| {centered: 'MA', fillKey: 'Trouble', radius: 10}, | |
| {centered: 'FL', fillKey: 'neato', radius: 30}, | |
| {centered: 'NC', fillKey: 'neato', radius: 30}, | |
| {centered: 'GA', fillKey: 'Visited', radius: 5}, | |
| {centered: 'WY', fillKey: 'neato', radius: 5}, | |
| {centered: 'ME', fillKey: 'neato', radius: 5}, | |
| {centered: 'VT', fillKey: 'Visited', radius: 5}, | |
| {centered: 'NH', fillKey: 'neato', radius: 5}, | |
| {centered: 'CT', fillKey: 'Visited', radius: 5}, | |
| {centered: 'HI', fillKey: 'neato', radius: 5}, | |
| {centered: 'AK', fillKey: 'neato', radius: 15}, | |
| {centered: 'SC', fillKey: 'Visited', radius: 5}, | |
| {centered: 'MI', fillKey: 'Trouble', radius: 20}, | |
| {centered: 'AL', fillKey: 'neato', radius: 20}, | |
| {centered: 'LA', fillKey: 'Visited', radius: 20}, | |
| {centered: 'OK', fillKey: 'Trouble', radius: 20}, | |
| {centered: 'NE', fillKey: 'neato', radius: 20}, | |
| {centered: 'KS', fillKey: 'neato', radius: 10}, | |
| {centered: 'NM', fillKey: 'Visited', radius: 20}, | |
| {centered: 'AZ', fillKey: 'neato', radius: 20}, | |
| {centered: 'CO', fillKey: 'neato', radius: 20}, | |
| {centered: 'OR', fillKey: 'Trouble', radius: 10}, | |
| {centered: 'ND', fillKey: 'neato', radius: 10}, | |
| {centered: 'SD', fillKey: 'neato', radius: 10}, | |
| {centered: 'OH', fillKey: 'neato', radius: 10}, | |
| {centered: 'IA', fillKey: 'Visited', radius: 10}, | |
| {centered: 'IN', fillKey: 'Visited', radius: 10}, | |
| {centered: 'PA', fillKey: 'neato', radius: 10}, | |
| {centered: 'NJ', fillKey: 'neato', radius: 10}, | |
| {centered: 'ID', fillKey: 'neato', radius: 10}, | |
| {centered: 'MO', fillKey: 'neato', radius: 2}, | |
| {centered: 'WI', fillKey: 'Visited', radius: 10}, | |
| ], { | |
| popupTemplate: function(geography, data) { | |
| return '<div class="hoverinfo">Some data about ' + data.centered + '</div>' | |
| } | |
| }); | |
| election.legend({ | |
| labels: { | |
| 'neato': 'Blue Bubbles', | |
| 'Visited': 'Some More Blue', | |
| 'Trouble': 'Some Green' | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |