Skip to content

Instantly share code, notes, and snippets.

@mbostock
Last active February 8, 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 mbostock/597292 to your computer and use it in GitHub Desktop.
Save mbostock/597292 to your computer and use it in GitHub Desktop.
Sequential Tiles
license: gpl-3.0
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://polymaps.org/polymaps.min.js"></script>
<style type="text/css">
@import url("http://polymaps.org/style.css");
</style>
</head>
<body>
<script type="text/javascript">
var po = org.polymaps;
var size = {x: 32, y: 32};
var map = po.map()
.container(document.body.appendChild(po.svg("svg")))
.zoomRange([0, 6])
.zoom(4)
.center({lat: 0, lon: 0})
.tileSize(size)
.add(po.interact());
map.add(po.layer(rainbow));
map.add(po.compass()
.pan("none"));
function rainbow(tile) {
var rect = tile.element = po.svg("rect"),
k = 1 << tile.zoom,
i = tile.column + tile.row * k,
j = ~~(i * 360 / Math.pow(4, tile.zoom));
if (tile.column < 0 || tile.column >= k) return;
rect.setAttribute("width", size.x);
rect.setAttribute("height", size.y);
rect.setAttribute("fill", hsl(j, 1, .5));
}
function hsl(h, s, l) {
var m1,
m2;
/* Some simple corrections for h, s and l. */
h = h % 360; if (h < 0) h += 360;
s = s < 0 ? 0 : s > 1 ? 1 : s;
l = l < 0 ? 0 : l > 1 ? 1 : l;
/* From FvD 13.37, CSS Color Module Level 3 */
m2 = l <= .5 ? l * (1 + s) : l + s - l * s;
m1 = 2 * l - m2;
function v(h) {
if (h > 360) h -= 360;
else if (h < 0) h += 360;
if (h < 60) return m1 + (m2 - m1) * h / 60;
if (h < 180) return m2;
if (h < 240) return m1 + (m2 - m1) * (240 - h) / 60;
return m1;
}
function vv(h) {
return Math.round(v(h) * 255);
}
return "rgb(" + vv(h + 120) + "," + vv(h) + "," + vv(h - 120) + ")";
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment