a d3.hexbin() example with no axes for xaranke
this example modifies the block Hexagonal Binning by
removing the axes
removing the stroke from the hexagon paths
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.
| !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]}}(); |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| .hexagon { | |
| fill: none; | |
| stroke: #000; | |
| stroke-width: .5px; | |
| } | |
| </style> | |
| <body> | |
| <script src="//d3js.org/d3.v3.min.js"></script> | |
| <script src="d3.hexbin.min.js"></script> | |
| <script> | |
| var margin = {top: 0, right: 0, bottom: 0, left: 0}, | |
| 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 hexbin = d3.hexbin() | |
| .size([width, height]) | |
| .radius(20); | |
| // the result of the hexbin layout | |
| var hexbinData = hexbin(points); | |
| console.log('hexbinData', hexbinData); | |
| var color = d3.scale.linear() | |
| .domain([0, d3.max(hexbinData, function(d) { | |
| return d.length; | |
| })]) | |
| .range(["white", "steelblue"]) | |
| .interpolate(d3.interpolateLab); | |
| var x = d3.scale.identity() | |
| .domain([0, width]); | |
| var y = d3.scale.linear() | |
| .domain([0, height]) | |
| .range([height, 0]); | |
| 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(hexbinData) | |
| .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) | |
| }) | |
| .style("stroke", "none"); | |
| </script> |
