Role Hive

_.md

[ Launch: Role Hive ] 295e24080e025a84d691 by feedthebayer

config.json

{"description":"Role Hive","endpoint":"","display":"svg","public":true,"require":[{"name":"hexbin","url":"http://d3js.org/d3.hexbin.v0.min.js?5c6e4f0"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/kGXwXAc.png","inline-console":false}

inlet.js

//svg sizes and margins
var margin = {
    top: 120,
    right: 100,
    bottom: 100,
    left: 200
}, 
width = 636,
height = 362;

//The number of columns and rows of the heatmap
var MapColumns = 3,
    MapRows = 3;

var i = 0;

var numberOfPoints = 11;
 
//The maximum radius the hexagons can have to still fit the screen
var hexRadius = d3.min([width/((MapColumns + 0.5) * Math.sqrt(3)),
                        height/((MapRows + 1/3) * 1.5)]);

//Calculate the center positions of each hexagon 
var points = [];
//for (var i = 0; i < MapRows; i++) {
//    for (var j = 0; j < MapColumns; j++) {
//       if (i % 2 !== 0) {
//         j -= 0.5;
//       }
        //points.push([hexRadius * j * 1.75, hexRadius * i * 1.5]);
//    }
//}



// DETERMINE NUMBER OF ROWS
var rows = 0;

if (numberOfPoints < 3) {
  rows = 1;
}
else if (numberOfPoints < 7) {
  rows = 2;
}
else if (numberOfPoints < 12) {
  rows = 3;
}
else if (numberOfPoints < 19) {
  rows = 4;
}
else {
  rows = 5;
}



// CELLS PER ROW
var pointsInRow = 0;
var hexWidth = hexRadius * 1.75;
var hexHeight = hexRadius * 1.5;
var overhangOffset = 0.5;
var offset = 0;
var currentRow = 0;

switch (rows) {
  case 1:
    pointsInRow = numberOfPoints;
    for (var i = 0; i < pointsInRow; i++) {
      points.push([hexWidth * i, hexHeight * 0]);
    }
    break;
    
  case 2:
    //ROW1: 1/2 cells
    currentRow = 0;
    pointsInRow = Math.floor(numberOfPoints/rows);
    for (i = 0; i < pointsInRow; i++) {
      points.push([hexWidth * i, hexHeight * currentRow]);
    }
    
    //ROW2: 1/2 cells + possible extra (the rest)
    currentRow = 1;
    pointsInRow = numberOfPoints - pointsInRow;
    offset = (numberOfPoints % rows > 0) ? overhangOffset : 0;
    for (i = 0; i < pointsInRow; i++) {
      points.push([hexWidth * (i-offset), hexHeight * currentRow]);
    }
    break;
    
  case 3:
    //ROW1: 1/3 cells
    currentRow = 0;
    pointsInRow = Math.floor(numberOfPoints/rows);
    for (i = 0; i < pointsInRow; i++) {
      points.push([hexWidth * i, hexHeight * currentRow]);
    }
    
    //ROW2: 1/3 cells + possible extra
    currentRow = 1;
    pointsInRow = Math.floor(numberOfPoints/rows);
    pointsInRow += (numberOfPoints % rows > currentRow-1) ? 1 : 0
    offset = overhangOffset;
    for (i = 0; i < pointsInRow; i++) {
      points.push([hexWidth * (i-offset), hexHeight * currentRow]);
    }
    
    //ROW3: 1/3 cells + possible 2nd extra
    currentRow = 2;
    pointsInRow = Math.floor(numberOfPoints/rows);
    pointsInRow += (numberOfPoints % rows > currentRow-1) ? 1 : 0
    offset = 0;
    for (i = 0; i < pointsInRow; i++) {
      points.push([hexWidth * (i-offset), hexHeight * currentRow]);
    }
    break;
    
  case 4:
    break;
}







//Create SVG element
var svg = d3.select("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

//Set the hexagon radius
var hexbin = d3.hexbin()
.radius(hexRadius);


//Draw the hexagons
svg.append("g")
    .selectAll(".hexagon")
    .data(hexbin(points))
    .enter().append("path")
    .attr("class", "hexagon")
    .attr("d", function (d) {
  return "M" + d.x + "," + d.y + hexbin.hexagon();
 })
    .attr("stroke", "white")
    .attr("stroke-width", "1px")
.style("fill", "grey");

style.css

{}