hexbin with no axes

hexbin scatterplot

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.

<!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>

https://d3js.org/d3.v3.min.js