block by almccon cb56fc2bd64aea9f3a1c027c712c2766

Orthographic Overlays

Full Screen

Using an orthographic projection to overlay the Mare Island Strait and San Pablo Bay (drawn in magenta) with various water bodies around the world (drawn in cyan). The two maps are drawn with the “multiply” blend mode, so overlapping water areas become blue.

Best viewed in a full browser window (click the “Open” text) so you can scroll down and see more overlays.

Also note that it might take a long time to load.

All data © OpenStreetMap contributors

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  background: #fff;
  font-family: Helvetica, Arial, sans-serif;
  font-size: small;
}

</style>
<body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script src="//d3js.org/d3-queue.v3.min.js"></script>
<script>

var width = 960,
    height = 960;

var projection = d3.geoOrthographic()
    .scale(1e5)
    .translate([width / 2, height / 2])
    .clipAngle(90)
    .precision(.1);

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

var vallejoCoords = [-122.2661591,38.10592621];

d3.queue()
  .defer(d3.csv,"comparisons.csv")
  .defer(d3.json,"vallejo.geojson")
  .defer(d3.json,"vallejo_coast.geojson")
  .awaitAll(function(error, outerdata) {

  var comparisons = outerdata[0];
  var vallejo = outerdata[1];
  var vallejo_coast = outerdata[2];

  if (error) throw error;

  comparisons.forEach(function(comp) {

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

    svg.append("text")
        .attr('x',20)
        .attr('y',20)
        .text(comp.name);

    var comparisonCoords = [comp.lon,comp.lat];

    d3.json(comp.name + ".geojson", function(error, comp_data) {
      if (error) throw error;
      d3.json(comp.name + "_coast.geojson", function(error, comp_coast) {
        if (error) throw error;

        //var comp_data = data[0];
        //var comp_coast = data[1];

        projection.rotate([-comparisonCoords[0],-comparisonCoords[1]]);

        // note, I need to load each feature individually to avoid linestrings
        var comp_g = svg.append("g")
            .style("mix-blend-mode", "multiply");

        comp_g
            .selectAll("path")
          .data(comp_data.features.filter(d => { return d.geometry.type != 'LineString';}))
          .enter()
            .append("path")
            .attr("d", path)
            .attr("stroke", 'none')
            .attr("fill", 'cyan')

        comp_g.append("path")
            .attr("d", path(comp_coast))
            .attr("stroke", 'none')
            .attr("fill", 'cyan')

        projection.rotate([-vallejoCoords[0],-vallejoCoords[1]]);

        var vallejo_g = svg.append("g")
            .style("mix-blend-mode", "multiply");

        vallejo_g
            .selectAll("path")
          .data(vallejo.features.filter(d => { return d.geometry.type != 'LineString';}))
          .enter()
            .append("path")
            .attr("d", path)
            .attr("stroke", 'none')
            .attr("fill", 'magenta')

        vallejo_g.append("path")
            .attr("d", path(vallejo_coast))
            .attr("stroke", 'none')
            .attr("fill", 'magenta')

      });
    });
  });
});

d3.select(self.frameElement).style("height", height + "px");

</script>

bend_coast.geojson

{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
                                                                                
"features": [

]
}

comparisons.csv

name,lon,lat
"venice_italy",12.339556217193602,45.43386135099161
"venice_ca",-118.46621990203856,33.98443489822335
"thames",-0.1192188262939453,51.50778087767913
"seine",2.347254753112793,48.85491750867702
"danube",16.37615203857422,48.213692646648035
"rhine",6.9605255126953125,50.93809444305038
"tyne",-1.6072654724121094,54.968155034807836
"charles",-71.07330322265625,42.366154335320886
"willamette",-122.66921997070312,45.519578948984524
"spree",13.403234481811523,52.51799668655011
"rotterdam",4.469718933105469,51.900647154116314
"chicago",-87.62317657470703,41.88886030788814
"reno",-119.81208801269531,39.524964723682494
"bend",-121.31558418273926,44.058355607728195

danube_coast.geojson

{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
                                                                                
"features": [

]
}

reno_coast.geojson

{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
                                                                                
"features": [

]
}

rhine_coast.geojson

{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
                                                                                
"features": [

]
}

rotterdam_coast.geojson

{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
                                                                                
"features": [

]
}

seine_coast.geojson

{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
                                                                                
"features": [

]
}

spree_coast.geojson

{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
                                                                                
"features": [

]
}

thames_coast.geojson

{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
                                                                                
"features": [

]
}

willamette_coast.geojson

{
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
                                                                                
"features": [

]
}