Filling bathymetric contours

Lake Michigan

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

See also San Francisco contour from Liji Jinaraj.

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.

<!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 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>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

Modified http://d3js.org/queue.v1.min.js to a secure url

https://d3js.org/d3.v3.min.js

https://d3js.org/topojson.v1.min.js

https://d3js.org/queue.v1.min.js