Skip to content

Instantly share code, notes, and snippets.

@mobeets

mobeets/hex.js

Last active January 2, 2016 23:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mobeets/8374101 to your computer and use it in GitHub Desktop.
Save mobeets/8374101 to your computer and use it in GitHub Desktop.
Download ZIP
All Hive opening geometries (one player, initial placements only)
Raw
hex.js
var infile = 'points.csv'
var dark_color = '#777777'
var margin = {
top: 30,
right: 20,
bottom: 20,
left: 20
};
var width = 90;
var height = 90;
var MapColumns = 7,
MapRows = 7;
hexRadius = 10.0;
width = MapColumns*hexRadius*Math.sqrt(3);
heigth = MapRows*1.5*hexRadius+0.5*hexRadius;
//Set the hexagon radius
var hexbin = d3.hexbin().radius(hexRadius);
function click(d) {
elem = d3.select(this);
col = 'blue';
if (elem.style("fill") != dark_color){
col = dark_color;
}
var el = elem
.style("fill", function (d, i) {
return col;
});
}
function mouse_in(d) {
var el = d3.select(this)
.transition()
.duration(1)
.style("fill-opacity", 0.6);
}
function mouse_out(d) {
var el = d3.select(this)
// .transition()
// .duration(1)
.style("fill-opacity", 1);
};
//Calculate the center positions of each hexagon
var points = [];
for (var i = 0; i < MapRows; i++) {
for (var j = 0; j < MapColumns; j++) {
points.push([hexRadius * j * 1.75, hexRadius * i * 1.5]);
}
}
var center = {x: 3, y: 3};
function map_xy(p) {
if (p.x % 2) {
x = (p.x+1)/2.0;
} else {
x = p.x/2.0;
}
y = p.y;
return {x: x + center.x, y: y + center.y};
}
function inList(xs, x) {
for (i in xs) {
val = map_xy(xs[i]);
if (val.x == x[0] && val.y == x[1]){ return true; }
}
return false;
}
//Create SVG element
function makeGrid(inds, elem) {
var svg = d3.select(elem).append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
hex_points = hexbin(points);
//Start drawing the hexagons
svg.append("g")
.selectAll(".hexagon")
.data(hex_points)
.enter().append("path")
.attr("class", "hexagon")
.attr("d", function (d) {
return "M" + d.x + "," + d.y + hexbin.hexagon();
})
.attr("stroke", function (d,i) {
return "#fff";
})
.attr("stroke-width", "1px")
.style("fill", function (d,i) {
if (inList(inds, [d.i, d.j])) {
if (center.x == d.i && center.y == d.j) {
return 'green';
}
return 'red';
} else {
return dark_color;
}
})
.on("mouseover", mouse_in)
.on("mouseout", mouse_out)
.on("click", click);
}
function load_charts() {
d3.csv(infile, function(data) {
all_rows = data.map(function(d) { return { ind: +d["ind"], x: +d["x"], y: +d["y"] }; });
var lkp = d3.nest()
.key(function(d) { return d.ind; })
.entries(all_rows);
N = lkp.length - 1;
for (var i = 0; i < N; i++) {
inds = lkp[i]['values'];
$("#charts").append('<div class="chart-box"><span class="chart-title">#' + (i+1) + '</span><div id="chart-' + i + '" class="chart"></div></div>');
makeGrid(inds, '#chart-' + i);
}
});
}
$(function() {
load_charts();
});
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<script type="text/javascript" src="http://d3js.org/d3.hexbin.v0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<link rel=StyleSheet href="styles.css" type="text/css">
<title>Hive</title>
</head>
<body>
<div class="hexagon2"></div>
<div id="header">
<h1>Hive</h1>
<div class="hint">All possible opening geometries (one player, initial placements only)</div>
<ol>
<li>Generate coordinates of all hexagons in consideration.</li>
<li>Generate all 4-combinations of those coordinates.</li>
<li>Remove any combinations that don't include the origin.</li>
<li>Remove any combinations that aren't fully connected.</li>
<li>(Optional, not done below: Remove mirrored combinations.)</li>
</ol>
<br>
</div>
<div id="charts"></div>
<script type="text/javascript" src="hex.js"></script>
</body>
</html>
Raw
points.csv
ind x y
0 -6 0
0 -4 0
0 -2 0
0 0 0
1 -5 -1
1 -4 0
1 -2 0
1 0 0
2 -5 -1
2 -3 -1
2 -2 0
2 0 0
3 -5 -1
3 -3 -1
3 -1 -1
3 0 0
4 -5 1
4 -4 0
4 -2 0
4 0 0
5 -5 1
5 -3 1
5 -2 0
5 0 0
6 -4 -2
6 -3 -1
6 -2 0
6 0 0
7 -4 -2
7 -3 -1
7 -1 -1
7 0 0
8 -4 -2
8 -2 -2
8 -1 -1
8 0 0
9 -4 0
9 -3 -1
9 -2 0
9 0 0
10 -4 0
10 -3 -1
10 -1 -1
10 0 0
11 -4 0
11 -3 1
11 -2 0
11 0 0
12 -4 0
12 -2 0
12 -1 -1
12 0 0
13 -4 0
13 -2 0
13 0 0
13 1 -1
14 -4 2
14 -3 1
14 -2 0
14 0 0
15 -3 -3
15 -2 -2
15 -1 -1
15 0 0
16 -3 -1
16 -3 1
16 -2 0
16 0 0
17 -3 -1
17 -2 -2
17 -2 0
17 0 0
18 -3 -1
18 -2 -2
18 -1 -1
18 0 0
19 -3 -1
19 -2 0
19 -1 -1
19 0 0
20 -3 -1
20 -2 0
20 0 0
20 1 -1
21 -3 -1
21 -1 -1
21 0 -2
21 0 0
22 -3 -1
22 -1 -1
22 0 0
22 1 -1
23 -3 1
23 -2 0
23 -2 2
23 0 0
24 -3 1
24 -2 0
24 -1 -1
24 0 0
25 -3 1
25 -2 0
25 0 0
25 1 -1
26 -2 -2
26 -2 0
26 -1 -1
26 0 0
27 -2 -2
27 -1 -3
27 -1 -1
27 0 0
28 -2 -2
28 -1 -1
28 0 -2
28 0 0
29 -2 -2
29 -1 -1
29 0 0
29 1 -1
30 -2 -2
30 0 -2
30 0 0
30 1 -1
31 -2 0
31 -1 -1
31 0 -2
31 0 0
32 -2 0
32 -1 -1
32 0 0
32 1 -1
33 -2 0
33 0 -2
33 0 0
33 1 -1
34 -2 0
34 0 0
34 1 -1
34 2 -2
35 -2 0
35 0 0
35 1 -1
35 3 -1
36 -1 -3
36 -1 -1
36 0 -2
36 0 0
37 -1 -3
37 0 -2
37 0 0
37 1 -1
38 -1 -1
38 0 -2
38 0 0
38 1 -3
39 -1 -1
39 0 -2
39 0 0
39 1 -1
40 -1 -1
40 0 -2
40 0 0
40 2 -2
41 -1 -1
41 0 0
41 1 -1
41 2 -2
42 -1 -1
42 0 0
42 1 -1
42 3 -1
43 0 -2
43 0 0
43 1 -3
43 1 -1
44 0 -2
44 0 0
44 1 -1
44 2 -2
45 0 -2
45 0 0
45 1 -1
45 3 -1
46 0 0
46 1 -3
46 1 -1
46 2 -2
47 0 0
47 1 -1
47 2 -2
47 3 -3
48 0 0
48 1 -1
48 2 -2
48 3 -1
49 0 0
49 1 -1
49 2 -2
49 4 -2
50 0 0
50 1 -1
50 3 -1
50 4 -2
51 0 0
51 1 -1
51 3 -1
51 4 0
52 0 0
52 1 -1
52 3 -1
52 5 -1
Raw
styles.css
body {
margin-left: auto;
margin-right: auto;
width: 905px;
font-family: "Helvetica Neue", Helvetica;
font-size: 14px;
}
#charts {
overflow: hidden;
margin-bottom: 50px;
}
#header {
margin-top: 20px;
margin-left: 20px;
margin-bottom: 20px;
display: block;
z-index: 1;
}
h1 {
font-size: 36px;
font-weight: 300;
text-shadow: 0 1px 0 #fff;
}
.hint {
width: 1280px;
right: 0px;
color: rgb(153, 153, 153);
font-size: 12px;
padding-bottom: 20px;
}
.hr-style {
border: 0;
height: 2px;
width: 80%;
color: #E8E8E8;
background-color: #E8E8E8;
}
.chart-box {
float: left;
}
.chart {
transform: rotate(210deg);
-webkit-transform: rotate(210deg);
-ms-transform:rotate(210deg);
margin-bottom: 25px;
}
.chart-title {
}
.hexagon {
}
.selected {
background-color: red;
}
.hexagon2 {
top: 70px;
right: 90px;
width: 100px;
height: 55px;
background: red;
position: relative;
/*-webkit-transform: rotate(25deg);*/
}
.hexagon2:before {
content: "";
position: absolute;
top: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid red;
}
.hexagon2:after {
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid red;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment