block by almccon 95cd8ca33304ebc59779f8536ee77688

Vienna and Bellingham

Full Screen

Using an orthographic projection to overlay the city of Bellingham, Washington with Vienna, Austria. The two maps are drawn with the “multiply” blend mode, so overlapping areas become blue.

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 = 500;

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

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

var primaryCoords = [-122.489,48.755];

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

  var comparisons = outerdata[0];
  var primary = outerdata[1];
  var primary_coast = outerdata[2];

  if (error) throw error;

  comparisons
    .filter(function(comp) { return ['vienna'].indexOf(comp.name) != -1;})
    //.filter(function(comp) { return ['venice_italy','thames','seine','danube','rhine','willamette','rotterdam'].indexOf(comp.name) != -1;})
    .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([-primaryCoords[0],-primaryCoords[1]]);

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

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

        primary_g.append("path")
            .attr("d", path(primary_coast))
            .attr("stroke", 'none')
            .attr("fill", 'magenta')

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

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

</script>

bellingham_coast.geojson

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

]
}

comparisons.csv

name,lon,lat
"vienna",16.379241943359375,48.211404849620486

vienna_coast.geojson

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

]
}