|
<!DOCTYPE html> |
|
<meta charset="utf-8" /> |
|
<style> |
|
body { |
|
max-width: 960px; |
|
position: relative; |
|
} |
|
.legend { |
|
position: absolute; |
|
left: 0; |
|
top: 0; |
|
width: 100px; |
|
height: 100px; |
|
} |
|
.legend circle { |
|
fill: none; |
|
stroke: rgb(130,130,130); |
|
stroke-width: 1px; |
|
} |
|
.legend text { |
|
fill: #777; |
|
font: 10px sans-serif; |
|
text-anchor: middle; |
|
} |
|
</style> |
|
<body> |
|
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script> |
|
<script src="//d3js.org/queue.v1.min.js"></script> |
|
<script src="//d3js.org/topojson.v1.min.js"></script> |
|
<script src="//cdn.rawgit.com/mourner/rbush/master/rbush.js"></script> |
|
<script src="//cdn.rawgit.com/rveciana/d3-composite-projections/master/conicConformalSpain-proj.min.js"></script> |
|
<script src="//cdn.rawgit.com/newsappsio/spam/master/spam.min.js"></script> |
|
|
|
<script type='text/javascript'> |
|
var width = 960 |
|
var height = 630 |
|
|
|
var radius = d3.scale.sqrt() |
|
.domain([0, 3141991]) |
|
.range([0, 45]) |
|
|
|
var svg = d3.select("body").append("svg") |
|
.attr("class", "legend") |
|
|
|
var legend = svg.append("g") |
|
.attr("transform", "translate(" + 50 + "," + 90 + ")") |
|
.selectAll("g") |
|
.data([300000, 1000000, 3000000]) |
|
.enter().append("g") |
|
|
|
legend.append("circle") |
|
.attr("cy", function(d) { return -radius(d); }) |
|
.attr("stroke-dasharray", "5, 5") |
|
.attr("r", radius) |
|
|
|
legend.append("text") |
|
.attr("y", function(d) { return -2 * radius(d); }) |
|
.attr("dy", "1.3em") |
|
.text(d3.format(".1s")) |
|
|
|
queue() |
|
.defer(d3.json, "provincias.json") |
|
.defer(d3.csv, "data.csv") |
|
.await(ready) |
|
|
|
function ready(error, provincias, ciudades) { |
|
if (error) throw error |
|
|
|
topojson.presimplify(provincias) |
|
|
|
var map = new StaticCanvasMap({ |
|
element: "body", |
|
width: width, |
|
height: height, |
|
projection: d3.geo.conicConformalSpain() |
|
.translate([width / 2 + 300, height / 2 + 100]) |
|
.scale(960 * 4.3), |
|
data: [{ |
|
features: topojson.feature(provincias, provincias.objects["provincias"]), |
|
static: { |
|
paintfeature: function(parameters, d) { |
|
parameters.context.lineWidth = 2 |
|
parameters.context.strokeStyle = "rgb(255,255,255)" |
|
parameters.context.fillStyle = "rgb(221, 221, 221)" |
|
parameters.context.stroke() |
|
parameters.context.fill() |
|
}, |
|
postpaint: function(parameters) { |
|
ciudades.sort(function(a, b) { return b.population - a.population }) |
|
.forEach(function(d) { |
|
var projectedPoint = parameters.map.settings().projection([+d.lng, +d.lat]) |
|
|
|
parameters.context.beginPath() |
|
parameters.context.arc(projectedPoint[0], projectedPoint[1], radius(d.population), 0, 2 * Math.PI, true) |
|
parameters.context.fillStyle = "rgba(44, 127, 184, .5)" |
|
parameters.context.fill() |
|
}) |
|
|
|
// Get Canary Island border from the projection |
|
parameters.context.beginPath() |
|
parameters.context.moveTo(0,0) |
|
parameters.context.lineTo(300,150) |
|
parameters.context.lineWidth = 0.5 |
|
|
|
var p = new Path2D(parameters.map.settings().projection.getCompositionBorders()) |
|
parameters.context.strokeStyle = "#555" |
|
parameters.context.stroke(p) |
|
} |
|
} |
|
} |
|
] |
|
}) |
|
map.init() |
|
} |
|
</script> |