almccon/.block

## .block
license: mit

## README.md

      
    Raw
  

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

  
## bellingham.geojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              bellingham.geojson
            
          
      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.
      
    
## bellingham_coast.geojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              bellingham_coast.geojson
            
          
      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.
      
    
## comparisons.csv

          
            name
            lon
            lat

            
              vienna
              16.379241943359375
              48.211404849620486

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

## thumbnail.png

      
    Raw
  

              thumbnail.png
            
          
## vienna.geojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              vienna.geojson
            
          
      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.
      
    
## vienna_bak.geojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              vienna_bak.geojson
            
          
      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.
      
    
## vienna_coast.geojson

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              vienna_coast.geojson
            
          
      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.
	<!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>