Exercise 3

D3

by kmg747

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-geo-projection/2.4.0/d3-geo-projection.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/3.0.2/topojson.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Week 3: Introduction to D3</title>
  </head>
  <body>
    <svg id="map"></svg>
    <div class="tooltip hidden"></div>
  </body>
</html>

CSS

svg {
 border: 1px solid gray; 
}

/* distance circle */
/* start of solution */
.distances {
  stroke: orangered;
  fill: none;
  stroke-width: 2;
}
/* end of solution */

/* airport circle markers */
/* start of solution */
circle {
  fill: steelblue;
  fill-opacity: 0.8;
  stroke: none;
}
/* end of solution */

/* tooltip */
div.tooltip {
      color: #222; 
      background: #fff; 
      border-radius: 3px; 
      box-shadow: 0px 0px 2px 0px #a6a6a6; 
      padding: .2em; 
      text-shadow: #f5f5f5 0 1px 0;
      opacity: 0.9; 
      position: absolute;
      font-family: "Courier New";
      font-size: 11px;
    }

.hidden {
  display: none;
}

/* route for shortest paths*/
/* start of solution */
.route {
  stroke: steelblue;
  fill: none;
  stroke-width: 0.6;
  stroke-opacity: 0.8;
  pointer-events: none;
}
/* end of solution */

JavaScript

// Check out 'Resources' in the sidebar - there are 3 javascript files there:
// d3.min.js: the D3 library
// topojson.js: an extension to GeoJSON that encodes topology
// d3-geo-proojection.min.js: extended geographic projections for D3.js.

// GeoJsON file with map
var worldFile = 'https://rawgit.com/nbiver/1e316d912d0a2000dd1e030368b1cac3/raw/9b771881263d6500b368dd708b53de9d661693e4/worldmap.js';

// GeoJSON dataset with large airports around the world
var airports = 'https://cdn.rawgit.com/nbiver/344fcb3267e0b391ca62d6373cd3887b/raw/503c1fb251d9c0c3162fe2f5a4bb7a37ab485f93/airports2.js';

// width and height for the map
var width = 800,
    height = 450;
            
// zoom functionality for the map
var zoom = d3.zoom()
.scaleExtent([1/4, 9])
.on('zoom', function () {
  d3.selectAll('circle').attr('transform', d3.event.transform);
  d3.selectAll('path').attr('transform', d3.event.transform);
});

// Mercator projection
/* the scale and translate functions transform the raw projected coordinates to a pixel-based coordinate system.*/ 
var projection = d3.geoMercator()
.scale(0.5 * width / Math.PI)
.translate([0.5 * width, 0.5 * height]);


// the geo path function is used to directly convert GeoJSON objects to SVG paths
var path = d3.geoPath()
.projection(projection);


// creating the svg element
var svg = d3.select('#map')
.attr('width', width)
.attr('height', height)
.call(zoom);
  
// Coordinates of large airport nearby your hometown
/* To do:
change these coordinates to the ones from your local airport
*/
var centerCoordinates = [ 8.54917,47.464699 ]; 

/// loading the data to the queue
/* a queue evaluates deferred asynchronous tasks. When all the tasks complete, the queue passes the results to your await callback */  
d3.queue()
  .defer(d3.json, worldFile)
  .defer(d3.json, airports)
  .await(ready);

// function that is executed by the queue
function ready(error, world, airports) {

  // creating the map
  svg.append('path')
    .datum({ type:...