|
// Generated by CoffeeScript 1.10.0 |
|
(function() { |
|
var color, contents, graticule, height, lod, path, projection, radius, svg, width, zoom, zoomable_layer; |
|
|
|
svg = d3.select('svg'); |
|
|
|
width = svg.node().getBoundingClientRect().width; |
|
|
|
height = svg.node().getBoundingClientRect().height; |
|
|
|
zoomable_layer = svg.append('g'); |
|
|
|
zoom = d3.zoom().scaleExtent([-Infinity, Infinity]).on('zoom', function() { |
|
zoomable_layer.attrs({ |
|
transform: d3.event.transform |
|
}); |
|
zoomable_layer.selectAll('.label > text').attrs({ |
|
transform: "scale(" + (1 / d3.event.transform.k) + ")" |
|
}); |
|
return lod(d3.event.transform.k); |
|
}); |
|
|
|
svg.call(zoom); |
|
|
|
projection = d3.geoWinkel3().rotate([0, 0]).center([0, 0]).scale((width - 3) / (2 * Math.PI)).translate([width / 2, height / 2]); |
|
|
|
path = d3.geoPath(projection); |
|
|
|
graticule = d3.geoGraticule(); |
|
|
|
radius = d3.scaleSqrt().range([0, 50]); |
|
|
|
color = d3.scaleOrdinal(d3.schemeCategory10).domain(['North America', 'Africa', 'South America', 'Asia', 'Europe', 'Oceania']); |
|
|
|
zoomable_layer.append('path').datum(graticule.outline()).attrs({ |
|
"class": 'sphere_fill', |
|
d: path |
|
}); |
|
|
|
contents = zoomable_layer.append('g'); |
|
|
|
zoomable_layer.append('path').datum(graticule).attrs({ |
|
"class": 'graticule', |
|
d: path |
|
}); |
|
|
|
zoomable_layer.append('path').datum(graticule.outline()).attrs({ |
|
"class": 'sphere_stroke', |
|
d: path |
|
}); |
|
|
|
d3.json('ne_50m_admin_0_countries.topo.json', function(geo_data) { |
|
var countries, countries_data, en_countries, en_labels, labels, labels_data; |
|
countries_data = topojson.feature(geo_data, geo_data.objects.countries).features; |
|
labels_data = []; |
|
countries_data.forEach(function(d) { |
|
var subpolys; |
|
if (d.geometry.type === 'Polygon') { |
|
d.area = d3.geoArea(d); |
|
d.main = d; |
|
return labels_data.push(d); |
|
} else if (d.geometry.type === 'MultiPolygon') { |
|
subpolys = []; |
|
d.geometry.coordinates.forEach(function(p) { |
|
var sp; |
|
sp = { |
|
coordinates: p, |
|
properties: d.properties, |
|
type: 'Polygon' |
|
}; |
|
sp.area = d3.geoArea(sp); |
|
return subpolys.push(sp); |
|
}); |
|
d.main = subpolys.reduce((function(a, b) { |
|
if (a.area > b.area) { |
|
return a; |
|
} else { |
|
return b; |
|
} |
|
}), subpolys[0]); |
|
return labels_data = labels_data.concat(subpolys); |
|
} |
|
}); |
|
countries = contents.selectAll('.country').data(countries_data); |
|
en_countries = countries.enter().append('path').attrs({ |
|
"class": 'country', |
|
d: path |
|
}); |
|
labels = contents.selectAll('.label').data(labels_data); |
|
en_labels = labels.enter().append('g').attrs({ |
|
"class": 'label', |
|
transform: function(d) { |
|
var ref, x, y; |
|
ref = projection(d3.geoCentroid(d)), x = ref[0], y = ref[1]; |
|
return "translate(" + x + "," + y + ")"; |
|
} |
|
}); |
|
en_labels.classed('no_iso_code', function(d) { |
|
return d.properties.iso_a2 === '-99'; |
|
}); |
|
en_labels.append('text').text(function(d) { |
|
return d.properties.name_long; |
|
}).attrs({ |
|
dy: '0.35em' |
|
}); |
|
lod(1); |
|
return d3.csv('population.csv', function(data) { |
|
var bubbles, en_bubbles, index, population_data; |
|
index = {}; |
|
data.forEach(function(d) { |
|
return index[d['Country Code']] = d; |
|
}); |
|
population_data = []; |
|
countries_data.forEach(function(d) { |
|
if (d.properties.iso_a3 in index) { |
|
return population_data.push({ |
|
country: d, |
|
value: +index[d.properties.iso_a3]['2016'] |
|
}); |
|
} |
|
}); |
|
radius.domain([ |
|
0, d3.max(population_data, function(d) { |
|
return d.value; |
|
}) |
|
]); |
|
population_data.sort(function(a, b) { |
|
return d3.descending(a.value, b.value); |
|
}); |
|
bubbles = contents.selectAll('.bubble').data(population_data); |
|
en_bubbles = bubbles.enter().append('circle').attrs({ |
|
"class": 'bubble', |
|
fill: function(d) { |
|
return color(d.country.properties.continent); |
|
}, |
|
r: function(d) { |
|
return radius(d.value); |
|
}, |
|
transform: function(d) { |
|
var ref, x, y; |
|
ref = projection(d3.geoCentroid(d.country.main)), x = ref[0], y = ref[1]; |
|
return "translate(" + x + "," + y + ")"; |
|
} |
|
}); |
|
return en_bubbles.append('title').text(function(d) { |
|
return d.country.properties.name_long + "\nPopulation: " + (d3.format(',')(d.value)); |
|
}); |
|
}); |
|
}); |
|
|
|
lod = function(z) { |
|
return zoomable_layer.selectAll('.label').classed('hidden', function(d) { |
|
return d.area < Math.pow(0.2 / z, 2); |
|
}); |
|
}; |
|
|
|
}).call(this); |