periplus: toolkit/javascript/d3/examples/contour/contour.html@c0b4a8b5a012 (annotated)

47 c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	1	<!DOCTYPE html>
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	2	<html>
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	3	<head>
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	4	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	5	<title>Contour</title>
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	6	<script type="text/javascript" src="../../d3.js"></script>
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	7	<script type="text/javascript" src="../../d3.geom.js"></script>
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	8	<style type="text/css">
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	9	svg {
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	10	border: solid 1px #aaa;
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	11	}
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	12	path {
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	13	stroke: red;
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	14	stroke-width: 2px;
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	15	fill: none;
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	16	}
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	17	rect {
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	18	fill: lightsteelblue;
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	19	stroke: #eee;
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	20	stroke-width: 2px;
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	21	}
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	22	rect.d1 {
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	23	fill: steelblue;
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	24	}
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	25	rect.d2 {
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	26	fill: darkblue;
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	27	}
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	28	</style>
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	29	</head>
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	30	<body>
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	31	<script type="text/javascript">
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	32
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	33	function grid0(x,y) {
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	34	if (x < 0 \|\| y < 0 \|\| x >= dw \|\| y >= dh) return 0;
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	35	return data[y][x];
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	36	}
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	37	function grid1(x,y) {
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	38	if (x < 0 \|\| y < 0 \|\| x >= dw \|\| y >= dh) return 0;
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	39	return data[y][x]==1;
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	40	}
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	41	function grid2(x,y) {
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	42	if (x < 0 \|\| y < 0 \|\| x >= dw \|\| y >= dh) return 0;
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	43	return data[y][x]==2;
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	44	}
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	45
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	46	var data = [[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	47	[0, 0, 0, 2, 2, 2, 0, 0, 0, 0],
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	48	[0, 0, 0, 2, 2, 2, 2, 0, 0, 0],
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	49	[0, 0, 2, 2, 2, 2, 2, 2, 0, 0],
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	50	[0, 0, 2, 2, 2, 2, 2, 2, 2, 0],
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	51	[0, 0, 2, 1, 0, 0, 2, 2, 2, 0],
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	52	[0, 0, 1, 1, 0, 0, 2, 2, 2, 0],
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	53	[0, 0, 0, 0, 1, 1, 2, 2, 0, 0],
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	54	[0, 0, 0, 0, 1, 2, 2, 2, 0, 0],
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	55	[0, 0, 0, 0, 0, 0, 0, 0, 0, 0]],
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	56	fn = [grid0, grid1, grid2],
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	57	dw = data[0].length,
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	58	dh = data.length;
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	59	sz = 30,
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	60	grid = grid0;
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	61
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	62	function translateY(d, i) { return "translate(0,"+(i*sz)+")"; }
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	63	function translateX(d, i) { return "translate("+(i*sz)+",0)"; }
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	64	function scale(p) { return [p[0]sz, p[1]sz]; }
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	65
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	66	var svg = d3.select("body")
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	67	.append("svg:svg")
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	68	.attr("width", dw*sz)
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	69	.attr("height", dh*sz);
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	70
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	71	var g = svg.selectAll("g")
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	72	.data(data)
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	73	.enter().append("svg:g")
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	74	.attr("transform", translateY);
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	75
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	76	g.selectAll("rect")
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	77	.data(function(d) { return d; })
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	78	.enter().append("svg:rect")
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	79	.attr("transform", translateX)
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	80	.attr("width", sz)
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	81	.attr("height", sz)
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	82	.attr("class", function(d) { return "d"+d; })
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	83	.on("mouseover", mouseover);
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	84
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	85	contour(grid);
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	86
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	87	function contour(grid, start) {
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	88	svg.selectAll("path")
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	89	.data([d3.geom.contour(grid, start).map(scale)])
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	90	.attr("d", function(d) { return "M" + d.join("L") + "Z"; })
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	91	.enter().append("svg:path")
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	92	.attr("d", function(d) { return "M" + d.join("L") + "Z"; });
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	93	}
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	94
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	95	function mouseover(d,i) {
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	96	var s = undefined;
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	97	grid = fn[d];
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	98	if (d > 0) {
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	99	// map mouse to grid coords, then find left edge
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	100	var p = d3.svg.mouse(svg[0][0]);
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	101	s = [Math.floor(p[0]/sz), Math.floor(p[1]/sz)];
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	102	while (grid(s[0]-1,s[1])) s[0]--;
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	103	}
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	104	contour(grid, s);
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	105	}
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	106	</script>
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	107	</body>
c0b4a8b5a012 add toolkit.html + démonstrateurs Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr> parents: diff changeset	108	</html>

author	Nicolas Sauret <nicolas.sauret@iri.centrepompidou.fr>
	Thu, 10 Apr 2014 14:20:23 +0200
changeset 47	c0b4a8b5a012
permissions	-rw-r--r--