Hexbin by nitaku

index.js

(function() {
  var color, height, hexbin, points, radius, randomX, randomY, svg, width;

  svg = d3.select('svg');

  width = svg[0][0].getBoundingClientRect().width;

  height = svg[0][0].getBoundingClientRect().height;

  randomX = d3.random.normal(width / 2, 80);

  randomY = d3.random.normal(height / 2, 80);

  points = d3.range(2000).map(function() {
    return [randomX(), randomY()];
  });

  hexbin = d3.hexbin().size([width, height]).radius(20);

  radius = d3.scale.sqrt().domain([0, 60]).range([0, 20]);

  color = d3.scale.linear().domain([0, 20]).range(['white', 'steelblue']).interpolate(d3.interpolateLab);

  /*
  svg.selectAll('.hexagon')
      .data(hexbin(points))
    .enter().append('path')
      .attr('class', 'hexagon')
      .attr('d', (d) -> hexbin.hexagon(radius(d.length)))
      .attr('transform', (d) -> "translate(#{d.x},#{d.y})")
  */


  svg.selectAll('.bubble').data(hexbin(points)).enter().append('circle').attr('class', 'bubble').attr('r', function(d) {
    return radius(d.length) * Math.sqrt(3) / 2;
  }).attr('transform', function(d) {
    return "translate(" + d.x + "," + d.y + ")";
  });

  svg.selectAll('.point').data(points).enter().append('circle').attr('class', 'point').attr('cx', function(d) {
    return d[0];
  }).attr('cy', function(d) {
    return d[1];
  }).attr('r', 1);

}).call(this);

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="description" content="Hexbin" />
    <title>Hexbin</title>
    <link rel="stylesheet" href="index.css">
    <script src="//d3js.org/d3.v3.min.js"></script>
    <script src="//d3js.org/d3.hexbin.v0.min.js?5c6e4f0"></script>
</head>
<body>
  <svg height="500" width="960"></svg>
  
  <script src="index.js"></script>
</body>
</html>

index.coffee

svg = d3.select('svg')
width = svg[0][0].getBoundingClientRect().width
height = svg[0][0].getBoundingClientRect().height

randomX = d3.random.normal(width / 2, 80)
randomY = d3.random.normal(height / 2, 80)
points = d3.range(2000).map(() -> [randomX(), randomY()])

hexbin = d3.hexbin()
    .size([width, height])
    .radius(20)
    
radius = d3.scale.sqrt()
    .domain([0, 60])
    .range([0, 20])
    
color = d3.scale.linear()
    .domain([0, 20])
    .range(['white', 'steelblue'])
    .interpolate(d3.interpolateLab)
    
###
svg.selectAll('.hexagon')
    .data(hexbin(points))
  .enter().append('path')
    .attr('class', 'hexagon')
    .attr('d', (d) -> hexbin.hexagon(radius(d.length)))
    .attr('transform', (d) -> "translate(#{d.x},#{d.y})")###
    
svg.selectAll('.bubble')
    .data(hexbin(points))
  .enter().append('circle')
    .attr('class', 'bubble')
    .attr('r', (d) -> radius(d.length)*Math.sqrt(3)/2)
    .attr('transform', (d) -> "translate(#{d.x},#{d.y})")
    

    
svg.selectAll('.point')
    .data(points)
  .enter().append('circle')
    .attr('class', 'point')
    .attr('cx', (d) -> d[0])
    .attr('cy', (d) -> d[1])
    .attr('r', 1)

index.css

body {
    margin: 0;
    padding: 0;
}
svg {
    background: white;
}

.hexagon {
  fill: lightgray;
}
.bubble {
  fill: lightgray;
}