Bloom Chart Hex Binning

forked from akollegger's block: Honeycomb

forked from akollegger's block: Honeycomb Bloom Chart

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

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 hexBin(v) {
  v.classList.add('occupied');
}
    
  </script>
</body>

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

https://unpkg.com/honeycomb-grid/dist/honeycomb.js

https://cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js