Skip to content

Instantly share code, notes, and snippets.

@vicwue

vicwue/jsbin.iLOMexaz.css

Created January 16, 2014 15:57
Show Gist options
  • Save vicwue/8457393 to your computer and use it in GitHub Desktop.
Save vicwue/8457393 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jsbin.iLOMexaz.css
path {fill:#0f0;}
Raw
jsbin.iLOMexaz.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class='hexagons'><svg></svg></div>
</body>
</html>
Raw
jsbin.iLOMexaz.js
/*var width = 2048, height;
var hexwid = 300, hexhei = 260, abstand = 5, leftoffset = 103, offsetwidth = 233;
height = (hexhei*1.5)+(abstand*2);*/
var width = 2300, height = 600;
var hexhei = (height/1.53846);
var hexwid = Math.floor(hexhei*1.154), abstand = Math.floor(hexwid/60), leftoffset = Math.floor(hexwid*0.25), offsetwidth = Math.floor(hexwid*7/9);
var scale = hexwid/300;
var dataset = [{"title":"Files","chunkKPI":"No new files"},{"title":"Customer","chunkKPI":"No meeting","chunkKPI2":"planned"},{"title":"Milestones","chunkKPI":"No milestones"},{"title":"Team","chunkKPI":"{0} available"},{"title":"To-Dos","chunkKPI":"No to-dos"}];
var sHexagonSVG = "m-67.79999,133.271c-4.40002,0 -9.79999,-3.117 -12,-6.92798l-68,-117.77905c-2.20001,-3.81097 -2.20001,-10.04498 0,-13.85596l68,-117.77899c2.20001,-3.81104 7.59998,-6.92902 12,-6.92902l136.00006,0c4.40002,0 9.80103,3.11798 12,6.92902l68,117.77899c2.20093,3.81097 2.20093,10.04498 0,13.85596l-68,117.77905c-2.19897,3.81097 -7.59998,6.92798 -12,6.92798l-136.00006,0z";//30y
$(".hexagons").empty();
$(".hexagons").append("<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"></svg");
var availablebubbles = Math.ceil(width / offsetwidth);
var puffer, oGroup =$("<g />");
var n = dataset.length;
puffer = (availablebubbles-dataset.length)/2;
for (var i=0; i<availablebubbles; i++) {
var x, y, isactive;
if (i-Math.floor(puffer)>=n) {
isactive = false;
} else {
var step = i-Math.floor(puffer);
if (step>=0) {
isactive = true;
} else {
isactive = false;
}
}
x = offsetwidth*i+leftoffset;
oGroup.append(placehexagon(isactive, i, x));
}
function placehexagon(isactive, i , x) {
var y, oNewDekoObject, oNewRealObject;
if (i % 2 !== 0) {
y=0-abstand;
// deko
oNewDekoObject=$("<path>").attr("d",sHexagonSVG).attr("transform","translate("+x+","+y+") scale("+scale+")");
// real
y=height-abstand-(hexhei/2);
oNewRealObject=$("<path>").attr("d",sHexagonSVG).attr("transform","translate("+x+","+y+") scale("+scale+")").attr("fill", function(){
if(isactive) { return "#f00";}
});
} else {
// isodd
y=hexhei/2;
// real
oNewRealObject=$("<path>").attr("d",sHexagonSVG).attr("transform","translate("+x+","+y+") scale("+scale+")").attr("fill", function(){
if(isactive) { return "#f00";}
});
// deko
y=height;
oNewDekoObject=$("<path>").attr("d",sHexagonSVG).attr("transform","translate("+x+","+y+") scale("+scale+")");
}
return [oNewDekoObject, oNewRealObject];
}
$(".hexagons svg").attr("width", width).attr("height", height).append(oGroup);
$(".hexagons").append("<div>Available Bubbles: "+availablebubbles+", puffer: "+puffer+", steps: "+n+"</div>");
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment