bewest/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>Hexagons Test</title>
    <script type="text/javascript" src="http://hperantunes01.appspot.com/static/js/d3/d3.min.js"></script>
    <script type="text/javascript" src="http://hperantunes01.appspot.com/static/js/d3/d3.behavior.min.js"></script>
    <style type="text/css">
svg {
    border: solid 1px #aaa;
    background: #eee;
}

path {
    fill: lightsteelblue;
    stroke: #000;
    stroke-width: .5px;
}
    </style>
  </head>
  <body>
    <script type="text/javascript">

var w = 960,
    h = 500,
    padding = 50;

var diameter = 50;

var offset = diameter / Math.sqrt(3) * 3 / 4;
var data = [];
var index = 0;
d3.range(0, w * 2, Math.sqrt(3) * diameter / 2).map(function(v1, i) {
    d3.range(0, h * 2, diameter * 3 / 4).map(function(v2, j) {
        var x = j % 2 ? v1 + offset : v1,
            y = v2;
        data.push({
            id: index++,
            centroid: [x, y],
            coordinates: [i, j, (i + j) * -1],
            customName: 'test',
            visible: x >= padding && x <= w - padding && y >= padding && y <= h - padding
        });
    });
});

var svg = d3.select("body")
    .append("svg:svg")
    .attr("width", w)
    .attr("height", h)
    .attr("pointer-events", "all");

svg.call(d3.behavior.zoom().on("zoom", move));

svg.append("svg:line")
    .attr("stroke", "red")
    .attr("x1", 0 + padding)
    .attr("y1", 0 + padding)
    .attr("x2", w - padding)
    .attr("y2", 0 + padding);

svg.append("svg:line")
    .attr("stroke", "red")
    .attr("x1", 0 + padding)
    .attr("y1", h - padding)
    .attr("x2", w - padding)
    .attr("y2", h - padding);

svg.append("svg:line")
    .attr("stroke", "red")
    .attr("x1", 0 + padding)
    .attr("y1", 0 + padding)
    .attr("x2", 0 + padding)
    .attr("y2", h - padding);

svg.append("svg:line")
    .attr("stroke", "red")
    .attr("x1", w - padding)
    .attr("y1", 0 + padding)
    .attr("x2", w - padding)
    .attr("y2", h - padding);

render();

function mouseover(d, i) {
    d3.select(this)
        .style("fill", "red");
}

function mouseout(d, i) {
    d3.select(this)
        .style("fill", "lightsteelblue");
}

function click(d, i) {
    d.customName = Date.now();
    console.log("click", d, i);
    d3.select(this)
        .style("fill", "yellow");
}

function removeClicked() {
    svg.selectAll("path")
        .filter(function(d) {
            return d.customName != 'test';
        })
        .remove();
}

function move() {
    var x = d3.event.translate[0],
        y = d3.event.translate[1]

    data.filter(function(d) {
        return !d.visible
            && d.centroid[0] + x >= padding
            && d.centroid[0] + x <= w - padding
            && d.centroid[1] + y >= padding
            && d.centroid[1] + y <= h - padding;
    }).map(function(d) {
        d.visible = true;
        return d;
    });

    data.filter(function(d) {
        return d.visible
            && (d.centroid[0] + x < padding
                || d.centroid[0] + x > w - padding
                || d.centroid[1] + y < padding
                || d.centroid[1] + y > h - padding);
    }).map(function(d) {
        d.visible = false;
        return d;
    });

    render();

    svg.selectAll("path")
        .attr("transform", "translate(" + [x, y] + ")" /*+ "scale(" + d3.event.scale + ")"*/);
}

function render() {
    var grid = svg.selectAll("path")
        .data(
            data.filter(function(d) { return d.visible; }),
            function(d) { return d.id; }
        );

    grid.enter()
        .sort(function(a, b) { return a.id - b.id; })
        .append("svg:path")
        .attr("d", function(d) {
            return "M" + hex(d.centroid, diameter).join("L") + "Z";
        })
        .on("mouseover", mouseover)
        .on("mouseout", mouseout)
        .on("click", click);

    grid.exit().remove();
}

function hex(centroid, diameter, tilted) {
    if (centroid == null || centroid.length != 2) {
        throw new Error("centroid must be an array [x, y]");
    }
    if (diameter == null) {
        diameter = 0;
    }
    if (tilted == null) {
        tilted = false;
    }
    var a = diameter / 2,
        b = (Math.sqrt(3) * a) / 2,
        x = centroid[0],
        y = centroid[1];
    return tilted
        ? [[x - a / 2, y - b], [x - a, y], [x - a / 2, y + b], [x + a / 2, y + b], [x + a, y], [x + a / 2, y - b]]
        : [[x - b, y - a / 2], [x - b, y + a / 2], [x, y + a], [x + b, y + a / 2], [x + b, y - a / 2], [x, y - a]];
};

    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<title>Hexagons Test</title>
	<script type="text/javascript" src="http://hperantunes01.appspot.com/static/js/d3/d3.min.js"></script>
	<script type="text/javascript" src="http://hperantunes01.appspot.com/static/js/d3/d3.behavior.min.js"></script>
	<style type="text/css">
	svg {
	border: solid 1px #aaa;
	background: #eee;
	}

	path {
	fill: lightsteelblue;
	stroke: #000;
	stroke-width: .5px;
	}
	</style>
	</head>
	<body>
	<script type="text/javascript">

	var w = 960,
	h = 500,
	padding = 50;

	var diameter = 50;

	var offset = diameter / Math.sqrt(3) * 3 / 4;
	var data = [];
	var index = 0;
	d3.range(0, w * 2, Math.sqrt(3) * diameter / 2).map(function(v1, i) {
	d3.range(0, h * 2, diameter * 3 / 4).map(function(v2, j) {
	var x = j % 2 ? v1 + offset : v1,
	y = v2;
	data.push({
	id: index++,
	centroid: [x, y],
	coordinates: [i, j, (i + j) * -1],
	customName: 'test',
	visible: x >= padding && x <= w - padding && y >= padding && y <= h - padding
	});
	});
	});

	var svg = d3.select("body")
	.append("svg:svg")
	.attr("width", w)
	.attr("height", h)
	.attr("pointer-events", "all");

	svg.call(d3.behavior.zoom().on("zoom", move));

	svg.append("svg:line")
	.attr("stroke", "red")
	.attr("x1", 0 + padding)
	.attr("y1", 0 + padding)
	.attr("x2", w - padding)
	.attr("y2", 0 + padding);

	svg.append("svg:line")
	.attr("stroke", "red")
	.attr("x1", 0 + padding)
	.attr("y1", h - padding)
	.attr("x2", w - padding)
	.attr("y2", h - padding);

	svg.append("svg:line")
	.attr("stroke", "red")
	.attr("x1", 0 + padding)
	.attr("y1", 0 + padding)
	.attr("x2", 0 + padding)
	.attr("y2", h - padding);

	svg.append("svg:line")
	.attr("stroke", "red")
	.attr("x1", w - padding)
	.attr("y1", 0 + padding)
	.attr("x2", w - padding)
	.attr("y2", h - padding);

	render();

	function mouseover(d, i) {
	d3.select(this)
	.style("fill", "red");
	}

	function mouseout(d, i) {
	d3.select(this)
	.style("fill", "lightsteelblue");
	}

	function click(d, i) {
	d.customName = Date.now();
	console.log("click", d, i);
	d3.select(this)
	.style("fill", "yellow");
	}

	function removeClicked() {
	svg.selectAll("path")
	.filter(function(d) {
	return d.customName != 'test';
	})
	.remove();
	}

	function move() {
	var x = d3.event.translate[0],
	y = d3.event.translate[1]

	data.filter(function(d) {
	return !d.visible
	&& d.centroid[0] + x >= padding
	&& d.centroid[0] + x <= w - padding
	&& d.centroid[1] + y >= padding
	&& d.centroid[1] + y <= h - padding;
	}).map(function(d) {
	d.visible = true;
	return d;
	});

	data.filter(function(d) {
	return d.visible
	&& (d.centroid[0] + x < padding
	\|\| d.centroid[0] + x > w - padding
	\|\| d.centroid[1] + y < padding
	\|\| d.centroid[1] + y > h - padding);
	}).map(function(d) {
	d.visible = false;
	return d;
	});

	render();

	svg.selectAll("path")
	.attr("transform", "translate(" + [x, y] + ")" /+ "scale(" + d3.event.scale + ")"/);
	}

	function render() {
	var grid = svg.selectAll("path")
	.data(
	data.filter(function(d) { return d.visible; }),
	function(d) { return d.id; }
	);

	grid.enter()
	.sort(function(a, b) { return a.id - b.id; })
	.append("svg:path")
	.attr("d", function(d) {
	return "M" + hex(d.centroid, diameter).join("L") + "Z";
	})
	.on("mouseover", mouseover)
	.on("mouseout", mouseout)
	.on("click", click);

	grid.exit().remove();
	}

	function hex(centroid, diameter, tilted) {
	if (centroid == null \|\| centroid.length != 2) {
	throw new Error("centroid must be an array [x, y]");
	}
	if (diameter == null) {
	diameter = 0;
	}
	if (tilted == null) {
	tilted = false;
	}
	var a = diameter / 2,
	b = (Math.sqrt(3) * a) / 2,
	x = centroid[0],
	y = centroid[1];
	return tilted
	? [[x - a / 2, y - b], [x - a, y], [x - a / 2, y + b], [x + a / 2, y + b], [x + a, y], [x + a / 2, y - b]]
	: [[x - b, y - a / 2], [x - b, y + a / 2], [x, y + a], [x + b, y + a / 2], [x + b, y - a / 2], [x, y - a]];
	};

	</script>
	</body>
	</html>