mbostock · August 11, 2016 23:10 · Feb 8, 2016 · Feb 8, 2016 · Oct 21, 2015 · Oct 12, 2012
diff --git a/README.mkd → README.md b/README.mkd → README.md
diff --git a/.block b/.block
@@ -0,0 +1 @@
+license: gpl-3.0
diff --git a/index.html b/index.html
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <script type="text/javascript" src="http://github.com/mbostock/polymaps/raw/fcfe7020bf8dfa27c4c7b032d74b6b5e24a18868/polymaps.min.js"></script>
+    <script type="text/javascript" src="http://polymaps.org/polymaps.min.js"></script>
     <style type="text/css">
 
-@import url("http://github.com/mbostock/polymaps/raw/fcfe7020bf8dfa27c4c7b032d74b6b5e24a18868/examples/example.css");
+@import url("http://polymaps.org/style.css");
 
     </style>
   </head>

diff --git a/thumbnail.png b/thumbnail.png
diff --git a/index.html b/index.html
@@ -52,7 +52,7 @@
 function rainbow(tile) {
   var rect = tile.element = po.svg("rect"),
       i = hilbert(tile.column, tile.row, tile.zoom),
-      j = ~~(i * 360 / (Math.pow(4, tile.zoom) - 1)),
+      j = ~~(i * 360 / Math.pow(4, tile.zoom)),
       k = 1 << tile.zoom;
   if (tile.column < 0 || tile.column >= k) return;
   rect.setAttribute("width", size.x);

diff --git a/index.html b/index.html
@@ -52,7 +52,7 @@
 function rainbow(tile) {
   var rect = tile.element = po.svg("rect"),
       i = hilbert(tile.column, tile.row, tile.zoom),
-      j = ~~(i * 360 / Math.pow(4, tile.zoom)),
+      j = ~~(i * 360 / (Math.pow(4, tile.zoom) - 1)),
       k = 1 << tile.zoom;
   if (tile.column < 0 || tile.column >= k) return;
   rect.setAttribute("width", size.x);

diff --git a/index.html b/index.html
@@ -57,7 +57,36 @@
   if (tile.column < 0 || tile.column >= k) return;
   rect.setAttribute("width", size.x);
   rect.setAttribute("height", size.y);
-  rect.setAttribute("fill", "hsl(" + j + ",100%,50%)");
+  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>

diff --git a/index.html b/index.html
@@ -57,7 +57,7 @@
   if (tile.column < 0 || tile.column >= k) return;
   rect.setAttribute("width", size.x);
   rect.setAttribute("height", size.y);
-  rect.style.fill = "hsl(" + j + ",100%,50%)";
+  rect.setAttribute("fill", "hsl(" + j + ",100%,50%)");
 }
 
     </script>

diff --git a/index.html b/index.html
@@ -57,7 +57,7 @@
   if (tile.column < 0 || tile.column >= k) return;
   rect.setAttribute("width", size.x);
   rect.setAttribute("height", size.y);
-  rect.setAttribute("fill", "hsl(" + j + ",100%,50%)");
+  rect.style.fill = "hsl(" + j + ",100%,50%)";
 }
 
     </script>

diff --git a/README.mkd b/README.mkd
@@ -1,5 +1,5 @@
 Say you have a bunch of things, like thousands of photos from your digital camera. What if you wanted to look at them all at once? A typical user interface might order the photos chronologically by column and then by row, which does a decent job of grouping related photos together... But, if you have thousands of photos, the rows may be hundreds of photos long, and it is impossible to zoom in on a group of related photos!
 
-An alternative with much better locality is a [space-filling curve](http://en.wikipedia.org/wiki/Space-filling_curve), such as the [Hilbert curve](http://en.wikipedia.org/wiki/Hilbert_curve). These curves can be used to place related things next to each other in space, avoiding those huge gaps across rows you see with sequential layout.
+An alternative that better preserves locality is a [space-filling curve](http://en.wikipedia.org/wiki/Space-filling_curve), such as the [Hilbert curve](http://en.wikipedia.org/wiki/Hilbert_curve). These curves can be used to place related things next to each other in space, avoiding those huge gaps across rows you see with sequential layout.
 
 This example demonstrates the effect of using a Hilbert curve for layout with [Polymaps](http://polymaps.org) by generating rainbow-colored tiles. As you can see, each tile is surrounded by its adjacent colors in the rainbow, even as you zoom in and out. In contrast, the [sequential layout](http://bl.ocks.org/597292) only preserves locality in one dimension.
diff --git a/README.mkd b/README.mkd
@@ -1,4 +1,4 @@
-Say you have a bunch of things, like thousands of photos from your digital camera. What if you wanted to look at them all at once? A typical user interface might order the photos chronologically by column and then by row, which does a decent job of grouping related photos together... But, if you have thousands of photos, the rows may be hundreds of photos long, and it is impossible to zoom in on a sequence of related photos!
+Say you have a bunch of things, like thousands of photos from your digital camera. What if you wanted to look at them all at once? A typical user interface might order the photos chronologically by column and then by row, which does a decent job of grouping related photos together... But, if you have thousands of photos, the rows may be hundreds of photos long, and it is impossible to zoom in on a group of related photos!
 
 An alternative with much better locality is a [space-filling curve](http://en.wikipedia.org/wiki/Space-filling_curve), such as the [Hilbert curve](http://en.wikipedia.org/wiki/Hilbert_curve). These curves can be used to place related things next to each other in space, avoiding those huge gaps across rows you see with sequential layout.
 

diff --git a/README.mkd b/README.mkd
@@ -1,5 +1,5 @@
-Say you have a bunch of things, like thousands of photos from your digital camera. What if you wanted to look at them all at once? A typical user interface might order the photos chronologically by column and then by row, which does a decent job of grouping related photos together... But, if you have thousands of photos, the rows may be hundreds of photos long, and it is impossible to zoom in just one batch of related photos.
+Say you have a bunch of things, like thousands of photos from your digital camera. What if you wanted to look at them all at once? A typical user interface might order the photos chronologically by column and then by row, which does a decent job of grouping related photos together... But, if you have thousands of photos, the rows may be hundreds of photos long, and it is impossible to zoom in on a sequence of related photos!
 
-An alternative with much better locality is a [space-filling curve](http://en.wikipedia.org/wiki/Space-filling_curve), such as the [Hilbert curve](http://en.wikipedia.org/wiki/Hilbert_curve)! These curves can be used to place related things next to each other in space, avoiding those huge gaps across rows you see with sequential layout.
+An alternative with much better locality is a [space-filling curve](http://en.wikipedia.org/wiki/Space-filling_curve), such as the [Hilbert curve](http://en.wikipedia.org/wiki/Hilbert_curve). These curves can be used to place related things next to each other in space, avoiding those huge gaps across rows you see with sequential layout.
 
 This example demonstrates the effect of using a Hilbert curve for layout with [Polymaps](http://polymaps.org) by generating rainbow-colored tiles. As you can see, each tile is surrounded by its adjacent colors in the rainbow, even as you zoom in and out. In contrast, the [sequential layout](http://bl.ocks.org/597292) only preserves locality in one dimension.
diff --git a/README.mkd b/README.mkd
@@ -1,4 +1,4 @@
-Say you have a bunch of things, like thousands of photos from your digital camera. What if you wanted to look at them all at once? A typical user interface might order the photos chronologically by column and then by row, which does a decent job of grouping related photos together... But, if you have thousands of photos, the rows get really long, causing [distracting striation](http://bl.ocks.org/597292).
+Say you have a bunch of things, like thousands of photos from your digital camera. What if you wanted to look at them all at once? A typical user interface might order the photos chronologically by column and then by row, which does a decent job of grouping related photos together... But, if you have thousands of photos, the rows may be hundreds of photos long, and it is impossible to zoom in just one batch of related photos.
 
 An alternative with much better locality is a [space-filling curve](http://en.wikipedia.org/wiki/Space-filling_curve), such as the [Hilbert curve](http://en.wikipedia.org/wiki/Hilbert_curve)! These curves can be used to place related things next to each other in space, avoiding those huge gaps across rows you see with sequential layout.
 

diff --git a/README.mkd b/README.mkd
@@ -0,0 +1,5 @@
+Say you have a bunch of things, like thousands of photos from your digital camera. What if you wanted to look at them all at once? A typical user interface might order the photos chronologically by column and then by row, which does a decent job of grouping related photos together... But, if you have thousands of photos, the rows get really long, causing [distracting striation](http://bl.ocks.org/597292).
+
+An alternative with much better locality is a [space-filling curve](http://en.wikipedia.org/wiki/Space-filling_curve), such as the [Hilbert curve](http://en.wikipedia.org/wiki/Hilbert_curve)! These curves can be used to place related things next to each other in space, avoiding those huge gaps across rows you see with sequential layout.
+
+This example demonstrates the effect of using a Hilbert curve for layout with [Polymaps](http://polymaps.org) by generating rainbow-colored tiles. As you can see, each tile is surrounded by its adjacent colors in the rainbow, even as you zoom in and out. In contrast, the [sequential layout](http://bl.ocks.org/597292) only preserves locality in one dimension.
diff --git a/index.html b/index.html
@@ -39,9 +39,10 @@
 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())
-    .add(po.hash());
+    .add(po.interact());
 
 map.add(po.layer(rainbow));
 

diff --git a/index.html b/index.html
@@ -37,7 +37,7 @@
 var size = {x: 32, y: 32};
 
 var map = po.map()
-    .container(document.getElementById("map").appendChild(po.svg("svg")))
+    .container(document.body.appendChild(po.svg("svg")))
     .zoomRange([0, 6])
     .tileSize(size)
     .add(po.interact())

diff --git a/index.html b/index.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <script type="text/javascript" src="http://github.com/mbostock/polymaps/raw/fcfe7020bf8dfa27c4c7b032d74b6b5e24a18868/polymaps.min.js"></script>
+    <style type="text/css">
+
+@import url("http://github.com/mbostock/polymaps/raw/fcfe7020bf8dfa27c4c7b032d74b6b5e24a18868/examples/example.css");
+
+    </style>
+  </head>
+  <body>
+    <script type="text/javascript">
+
+hilbert = (function() {
+  // Adapted from Nick Johnson: http://bit.ly/biWkkq
+  var pairs = [
+    [[0, 3], [1, 0], [3, 1], [2, 0]],
+    [[2, 1], [1, 1], [3, 0], [0, 2]],
+    [[2, 2], [3, 3], [1, 2], [0, 1]],
+    [[0, 0], [3, 2], [1, 3], [2, 3]]
+  ];
+  return function(x, y, z) {
+    var quad = 0,
+        pair,
+        i = 0;
+    while (--z >= 0) {
+      pair = pairs[quad][(x & (1 << z) ? 2 : 0) | (y & (1 << z) ? 1 : 0)];
+      i = (i << 2) | pair[0];
+      quad = pair[1];
+    }
+    return i;
+  };
+})();
+
+var po = org.polymaps;
+
+var size = {x: 32, y: 32};
+
+var map = po.map()
+    .container(document.getElementById("map").appendChild(po.svg("svg")))
+    .zoomRange([0, 6])
+    .tileSize(size)
+    .add(po.interact())
+    .add(po.hash());
+
+map.add(po.layer(rainbow));
+
+map.add(po.compass()
+    .pan("none"));
+
+function rainbow(tile) {
+  var rect = tile.element = po.svg("rect"),
+      i = hilbert(tile.column, tile.row, tile.zoom),
+      j = ~~(i * 360 / Math.pow(4, tile.zoom)),
+      k = 1 << 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 + ",100%,50%)");
+}
+
+    </script>
+  </body>
+</html>