Old school D3 from simpler times

All examples By author By category About

zachmargolis

Full window Github gist

SF Shoreline

SF Shoreline

Found some nice GIS files for the SF shoreline.

Using a neat tool called mapshaper, it appears these files generate a super nice map like this:

sf shoreline

However instead we get this:

sf shoreline

and it loads really slowly

Debug Steps

Looking at the GeoJSON outputted by the topojson.mesh call, the resulting coordinates seem to be super weird. We would expect things to be roughly in the ballpark of (-122, 37) but somehow we have things near (6,006,080, 2,123,063) instead.

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js" charset="utf-8"></script>
    <title>SF Shoreline</title>

<style text="text/css">
.land {
  fill: none;
  stroke: #000;
  stroke-width: .5px;
}
    </style>
  </head>
  <body>
    <script type="text/javascript">
var alcatrazCenter = [-122.42293660528958, 37.81796563882381];

var width = 800,
    height = 400;

var svg = d3.select('body')
  .append('svg')
    .attr('height', height)
    .attr('width', width);

d3.json('sfshore.json', function(error, sfshore) {
  if (error) { throw error; }

// how to center the thing
  // https://groups.google.com/forum/#!topic/d3-js/lR7GGswygI8
  var projection = d3.geo.albers()
      .rotate([-alcatrazCenter[0], 0])
      .center([ 0, alcatrazCenter[1] ])
      .scale(1070 * 512)
      .translate([width / 2, height / 2])
      .precision(.1);

var path = d3.geo.path()
    .projection(projection);

// Using either of these does not give the expected result
  function exteriorBoundary(a, b) { return a === b; }
  function interiorBoundary(a, b) { return a !== b; }

svg.append('path')
    .datum(topojson.mesh(sfshore, sfshore.objects.sfshore))
    .attr('class', 'land')
    .attr('d', path);
});
    </script>
  </body>
</html>

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js" charset="utf-8"></script>
    <title>SF Shoreline</title>
​
    <style text="text/css">
.land {
  fill: none;
  stroke: #000;
  stroke-width: .5px;
}
    </style>
  </head>
  <body>
    <script type="text/javascript">
var alcatrazCenter = [-122.42293660528958, 37.81796563882381];
​
var width = 800,
    height = 400;
​
var svg = d3.select('body')
  .append('svg')
    .attr('height', height)
    .attr('width', width);
​
d3.json('sfshore.json', function(error, sfshore) {
  if (error) { throw error; }
​
  // how to center the thing
  // https://groups.google.com/forum/#!topic/d3-js/lR7GGswygI8
  var projection = d3.geo.albers()
      .rotate([-alcatrazCenter[0], 0])
      .center([ 0, alcatrazCenter[1] ])
      .scale(1070 * 512)
      .translate([width / 2, height / 2])
      .precision(.1);
​
  var path = d3.geo.path()
    .projection(projection);
​
  // Using either of these does not give the expected result
  function exteriorBoundary(a, b) { return a === b; }
  function interiorBoundary(a, b) { return a !== b; }
​
  svg.append('path')
    .datum(topojson.mesh(sfshore, sfshore.objects.sfshore))
    .attr('class', 'land')
    .attr('d', path);
});
    </script>
  </body>
</html>
​
    

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js