Skip to content

Instantly share code, notes, and snippets.

@markmarkoh markmarkoh/README.md
Last active Aug 29, 2015

Embed
What would you like to do?
State Centered Bubbles

Center Bubbles in each state

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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.