D3 Examples - Bloom Chart Hex Binning

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://unpkg.com/honeycomb-grid/dist/honeycomb.js"></script>
  <script src="https://cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    html,
body {
    height: 100%;
    margin: 0;
    color: #333;
    font-family: sans-serif;
    overflow: hidden;
}
​
#chart-container {
    display: block;
    position: relative;
    width: 960px;
    height: 600px;
    margin: 0 auto;
    background-color: #ccc;
    overflow: hidden;
}
​
svg polygon {
    fill: #fff;
    stroke: #eee;
    stroke-width: 0.5;
}
    
    svg polygon:hover, svg .occupied polygon:hover {
      fill: #e8f3dc;
    }
    
    svg .occupied polygon {
      fill: #dce8f3;
    }
​
svg text {
    fill: #036;
    text-anchor: middle;
}
​
    .links line {
  stroke: #aaa;
}
​
.nodes circle {
  pointer-events: all;
  stroke: none;
  stroke-width: 40px;
}
​
#chart-controls {
  display: block;
  position: relative;
  width: 960px;
  height: 80px;
  padding: 10px;
}
​
  </style>
</head>
​
<body>
  <div id="chart-controls">
    <label>Hex Size:</label>
      <input id="hexSizeControl" type="range" 
           min="1" max="48" value="12" step="1">
    <button onclick="rebin">
    </div>
  <div id="chart-container" >
      <svg id="chart" width="960" height="600"></svg>
  </div>
  <script>
var Grid = Honeycomb.Grid,
    View = Honeycomb.View,
    Point = Honeycomb.Point,
    container = document.getElementById('chart'),
    rect = container.getBoundingClientRect(),
    grid,
    view,
    hexViews = [];
    
var hexSizeControl = document.querySelector("#hexSizeControl");
    
function createHexGrid() {
    grid = Grid({ size: hexSizeControl.value, 
               orientation: Honeycomb.HEX_ORIENTATIONS.FLAT })
    view = null;
    _.forEach(hexViews, function(hexView) {
    hexView.parentNode.removeChild(hexView);
​
  })
}
​
grid = Grid({ size: 60, 
             orientation: Honeycomb.HEX_ORIENTATIONS.FLAT
            })
    
view = View({
    grid: grid,
    template: function createTemplate(hex) {
        var NS = 'https://www.w3.org/2000/svg',
            position = this.hexToPixel(hex),
            hexCenter = hex.topLeft().multiply(-1),
            g = document.createElementNS(NS, 'g'),
            polygon = document.createElementNS(NS, 'polygon'),
            points = hex.corners().map(corner => corner.x + ',' + corner.y).join(' ')
​
        polygon.setAttribute('points', points)
​
​
        g.appendChild(polygon)
        g.setAttribute('transform', 
                       'translate(' + position.x + ',' 
                        + position.y + ')');
        bindHexToView(hex, g);
​
        return g
    },
    container: container,
    origin: {
        x: rect.width / 2,
        y: rect.height / 2
    }
​
})
​
const padding = 3;
const hexWidth = view.width() + padding;
const hexHeight = view.height() + padding;
view.renderHexes(grid.rectangle({ 
  width: hexWidth, height: hexHeight, 
  direction: 1, 
  start: Point(Math.round(0 - hexWidth/2), 0) 
}));
​
container.addEventListener('click', function handleClick(e) {
    // e.offsetX/Y isn't supported by firefox, so calculating it here:
    var offsetX = e.clientX - rect.left,
        offsetY = e.clientY - rect.top,
        hex = view.pixelToHex([offsetX, offsetY])
})
​
​
/////////////
//Bloom Chart
var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");
​
var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d) { return d.id; }))
    .force("charge", d3.forceManyBody())
    .force("center", d3.forceCenter(width / 2, height / 2));
​
d3.json("miserables.json", function(error, graph) {
  if (error) throw error;
​
  var link = svg.append("g")
      .attr("class", "links")
    .selectAll("line")
    .data(graph.links)
    .enter().append("line");
​
  var node = svg.append("g")
      .attr("class", "nodes")
    .selectAll("circle")
    .data(graph.nodes)
    .enter().append("circle")
      .attr("r", 5.0);
​
  node.append("title")
      .text(function(d) { return d.id; });
​
  simulation
      .nodes(graph.nodes)
      .on("tick", ticked);
  
  simulation
    .on("end", settled);
​
​
  simulation.force("link")
      .links(graph.links);
​
  function ticked() {
    link
        .attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });
​
    node
        .attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });
    
    
  }
  
  function settled() {
    snapToHex();
  }
  
  function rebin() {
    
  }
  
  function snapToHex() {
    graph.nodes.forEach(detectHex);
    
    node.transition()
    .duration(750)
        .attr("cx", function(d) { return d.hx; })
        .attr("cy", function(d) { return d.hy; });
    
    link.transition()
        .attr("x1", function(d) { return d.source.hx; })
        .attr("y1", function(d) { return d.source.hy; })
        .attr("x2", function(d) { return d.target.hx; })
        .attr("y2", function(d) { return d.target.hy; });
        
​
  }
});
    
​
function bindHexToView(h,v) {
  hexViews.push(
        {
      hex: h, 
      view: v
        }  
  );
}
​
function hexToView(h) {
  var hvPair = _.find(hexViews, 
                {hex:
                 {
                   x: h.x,
                   y: h.y,
                   z: h.z
                 }});
  return _.isUndefined(hvPair) ? undefined : hvPair.view;
}
    
function detectHex(d) {
  var hex = view.pixelToHex([d.x, d.y]);
//   var hexCoords = view.hexToPixel(hex);
  var hexCoords = hex.toPoint();
  var hexView = hexToView(hex);
  
  hexBin(hexView);
  
  d.hx = hexCoords.x + view.origin.x;
  d.hy = hexCoords.y + view.origin.y;
}
​
function hexBin(v) {
  v.classList.add('occupied');
}
    
  </script>
</body>
​
    