toja/.block

## .block
license: gpl-3.0

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<script src="//d3js.org/d3.v4.min.js"></script>

<body>
<script>

var width       = 960,
    height      = 500,
    rotate      = [180, 0],
    velocity    = [.009, -.003],
    grid        = 15,
    space       = 0.4,
    saturation  = 1.0;

var time = Date.now();

var proj = d3.geoOrthographic()
    .rotate(rotate)
    .scale(240)
    .translate([width / 2, height / 2])
    .clipAngle(90)
    .precision(.1);

var path = d3.geoPath()
    .projection(proj);

var dx = grid/2 - space,
    dy = grid/2 - space;

var rectangle = function (x, y) {
    var x0 = x - dx, y0 = y - dy,
        x1 = x + dx, y1 = y + dy;

    return {
        type: "Feature",
        geometry: {
            type: "Polygon",
            coordinates: [
                [ [x0, y0], [x0, y1], [x1, y1], [x1, y0], [x0, y0] ]
            ]
        },
        properties: { x: x, y: y }
    };
}

var xz = d3.range(-180, 180, grid).map(function(deg) { return deg + grid/2 }),
    yz = d3.range(-90, 90, grid).map(function(deg) { return deg + grid/2 });

var rectangles = d3.merge(xz.map(function(x) { return yz.map(function(y) { return rectangle(x, y); }); }));

var scaleHue = d3.scaleLinear()
    .domain([-180, 180])
    .range([0, 360]);

var scaleLum = d3.scaleLinear()
    .domain([-90, 90])
    .range([0, 1]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

svg.append("circle")
    .attr("cx", width / 2)
    .attr("cy", height / 2)
    .attr("r", 240)
    .style("fill", "#fff");

svg.append("g")
    .attr("class", "features")
    .selectAll(".rectangles")
        .data(rectangles)
    .enter().append("path")
        .attr("d", path)
        .style("fill", function (d) {
            return d3.hsl(
                scaleHue(d.properties.x),
                saturation,
                scaleLum(d.properties.y)
              )
              .toString();
        });

var features = svg.select(".features").selectAll("path");

d3.timer(function() {
  var dt = Date.now() - time;
  proj.rotate([rotate[0] + velocity[0] * dt, rotate[1] + velocity[1] * dt]);
  features.attr("d", path);
});

</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<script src="//d3js.org/d3.v4.min.js"></script>

	<body>
	<script>

	var width = 960,
	height = 500,
	rotate = [180, 0],
	velocity = [.009, -.003],
	grid = 15,
	space = 0.4,
	saturation = 1.0;

	var time = Date.now();

	var proj = d3.geoOrthographic()
	.rotate(rotate)
	.scale(240)
	.translate([width / 2, height / 2])
	.clipAngle(90)
	.precision(.1);

	var path = d3.geoPath()
	.projection(proj);

	var dx = grid/2 - space,
	dy = grid/2 - space;

	var rectangle = function (x, y) {
	var x0 = x - dx, y0 = y - dy,
	x1 = x + dx, y1 = y + dy;

	return {
	type: "Feature",
	geometry: {
	type: "Polygon",
	coordinates: [
	[ [x0, y0], [x0, y1], [x1, y1], [x1, y0], [x0, y0] ]
	]
	},
	properties: { x: x, y: y }
	};
	}

	var xz = d3.range(-180, 180, grid).map(function(deg) { return deg + grid/2 }),
	yz = d3.range(-90, 90, grid).map(function(deg) { return deg + grid/2 });

	var rectangles = d3.merge(xz.map(function(x) { return yz.map(function(y) { return rectangle(x, y); }); }));

	var scaleHue = d3.scaleLinear()
	.domain([-180, 180])
	.range([0, 360]);

	var scaleLum = d3.scaleLinear()
	.domain([-90, 90])
	.range([0, 1]);

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	svg.append("circle")
	.attr("cx", width / 2)
	.attr("cy", height / 2)
	.attr("r", 240)
	.style("fill", "#fff");

	svg.append("g")
	.attr("class", "features")
	.selectAll(".rectangles")
	.data(rectangles)
	.enter().append("path")
	.attr("d", path)
	.style("fill", function (d) {
	return d3.hsl(
	scaleHue(d.properties.x),
	saturation,
	scaleLum(d.properties.y)
	)
	.toString();
	});

	var features = svg.select(".features").selectAll("path");

	d3.timer(function() {
	var dt = Date.now() - time;
	proj.rotate([rotate[0] + velocity[0] * dt, rotate[1] + velocity[1] * dt]);
	features.attr("d", path);
	});

	</script>