Skip to content

Instantly share code, notes, and snippets.

@timelyportfolio timelyportfolio/index.html
Last active Aug 29, 2015

Embed
What would you like to do?
work on @ramnathv datamaps plugin
<!DOCTYPE html>
<meta name="description" content="Datamaps Hexbin Plugin" />
<meta charset="utf-8">
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/d3.hexbin.v0.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<!-- I recommend you host this file on your own, since this will change without warning -->
<script src="http://datamaps.github.io/scripts/datamaps.usa.js?v=1"></script>
<p>Datamaps Hexbin Plugin</p>
<p><a href="http://datamaps.github.io/">DataMaps Project Homepage</a></p>
<div id="container1" style="position: relative; width: 80%; height: 80%;"></div>
<script>
var map = new Datamap({
scope: 'usa',
element: document.getElementById('container1'),
geographyConfig: {
"popupOnHover": false,
"highlightOnHover": false
}
});
map.addPlugin("hexbin", function(layer, data, options){
var self = this;
var hexbin = d3.hexbin()
.radius(5)
.x(function(d) {
return self.latLngToXY(+d.latitude, +d.longitude)[0];
})
.y(function(d) {
return self.latLngToXY(+d.latitude, +d.longitude)[1];
});
var className = "hexbin";
var hexbins = layer
.selectAll(className)
.data(hexbin(data), JSON.stringify);
var radius = d3.scale.sqrt()
.domain([0, 12])
.range([0, 10]);
hexbins.enter()
.append("path")
.attr("class", "hexagon")
.attr("d", function(d){
return hexbin.hexagon(radius(d.length))
})
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
})
.style("fill", "green")
.attr('data-info', function(d) {
return JSON.stringify(d);
})
.on('mouseover', function ( datum ) {
var $this = d3.select(this)
//use the same options from the bubbles plugin
var bubblesOptions = self.options.bubblesConfig;
debugger;
if (bubblesOptions.highlightOnHover) {
//save all previous attributes for mouseout
var previousAttributes = {
'fill': $this.style('fill'),
'stroke': $this.style('stroke'),
'stroke-width': $this.style('stroke-width'),
'fill-opacity': $this.style('fill-opacity')
};
$this
.style('fill', bubblesOptions.highlightFillColor)
.style('stroke', bubblesOptions.highlightBorderColor)
.style('stroke-width', bubblesOptions.highlightBorderWidth)
.style('fill-opacity', bubblesOptions.highlightFillOpacity)
.attr('data-previousAttributes', JSON.stringify(previousAttributes));
}
if (bubblesOptions.popupOnHover) {
debugger;
//was using updatePopup from datamaps prototype
//but position not working
//I think this is because the hexbins use transform/translate for positioning
//self.updatePopup($this, datum, self.options.hexbinOptions, self.svg);
//note: still doesn't work when in an iframe though
var element = $this;
var options = self.options.hexbinOptions;
var position = $this[0][0].getBoundingClientRect();
var svgposition = self.svg[0][0].getBoundingClientRect();
element.on('mousemove', null);
element.on('mousemove', function() {
d3.select(self.svg[0][0].parentNode).select('.datamaps-hoverover')
.style('top', ( ( position.top - svgposition.top + 30)) + "px")
.html(function() {
var data = JSON.parse(element.attr('data-info'));
//if ( !data ) return '';
return options.popupTemplate(datum, data);
})
.style('left', ( position.left - svgposition.left) + "px");
});
d3.select(self.svg[0][0].parentNode).select('.datamaps-hoverover').style('display', 'block');
}
})
.on('mouseout', function ( datum ) {
var $this = d3.select(this);
var bubblesOptions = self.options.bubblesConfig;
if (bubblesOptions.highlightOnHover) {
//reapply previous attributes
var previousAttributes = JSON.parse( $this.attr('data-previousAttributes') );
for ( var attr in previousAttributes ) {
$this.style(attr, previousAttributes[attr]);
}
}
d3.selectAll('.datamaps-hoverover').style('display', 'none');
})
.transition()
.duration(400);
})
d3.json('http://rawgithub.com/creaktive/cartodb20/master/spec/support/data/walmart.json', function(data){
map.hexbin(data.slice(1, 624), {
popupTemplate: function(geo, data) {
debugger;
return '<div class="hoverinfo">' + data[0].strcity + ', ' + data[0].strstate + ': ' + data.length + ' stores' + '</div>'
}
})
})
</script>
</body>
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.