--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/toolkit/javascript/d3/examples/contour/contour.html Thu Apr 10 14:20:23 2014 +0200
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
+ <title>Contour</title>
+ <script type="text/javascript" src="../../d3.js"></script>
+ <script type="text/javascript" src="../../d3.geom.js"></script>
+ <style type="text/css">
+svg {
+ border: solid 1px #aaa;
+}
+path {
+ stroke: red;
+ stroke-width: 2px;
+ fill: none;
+}
+rect {
+ fill: lightsteelblue;
+ stroke: #eee;
+ stroke-width: 2px;
+}
+rect.d1 {
+ fill: steelblue;
+}
+rect.d2 {
+ fill: darkblue;
+}
+ </style>
+ </head>
+ <body>
+ <script type="text/javascript">
+
+function grid0(x,y) {
+ if (x < 0 || y < 0 || x >= dw || y >= dh) return 0;
+ return data[y][x];
+}
+function grid1(x,y) {
+ if (x < 0 || y < 0 || x >= dw || y >= dh) return 0;
+ return data[y][x]==1;
+}
+function grid2(x,y) {
+ if (x < 0 || y < 0 || x >= dw || y >= dh) return 0;
+ return data[y][x]==2;
+}
+
+var data = [[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+ [0, 0, 0, 2, 2, 2, 0, 0, 0, 0],
+ [0, 0, 0, 2, 2, 2, 2, 0, 0, 0],
+ [0, 0, 2, 2, 2, 2, 2, 2, 0, 0],
+ [0, 0, 2, 2, 2, 2, 2, 2, 2, 0],
+ [0, 0, 2, 1, 0, 0, 2, 2, 2, 0],
+ [0, 0, 1, 1, 0, 0, 2, 2, 2, 0],
+ [0, 0, 0, 0, 1, 1, 2, 2, 0, 0],
+ [0, 0, 0, 0, 1, 2, 2, 2, 0, 0],
+ [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]],
+ fn = [grid0, grid1, grid2],
+ dw = data[0].length,
+ dh = data.length;
+ sz = 30,
+ grid = grid0;
+
+function translateY(d, i) { return "translate(0,"+(i*sz)+")"; }
+function translateX(d, i) { return "translate("+(i*sz)+",0)"; }
+function scale(p) { return [p[0]*sz, p[1]*sz]; }
+
+var svg = d3.select("body")
+ .append("svg:svg")
+ .attr("width", dw*sz)
+ .attr("height", dh*sz);
+
+var g = svg.selectAll("g")
+ .data(data)
+ .enter().append("svg:g")
+ .attr("transform", translateY);
+
+g.selectAll("rect")
+ .data(function(d) { return d; })
+ .enter().append("svg:rect")
+ .attr("transform", translateX)
+ .attr("width", sz)
+ .attr("height", sz)
+ .attr("class", function(d) { return "d"+d; })
+ .on("mouseover", mouseover);
+
+contour(grid);
+
+function contour(grid, start) {
+ svg.selectAll("path")
+ .data([d3.geom.contour(grid, start).map(scale)])
+ .attr("d", function(d) { return "M" + d.join("L") + "Z"; })
+ .enter().append("svg:path")
+ .attr("d", function(d) { return "M" + d.join("L") + "Z"; });
+}
+
+function mouseover(d,i) {
+ var s = undefined;
+ grid = fn[d];
+ if (d > 0) {
+ // map mouse to grid coords, then find left edge
+ var p = d3.svg.mouse(svg[0][0]);
+ s = [Math.floor(p[0]/sz), Math.floor(p[1]/sz)];
+ while (grid(s[0]-1,s[1])) s[0]--;
+ }
+ contour(grid, s);
+}
+ </script>
+ </body>
+</html>