Hexagons

by nancynancy

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-hexbin.v0.2.min.js"></script>
<pre id="data">
A,B
5.43,3.35
4.71,1.57
5.17,2.41
3.65,3.99
6.16,4.5
5.98,5.91
3.79,3.4
5.05,1.9
5.12,2.13
5.46,3.51
6.88,5.6
4.19,3.51
5.92,4.14
5.34,3.77
5.64,2.83
4.72,4.23
4.31,5.21
5.56,4.38
5.63,4.26
6.88,4.28
5.94,2.91
4.73,2.38
3.57,4.9
4.52,1.88
5.14,2.46
4.55,3.63
5.51,2.14
4.87,2.95
5.09,2.22
3.97,3.82
6.71,3.55
5.73,3.82
5.43,4.54
3.81,4.76
5.56,3.74
3.98,1.23
4.61,3.35
5.82,3.71
3.95,3.72
3.35,2.21
6.77,3
2.12,1.23
4.97,4.26
6.02,4.78
4.47,4.59
5.24,1.78
5.54,4.25
5.64,4.35
5.78,3.87
4.76,2.73
7.92,2.11
7.2,2.53
5.96,3.81
4.1,1.87
6.66,3.03
5.43,4.09
5.31,3.88
4.98,3.76
5.28,1.2
5.36,2.42
4.38,2.07
6.86,3.58
8.42,1.03
5.18,3.71
6.66,3.21
7.53,3.36
5.53,3.51
5.35,2.58
7.78,3.13
3.59,3.15
5.26,3.05
4.66,3.84
7.7,2.79
5.91,3.47
5.88,2.31
9.78,4.58
6.75,2.8
6.26,3.85
6.3,2.8
4.13,2.32
5.99,3.18
5.4,0.82
6.27,3.18
5.02,3.09
4.38,0.3
5.31,3.77
5.93,0.93
7.6,2.96
7.18,2.55
5.34,1.81
5.14,2.59
5.77,4.37
5.87,1.96
5.1,2.86
5.89,3.04
4.95,1.82
4.85,1.16
7.4,0.91
4.55,3.05
6,2.77
6.24,5.15
4.84,3.27
7.69,3.85
6.47,4.23
7.9,2.5
7.72,3.51
4.57,3.37
7.58,4.27
5.51,3.26
6.36,4.02
7.01,2.33
6.07,3.43
6.73,3.5
5.58,3.13
5.15,3.22
4.38,3
6.85,2.92
8.46,4.49
6.41,2.77
7.48,1.37
7.29,2.91
6.94,1.48
6.74,1.83
6.47,2.56
6.6,1.5
7.97,1.51
5.62,3.9
6.09,2.42
4.62,0.95
6.42,2.89
7.53,4.12
7.19,4.46
6.36,3.24
5.83,3.98
6.71,1.83
8.87,3.73
5.48,2.81
6.09,3.1
7.44,5.21
4.7,4.07
6.38,3.87
8.96,1.99
7.99,1.91
6.96,5.48
5.84,2.21
6.87,3.21
5.65,3.39
7.95,4.02
5.39,4.49
6.27,2.84
</pre>

CSS

.axis text {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: none;
  shape-rendering: crispEdges;
}
.tick line {
  stroke: black;
}

.hexagon {
  fill: none;
  stroke: white;
  stroke-width: 1.5px;
}

pre {
  display:none;
  }

JavaScript

/* The goal is to show how hexbins work by juxtaposing two figures:
One a scatterplot of diverse sparsity, and the corresponding 
hexbins scaled by concentration of points.*/

var margin = {top: 20, right: 20, bottom: 20, left: 40};        
var width = 400 - margin.left - margin.right;
var height = 300 - margin.top - margin.bottom;
var graphWidth = 300
var x = d3.scaleLinear().range([0, width])
var y = d3.scaleLinear().range([height, 0])
var xAxis = d3.axisBottom(x).ticks(10);
var yAxis = d3.axisLeft(y).ticks(10);

var radius = 20;
var MapColumns = width/radius;
var MapRows = width/radius;
var hexbin = d3.hexbin().radius(radius);
    
var points = [];
for (var i = 0; i < MapRows; i++) {
  for (var j = 0; j < MapColumns; j++) {
    points.push([radius * j * 1.75, radius * i * 1.5]);
  }//for j
}//for i

console.log({points});

/// start a panel 
var panel = 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 + ")");
 
/// fill in the background gray 
panel.append("rect")
    .attr("width", width)
    .attr("height", height) 
    .style('opacity', 0.7)
    .style('fill', '#E6E6E6');
    
/// x and y axes 
panel.append("g")
    .attr("class", "y axis")
    .call(yAxis);

panel.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);
    
/// clip the hex parts that fall outside the box
panel.selectAll(".hex")
    .data(points)
    .enter().append("clipPath")
    .attr("id", "clip")
    .append("rect")
    .attr("class", "mesh")
    .attr("width", width)
    .attr("height", height);

/// add the white hex grid
panel.append("g")
    .attr("clip-path", "url(#clip)")
    .selectAll(".hexagon")
    .data(hexbin(points))
    .enter().append("path")
    .attr("class", "hexagon")
    .attr("d", hexbin.hexagon())
    .attr("transform",...