D3 Examples - Vornoi map connected countries

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
  
  
.states {
  fill: #ffffff;
}
​
.country-borders {
  fill: none;
  stroke: #fed6d6;
  stroke-width: 1px;
  stroke-linejoin: round;
  stroke-linecap: round;
}
​
.airport-arcs {
  display: none;
  fill: none;
  stroke: #000;
}
​
.airport-cell {
  fill: none;
  pointer-events: all;
}
  
  
.airport-arcs-incoming {  
  display: none;
  fill: none;
  stroke: #c9c9c9;
}
​
.airport-cell-incoming {
  fill: none;
  pointer-events: all;
}
  
  
 
​
.airports circle {
  fill: steelblue;
  stroke: #fff;
  pointer-events: none;
}
​
.airport:hover .airport-arcs {
  display: inline;
}
  
  .airport:hover .airport-arcs-incoming {
  display: inline;
}
​
svg:not(:hover) .airport-cell {
  stroke: none;
  stroke-opacity: .2;
  }
  
svg:not(:hover) .airport-cell-incoming {
  stroke: #000;
  stroke-opacity: .2;
   }
  
  
</style>
<body>
  <div id"chart"></div>
  
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/queue.v1.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>
​
var margin = {top: 10, right: 20, bottom: 35, left: 45},
    width = 595 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
​
​
var center = [width / 2, height / 2];
​
​
var defaultFill = "#e0e0e0";
​
​
var numberFormat = d3.format(",.0f"),
    numberFormatDetailed = d3.format(",.1f");
    numberFormatMoreDetailed = d3.format(",.2f");
​
​
// var countryById = d3.map();
// // var commuteById = d3.map();
  
  
var countryById = d3.map();
​
​
var projection = d3.geo.mercator()
    .scale(90)
    .translate([width / 2 -20, height / 2 + 40])
    .precision(.1);
​
// var projection = d3.geo.robinson()
//         .scale(90)
//         .translate([width / 2 -20, height / 2 + 40])
//         .precision(.1);
​
var path = d3.geo.path()
        .projection(projection);
// var zoom = d3.behavior.zoom()
//   .scaleExtent([1, 8])
//   .on("zoom", move);
​
var legendWidth = width * 0.8,
      legendHeight = 10;
​
// Color scale
// var color = d3.scale.threshold()
//               .domain([19, 34, 49, 69]).range(['#b2182b','#ef8a62','#fddbc7','#67a9cf','#2166ac'])
​
color = d3.scale.category10();
​
​
​
// define the voronoi
var voronoi = d3.geom.voronoi()
    .x(function(d) { return d.x; })
    .y(function(d) { return d.y; })
    .clipExtent([[0, 0], [width, height]])
​
// define svg
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
  
​
queue()
    .defer(d3.json, "world-110m.json")
    .defer(d3.csv, "airports2.csv")
    .defer(d3.csv, "flights2.csv")
    .defer(d3.csv, "countrydata2.csv", typeAndSet)
    .await(ready);
​
  
// load all in
function ready(error, world, airports, flights, country) {
  if (error) throw error;
  
//   console.log(country)
  
  
  var airportById = d3.map(),  // d3 map()
      positions = [];
  
  airports.forEach(function(d) {
    airportById.set(d.iata, d);   // set the value for each item
    d.outgoing = [];
    d.incoming = [];
    d.count = [];
  });
  
  flights.forEach(function(flight) {
    var source = airportById.get(flight.origin),
        target = airportById.get(flight.destination),
        val = airportById.get(flight.count),
        link = {source: source, target: target, val: val};
    source.outgoing.push(link);
    target.incoming.push(link);
  });
  
  
  airports = airports.filter(function(d) {
    if (d.count = Math.max(d.incoming.length, d.outgoing.length)) {
      d[0] = +d.longitude;
      d[1] = +d.latitude;
      var position = projection(d);
      d.x = position[0];
      d.y = position[1];
      return true;
    }
  });
  
//   console.log()
  
voronoi(airports)
.forEach(function(d) { d.point.cell = d; });
​
svg.append("path").classed("countries", true)
.datum(topojson.merge(world, world.objects.countries.geometries))
.attr("class", "states")
.attr("d", path)
​
​
​
  
  
svg.append("path")
.datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
.attr("class", "country-borders")
.attr("d", path);
​
  
var airport = svg.append("g")
.attr("class", "airports")
.selectAll("g")
.data(airports.sort(function(a, b) { return b.count - a.count; }))
.enter().append("g")
.attr("class", "airport");
​
​
​
airport.append("path")
.attr("class", "airport-cell")
.attr("d", function(d) { return d.cell.length ? "M" + d.cell.join("L") + "Z" : null; });
​
  
airport.append("g")
.attr("class", "airport-arcs")
.selectAll("path")
.data(function(d) { return d.outgoing; })
.enter().append("path")
.attr("d", function(d) { return path({type: "LineString", coordinates: [d.source, d.target]}); })
.attr("stroke", "red")
// .attr("stroke-width", function(d, i) { return parseInt(Math.sqrt(d.count)/10) })
  .attr("stroke-dasharray", function (d) {
  return "2, 4"
})
//   .attr("stroke-dasharray", function (d) {
//   return "1, " + d.count/20
// })
// .style("stroke-width", function(d, i) { if (d.count > 500) {return 2} else if (d.count < 500) {return 5} });
  .style("stroke-width", 4);
​
​
​
​
airport.append("g")
  .attr("class", "airport-arcs-incoming")
.selectAll("path")
  .data(function(d) { return d.incoming; })
.enter().append("path")
  .attr("d", function(d) { return path({type: "LineString", coordinates: [d.target, d.source]}); })
  .attr("stroke", "blue")
  .attr("stroke-dasharray", "1, 1")
  // .style("stroke-width", function(d, i) { return parseInt(Math.sqrt(d.val)) })
  .style("stroke-width", 4);
​
  
  
airport.append("circle").classed("circlesCountries", true)
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
      .attr("r", 1);
//       .attr("r", function(d, i) { return Math.sqrt(d.count); });
​
updateClasses()
​
  
}
  
​
function updateClasses() {
svg.selectAll(".states")
    .style("fill", function(d) {
      return "#F0F8FF"
      // console.log(d.id, countryById.get(d.id))
      // console.log(countryById.get(d.id) && color(countryById.get(d.id).Year2015))
      return countryById.get(d.id) && color(countryById.get(d.id).Year2015);
    });
​
}
  
  
  function typeAndSet(d) {
​
          d.Year2015 = +d.Year2015;
//           d.Year2011 = +d.Year2011;
//           d.change = +d.change;
//           v.ISO_code = +v.ISO_code;
​
          countryById.set(+d.ISO_code, d);
//           console.log(countryById.set(+v.ISO_code, v))
    
//     console.log(d)
    return d
    
    
      }
​
</script>
​
    