This example shows how to use the d3.hexbin plugin for hexagonal binning. 2,000 random points with a normal distribution are binned into hexagons; color encodes the number of points that fall into each bin. You can also use area encoding. Inspired by earlier work by Zachary Forest Johnson.
-
-
Save jmcbee/32ad80b565dd98e23c8ab6f734496bc2 to your computer and use it in GitHub Desktop.
Hexagonal Binning
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: gpl-3.0 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| !function(){d3.hexbin=function(){function u(n){var r={};return n.forEach(function(n,t){var a=s.call(u,n,t)/o,e=Math.round(a),c=h.call(u,n,t)/i-(1&e?.5:0),f=Math.round(c),l=a-e;if(3*Math.abs(l)>1){var v=c-f,g=f+(f>c?-1:1)/2,m=e+(e>a?-1:1),M=c-g,d=a-m;v*v+l*l>M*M+d*d&&(f=g+(1&e?1:-1)/2,e=m)}var j=f+"-"+e,p=r[j];p?p.push(n):(p=r[j]=[n],p.i=f,p.j=e,p.x=(f+(1&e?.5:0))*i,p.y=e*o)}),d3.values(r)}function a(r){var t=0,u=0;return n.map(function(n){var a=Math.sin(n)*r,e=-Math.cos(n)*r,i=a-t,o=e-u;return t=a,u=e,[i,o]})}var e,i,o,c=1,f=1,h=r,s=t;return u.x=function(n){return arguments.length?(h=n,u):h},u.y=function(n){return arguments.length?(s=n,u):s},u.hexagon=function(n){return arguments.length<1&&(n=e),"m"+a(n).join("l")+"z"},u.centers=function(){for(var n=[],r=0,t=!1,u=0;f+e>r;r+=o,t=!t,++u)for(var a=t?i/2:0,h=0;c+i/2>a;a+=i,++h){var s=[a,r];s.i=h,s.j=u,n.push(s)}return n},u.mesh=function(){var n=a(e).slice(0,4).join("l");return u.centers().map(function(r){return"M"+r+"m"+n}).join("")},u.size=function(n){return arguments.length?(c=+n[0],f=+n[1],u):[c,f]},u.radius=function(n){return arguments.length?(e=+n,i=2*e*Math.sin(Math.PI/3),o=1.5*e,u):e},u.radius(1)};var n=d3.range(0,2*Math.PI,Math.PI/3),r=function(n){return n[0]},t=function(n){return n[1]}}(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| .axis text { | |
| font: 10px sans-serif; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| .hexagon { | |
| fill: none; | |
| stroke: #000; | |
| stroke-width: .5px; | |
| } | |
| </style> | |
| <body> | |
| <script src="https://d3js.org/d3.v3.min.js"></script> | |
| <script src="d3.hexbin.min.js"></script> | |
| <script> | |
| var margin = {top: 20, right: 20, bottom: 30, left: 40}, | |
| width = 960 - margin.left - margin.right, | |
| height = 500 - margin.top - margin.bottom; | |
| var randomX = d3.random.normal(width / 2, 80), | |
| randomY = d3.random.normal(height / 2, 80), | |
| points = d3.range(2000).map(function() { return [randomX(), randomY()]; }); | |
| var color = d3.scale.linear() | |
| .domain([0, 20]) | |
| .range(["white", "steelblue"]) | |
| .interpolate(d3.interpolateLab); | |
| const RADIUS = 20 | |
| var hexbin = d3.hexbin() | |
| .size([width, height]) | |
| .radius(RADIUS); | |
| var x = d3.scale.identity() | |
| .domain([0, width]); | |
| var y = d3.scale.linear() | |
| .domain([0, height]) | |
| .range([height, 0]); | |
| var xAxis = d3.svg.axis() | |
| .scale(x) | |
| .orient("bottom") | |
| .tickSize(6, -height); | |
| var yAxis = d3.svg.axis() | |
| .scale(y) | |
| .orient("left") | |
| .tickSize(6, -width); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width + margin.left + margin.right) | |
| .attr("height", height + margin.top + margin.bottom) | |
| .append("g") | |
| .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
| svg.append("clipPath") | |
| .attr("id", "clip") | |
| .append("rect") | |
| .attr("class", "mesh") | |
| .attr("width", width) | |
| .attr("height", height); | |
| svg.append("g") | |
| .attr("clip-path", "url(#clip)") | |
| .selectAll(".hexagon") | |
| .data(hexbin(points)) | |
| .enter().append("path") | |
| .attr("class", "hexagon") | |
| .attr("d", hexbin.hexagon()) | |
| .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }) | |
| .style("fill", function(d) { return color(d.length); }) | |
| .on('click', function(d) { | |
| console.log(d.x, d.y) | |
| console.log(JSON.stringify({right: [d.x + (RADIUS*2), d.y]})) | |
| }) | |
| svg.append("g") | |
| .attr("class", "y axis") | |
| .call(yAxis); | |
| svg.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(xAxis); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment