mbostock · March 19, 2019 22:12
diff --git a/.block b/.block
 license: gpl-3.0
 redirect: https://observablehq.com/@mbostock/shiboronoi
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <body>
 <script src="//d3js.org/d3.v3.min.js"></script>
 <script>

 var width = 960,
    height = 500,
    id = 0;

 var voronoi = d3.geom.voronoi()
    .clipExtent([[-1, -1], [width + 1, height + 1]]);

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

 var context = canvas.node().getContext("2d");

 d3.tsv("shibe.tsv", function(error, vertices) {
  if (error) throw error;

  var shibe = new Image;
  shibe.src = "shibe.jpg";
  shibe.onload = loaded;

  function loaded() {
    canvas.on("mousemove", mousemoved);
    render();
  }

  function mousemoved() {
    vertices[0] = d3.mouse(this);
    render();
  }

  function render() {
    var cells = voronoi(vertices);

    cells.forEach(function(cell) {
      context.save();
      path(cell);
      context.clip();
      context.drawImage(shibe, cell.point[0] - 90, cell.point[1] - 115);
      context.stroke();
      context.restore();
    });
  }
 });

 function path(cell) {
  context.beginPath();
  context.moveTo(cell[0][0], cell[0][1]);
  for (var i = 1, n = cell.length; i < n; ++i) context.lineTo(cell[i][0], cell[i][1]);
  context.closePath();
 }

 </script>
diff --git a/shibe.jpg b/shibe.jpg
diff --git a/shibe.tsv b/shibe.tsv
diff --git a/thumbnail.png b/thumbnail.png
	license: gpl-3.0
	redirect: https://observablehq.com/@mbostock/shiboronoi
	<!DOCTYPE html>
	<meta charset="utf-8">
	<body>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<script>

	var width = 960,
	height = 500,
	id = 0;

	var voronoi = d3.geom.voronoi()
	.clipExtent([[-1, -1], [width + 1, height + 1]]);

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

	var context = canvas.node().getContext("2d");

	d3.tsv("shibe.tsv", function(error, vertices) {
	if (error) throw error;

	var shibe = new Image;
	shibe.src = "shibe.jpg";
	shibe.onload = loaded;

	function loaded() {
	canvas.on("mousemove", mousemoved);
	render();
	}

	function mousemoved() {
	vertices[0] = d3.mouse(this);
	render();
	}

	function render() {
	var cells = voronoi(vertices);

	cells.forEach(function(cell) {
	context.save();
	path(cell);
	context.clip();
	context.drawImage(shibe, cell.point[0] - 90, cell.point[1] - 115);
	context.stroke();
	context.restore();
	});
	}
	});

	function path(cell) {
	context.beginPath();
	context.moveTo(cell[0][0], cell[0][1]);
	for (var i = 1, n = cell.length; i < n; ++i) context.lineTo(cell[i][0], cell[i][1]);
	context.closePath();
	}

	</script>
	0	1
	941	190
	546	3
	50	482
	437	19
	855	116
	497	464
	834	417
	118	340
	619	265
	374	307
	169	182
	504	40
	36	167
	438	99
	204	262
	477	201
	729	111
	298	297
	658	326
	737	18
	397	147
	628	376
	532	104
	876	21
	318	472
	395	83
	146	28
	911	74
	913	208
	236	468
	254	33
	78	23
	438	317
	957	311
	64	83
	528	400
	313	140
	789	40
	556	350
	758	415
	713	176
	384	480
	880	457
	578	247
	366	436
	20	327
	610	33
	957	430
	863	258
	18	386
	172	51
	33	276
	709	218
	653	260
	855	60
	163	473
	59	243
	162	220
	477	8
	335	333
	385	30
	462	478
	176	423
	860	184
	933	265
	644	193
	858	342
	598	442
	425	362
	323	56
	406	389
	104	277
	136	199
	282	83
	229	316
	111	78
	217	190
	306	429
	797	110
	761	276