#Colour Density Hexbin Dots are placed randomly, then they are grouped by the raster. The tile colour is determined by the dot density. Raster is a hexbin.
Based off this: Hexagonal Binning
#Colour Density Hexbin Dots are placed randomly, then they are grouped by the raster. The tile colour is determined by the dot density. Raster is a hexbin.
Based off this: Hexagonal Binning
!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> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>Colour Density Hexbin</title> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script> | |
<script src="d3.hexbin.min.js"></script> | |
</head> | |
<body> | |
<div id="chartArea"></div> | |
<script src="js.js"></script> | |
</body> | |
<style> | |
.hexagon { | |
fill: none; | |
stroke: #000; | |
stroke-width: .5px; | |
} | |
</style> | |
</html> |
var height = 500; | |
var width = 960; | |
var randomX = d3.random.normal(width / 2, 120); | |
var randomY = d3.random.normal(height / 2, 120); | |
var points = d3.range(1000).map(function() { return [randomX(), randomY()]; }); | |
var color = d3.scale.linear() | |
.domain([0, 20]) | |
.range(["white", "#6EA241"]) | |
.interpolate(d3.interpolateLab); | |
var hexbin = d3.hexbin() | |
.size([width, height]) | |
.radius(30); | |
var svg = d3.select("body").append("svg") | |
.attr("width", width) | |
.attr("height", height) | |
svg.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); }) | |
.each(function(d) { | |
svg.append('text') | |
.attr("x", d.x - 4*d.length.toString().length) | |
.attr("y", d.y) | |
.text(d.length); | |
}) | |
//Drawing original points | |
svg.selectAll('circle') | |
.data(points) | |
.enter().append('circle') | |
.attr("cx", function(d) {return d[0]; }) | |
.attr("cy", function(d) {return d[1]; }) | |
.style('r', 2) | |
.style('fill', 'maroon') | |
.style('border-radius', 1) | |
.style('stroke', 'orange') |