espinielli/README.md

## README.md

      
    Raw
  

              README.md
            
          
    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.

  
## index.html
<!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="http://en.wikipedia.org/wiki/Bathymetry">Bathymetry</a> of <a href="http://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="http://d3js.org/d3.v3.min.js"></script>
  <script src="http://d3js.org/topojson.v1.min.js"></script>
  <script src="http://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>

## lm.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              lm.json
            
          
      Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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="http://en.wikipedia.org/wiki/Bathymetry">Bathymetry</a> of <a href="http://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="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/topojson.v1.min.js"></script>
	<script src="http://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>