D3 Examples - d3 topological simplification introspection

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <title>Topological line simplification segments</title>
    <script src="https://d3js.org/d3.v2.min.js?v2.10.3"></script>
    <script src="simplify.js"></script>
    <style type="text/css">
​
      #container {
        width: 800px;
        margin: 1em auto;
      }
​
      #map {
        height: 450px;
        background: #f8f8f8;
        margin: 1em auto;
      }
​
      #map svg {
        border: 1px solid #999;
      }
​
      #area {
        display: block;
        width: 100%;
      }
​
      #states .state {
        fill: #fff;
        stroke: #ccc;
        stroke-width: .25;
      }
​
      #states .edge path {
        fill: none;
        stroke-width: 1;
        stroke-opacity: .2;
      }
​
      #states .circle {
        fill: #000;
        fill-opacity: .5;
        stroke: none;
      }
​
    </style>
  </head>
  <body>
    <div id="container">
      <div id="map">
      </div>
      <input id="area" type="range" min="0" max="1000" step="10">
    </div>
    <script>
​
      var map = d3.select("#map"),
          width = map.property("offsetWidth"),
          height = map.property("offsetHeight"),
          minArea = location.search
            ? +location.search.substr(1) || 0
            : 0,
          range = d3.select("#area")
            .property("value", minArea)
            .on("change", function() {
              minArea = +this.value;
              update();
            });
​
      var zoom = d3.behavior.zoom()
        // .translate([-80, 10])
        .translate([-1841, -526])
        .scale(3.5)
        .scaleExtent([0.5, 4.0])
        .on("zoom", updateZoom);
​
      function updateZoom() {
        var scale = zoom.scale();
        g.attr("transform", "translate(" + zoom.translate() + ") scale(" + [scale, scale] + ")");
      }
​
      var svg = map.append("svg")
        .attr("width", width)
        .attr("height", height)
        .call(zoom);
​
      var g = svg.append("g")
        .attr("id", "states");
​
      updateZoom();
​
      var proj = d3.geo.albers(),
          linear = function(c) {
            return [c[0], c[1]];
          };
​
      var path = d3.geo.path()
        .projection(linear);
​
      var simplify = d3.simplify()
        .topology(true)
        .projection(proj)
        .area(minArea);
​
      var collection;
      d3.json("us-states.json", function(us) {
​
        /*
        var ignore = [
          "Alaska",
          "Hawaii",
          "Guam",
          "Puerto Rico"
        ];
        us.features = us.features.filter(function(state) {
          return ignore.indexOf(state.properties.name) === -1;
        });
        */
​
        var stateNames = [
          "Illinois",
          "Indiana",
          "Ohio",
          "Kentucky"
        ];
        us.features = us.features.filter(function(state) {
          return stateNames.indexOf(state.properties.name) > -1;
        });
​
        collection = us;
        update();
      });
​
      function update() {
        // console.log("minArea:", minArea);
​
        var simplified = simplify
          .area(minArea)
          .project(copy(collection));
​
        // XXX: you have to do this to "apply" the simplification,
        // or call path(simplify(d)) in side the "d" setter below
        simplified = simplify(simplified);
​
        var states = g.selectAll("path.state")
          .data(simplified.features, function(d) {
            return d.id;
          });
​
        states.enter()
          .append("path")
            .attr("class", "state")
            .attr("id", function(d) {
              return d.properties.name;
            })
            .append("title")
              .text(function(d) {
                return d.properties.name;
              });
​
        states.exit().remove();
​
        states.attr("d", path);
​
        // topology analysis
        var edges = getEdges(simplified.features, simplified.topology);
        console.log("edges:", edges);
​
        var color = d3.scale.linear()
          .domain([0, edges.length - 1])
          .range(["#00f", "#f00"]);
​
        var eg = g.selectAll("g.edge")
          .data(edges, function(d) {
            return d.id;
          });
​
        var enter = eg.enter()
          .append("g")
            .attr("class", "edge")
            .attr("id", function(d) {
              return "edge" + d.id;
            });
​
        eg.exit().remove();
​
        enter.append("path");
​
        var dots = eg.selectAll("circle")
          .data(function(d) {
            return d.coords;
          });
​
        dots.enter()
          .append("circle")
            .attr("class", "point")
            .attr("r", .5);
​
        dots.exit().remove();
​
        dots.attr("cx", function(d) {
            return d[0];
          })
          .attr("cy", function(d) {
            return d[1];
          });
​
        var line = d3.svg.line(),
            lines = eg.select("path")
              .attr("stroke", function(d, i) {
                return color(i);
              })
              .attr("d", function(d) {
                return line(d.coords);
              });
      }
​
      function getEdges(features, topo) {
        var edgesById = {};
        console.log("topo:", topo);
        features.forEach(function(feature) {
          // get all the rings
          var rings = getRings(feature.geometry);
          rings.forEach(function(ring) {
            // remember the last edge
            var lastEdge;
            ring.forEach(function(coord, i) {
              var coord = coord.slice(0, 2),
                  key = coord.join(","),
                  id = topo.idByPoint[key];
​
              // shared coords are always solo,
              // and get pushed onto the last edge
              if (topo.sharedPoints[key] && lastEdge) {
                lastEdge.coords.push(coord);
                return;
              }
​
              var edge;
              // if we have an edge with this id...
              if (edgesById.hasOwnProperty(id)) {
                edge = edgesById[id];
                // if the edge doesn't already reference this feature
                if (edge.features.indexOf(feature) === -1) {
                  // add it to the features list
                  edge.features.push(feature);
                }
                // if the edge doesn't alreay contain this coord
                if (!edge.seen.hasOwnProperty(key)) {
                  // push it onto the list
                  edge.coords.push(coord);
                  // and mark it as seen
                  edge.seen[key] = 1;
                }
              } else {
                // otherwise, create the new edge
                edge = edgesById[id] = {
                  features: [feature],
                  coords: [coord],
                  seen: {}
                };
​
                // if the last edge has the same id...
                if (lastEdge && lastEdge.id === id) {
                  // get its last coordinate and key
                  var prev = lastEdge.coords[lastEdge.coords.length - 1],
                      prevKey = prev.join(",");
                  // and if the edge doesn't already contain that coord
                  if (!edge.seen.hasOwnProperty(prevKey)) {
                    // push it onto the list
                    edge.coords.unshift(prev);
                    // and mark it as seen
                    edge.seen[prevKey] = 1;
                  }
                }
                edge.seen[key] = 1;
              }
​
              lastEdge = edge;
            });
          });
        });
​
        for (var id in edgesById) {
          var edge = edgesById[id];
        }
​
        return d3.entries(edgesById)
          .filter(function(entry) {
            return true; // entry.value.coords.length > 1;
          })
          .map(function(entry) {
            return {
              id: entry.key,
              features: entry.value.features,
              coords: d3.values(entry.value.coords)
            };
          });
      }
​
      function getRings(geometry) {
        var rings = [];
        switch (geometry.type) {
          case "Line":
          case "LineString":
            return geometry.coordinates;
​
          case "Polygon":
            geometry.coordinates.forEach(function(ring) {
              rings.push(ring);
            });
            break;
​
          case "MultiPolygon":
            geometry.coordinates.forEach(function(poly) {
              poly.forEach(function(ring) {
                rings.push(ring);
              });
            });
            break;
​
          // TODO: support other geometry types:
          // GeometryCollection
        }
        return rings;
      }
​
      function copy(d) {
        return d instanceof Array
          ? d.map(copy)
          : (typeof d === "number" || typeof d === "string")
            ? d
            : copyObject(d);
      }
​
      function copyObject(d) {
        var o = {};
        for (var k in d) o[k] = copy(d[k]);
        return o;
      }
​
    </script>
  </body>
</html>
​
    