mbostock/.block

## .block
license: gpl-3.0

## README.md

      
        

                
      Raw
    
  

        
        
          
            
          
          
            
              README.md
            
          
        
      
      
    This is the counter-example to Hilbert Tiles.

  

  

## index.html
<!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>

## thumbnail.png

      
        

                
      Raw
    
  

        
        
          
            
          
          
            
              thumbnail.png
	<!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>