D3 Examples - Filling bathymetric contours

Lake Michigan

Bathymetry of Lake Michigan modified after the original work of Andrew Thornton.

Changes compared to original work

Derived topojson file (with included ZVALUE)

  $ ogr2ogr -f GeoJSON -select ZVALUE,DEPTH michigan.json data/Lake_Michigan_Contours.shp
  $ topojson --force-clockwise -p depth=DEPTH -p depth -p zvalue=ZVALUE -p zvalue -o lm.json michigan.json

Experiment with filling the bathymetric contours using zvalue (limited to 40m and 150m depths): THIS DOES NOT WORK (request for help to d3.js community)

Shape files from NOAA.

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.michigan {
  fill: none;
  stroke-width: 0.5px;
}
.michiganfilled {
  stroke-width: 0.5px;
}
.axis path, .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
#loading {
  text-align: center;
  position: absolute;
  padding-left: 200px;
  padding-top: 100px;
  height: 20px;
  z-index: 999;
  font-size: 30px;
}
.hidden{
  display: none;
}
</style>
​
<body>
  <p><a href="https://en.wikipedia.org/wiki/Bathymetry">Bathymetry</a> of <a href="https://www.ngdc.noaa.gov/mgg/greatlakes/michigan.html">Lake Michigan</a> (limited to 40m and 150m for performance reasons): contour (left) and filled (right).</p>
  <div id="map"><div id="loading">Loading...</div></div>
  </div>
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <script src="https://d3js.org/topojson.v1.min.js"></script>
  <script src="https://d3js.org/queue.v1.min.js"></script>
  <script>
  var width = 700,
    height = 620;
​
​
  var svg = d3.select("#map")
    .append("svg")
      .attr("width", width)
      .attr("height", height)
    .append("g");
​
  var loading = d3.select("#loading");
​
  var projection = d3.geo.mercator()
      .center([-86.00, 43.84])
      .scale(6000)
      .translate([width / 2, height / 2]);
​
  var path = d3.geo.path()
      .projection(projection);
​
  var colorScale = d3.scale.linear()
    .range(["#ff0000", "#0000ff"])
    .domain([0, 275])
    .interpolate(d3.interpolateHsl);
​
  var y = d3.scale.ordinal()
    .domain([0, 25, 50, 100, 150, 200, 250, 300])
    .rangeBands([0, 240]);
​
  var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");
​
  var legend = svg.append("g")
    .attr("transform", "translate(40,20)");
​
  legend.append("text")
    .text("Depth (m)")
    .attr("transform", "translate(-20,-5)")
    ;
​
  legend.selectAll(".key").data([0, 25, 50, 100, 150, 200, 250, 300])
    .enter().append("rect")
    .attr("height", 30)
    .attr("width", 23)
    .attr("y", function(d, i) {
      return y(d);
    })
    .attr("x", 0)
    .attr("fill", function(d) {
      return colorScale(d);
    })
    .attr("stroke", "white");
​
  legend.append("g")
    .attr("transform", "translate(-3,0)")
    .attr("class", "axis")
    .call(yAxis);
​
  queue().defer(d3.json,"lm.json")
    .await(ready);
​
  function ready(error, michigan) {
    loading.classed("hidden", true);
​
    var features = topojson.feature(michigan, michigan.objects.michigan).features;
    var fea = features
      // .filter(function(d){return [115].indexOf(d.properties.depth) != -1;})
      .filter(function(d){return (d.properties.depth === 40 || d.properties.depth === 150);})
      .sort(function(a, b) {
        return (a.properties.zvalue < b.properties.zvalue) ? -1 : (a.properties.zvalue > b.properties.zvalue) ? 1 : 0;
      });
​
    var lake = svg.append("g").attr("transform","translate(-80, 10)");
    lake.selectAll(".michigan")
        .data(fea)
        .enter()
        .append("path")
        .attr("class", "michigan")
        .attr("d", path)
        .attr("stroke", function (d) {return colorScale(d.properties.depth);});
​
​
    var lakefilled = svg.append("g").attr("transform","translate(200, 10)");
    lakefilled.selectAll(".michiganfilled")
        .data(fea)
        .enter()
        .append("path")
        .attr("class", "michiganfilled")
        .attr("d", path)
        .attr("fill", function (d) {return colorScale(d.properties.depth);})
        .attr("stroke", function (d) {return colorScale(d.properties.depth);});
​
  }
  </script>
    