Flow Map

Müll Projekt

HTML

<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<div id='map'>
</div>

CSS

.stroke {
  fill: none;
  stroke: #000;
  stroke-width: 3px;
}
#map {
    height: 550px;
}

.fill {
  fill: #fff;
}

.graticule {
  fill: none;
  stroke: #777;
  stroke-width: .5px;
  stroke-opacity: .5;
}

.land {
  fill: #aaa;
}

.boundary {
  fill: none;
  stroke: #fff;
  stroke-width: .5px;
}

.arc {
	stroke: #000;
	fill:	rgba(250,0,0,0.5);
	stroke-width: 1;
}

JavaScript

var svg,
		width = 900,
    height = 700;

var projection = d3.geo.mercator()
		.rotate([-10,0]).scale(height/5).translate([width / 2, height / 2]).clipExtent([[0,0.1*height],[width,height*0.85]]);

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

var graticule = d3.geo.graticule();

var path = d3.geo.path()
	.projection(projection);
 
d3.json("https://gist.githubusercontent.com/vigorousnorth/e95a867b10de1239ab3a/raw/12ea148cc64688fcb02fe0d31c3a91a7b962a920/world-110m.json", function(error, world) {

	var svg = d3.select("#map").append("svg")
    .attr("width", width)
    .attr("height", height);
    
	svg.append("path")
		.datum(graticule)
		.attr("class", "graticule")
		.attr("d", path);
	
	svg.insert("path", ".graticule")
		.datum(topojson.feature(world, world.objects.land))
		.attr("class", "land")
		.attr("d", path);

	svg.insert("path", ".graticule")
		.datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
		.attr("class", "boundary")
		.attr("d", path);
		
	drawarcs(svg);

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

});

var tradedata = [
  {
 			destination: {latitude: -23.3, longitude: 132.2},
 			name: 'Australia',
 			trade: 5
 	},{
      destination: { latitude: -28.5, longitude: 24.7 },
      name: 'South Africa',
      trade : 6
  },{
      destination: { latitude: 31.7, longitude: 106.2 },
      name: 'China',
      trade : 16
  },{
      destination: { latitude: 36.1, longitude: 127.7 },
      name: 'S. Korea',
      trade: 8
  },{
      destination: { latitude: 53.6, longitude: -2.3},
      name: 'Great Britain',
      trade: 12
  },{
      destination: { latitude: 61.2, longitude: 9.7144087 },
      name: 'Norway',
      trade: 2
  },{
      destination: { latitude: 61.6, longitude: 15.4 },
      name: 'Sweden',
      trade: 5
  },{
      destination: { latitude: 64.93, longitude: -19.02},
      name: 'Iceland',
      trade: 15
  },{
      destination: { latitude: 20.9, longitude: -101.5...