|
<!DOCTYPE html> |
|
<meta charset="utf-8" /> |
|
<style> |
|
canvas { |
|
cursor: pointer; |
|
} |
|
</style> |
|
<body> |
|
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script> |
|
<script src="https://d3js.org/topojson.v1.min.js"></script> |
|
<script src="https://unpkg.com/[email protected]/rbush.js"></script> |
|
<script src="https://unpkg.com/[email protected]/spam.min.js"></script> |
|
|
|
<script type='text/javascript'> |
|
var hover = null; |
|
|
|
var color = d3.scale |
|
.threshold() |
|
.domain([6.03, 8.63, 11.28, 16.66, 23.59]) |
|
.range(["#f0f9e8", "#ccebc5", "#a8ddb5", "#7bccc4", "#43a2ca", "#0868ac"]); |
|
|
|
d3.json("bcn.json", function(error, d) { |
|
d3.json("districtes.json", function(error, districtes) { |
|
topojson.presimplify(d); |
|
topojson.presimplify(districtes); |
|
|
|
var map = new ZoomableCanvasMap({ |
|
element: "body", |
|
zoomScaleFactor: 0.3, |
|
projection: d3.geo |
|
.mercator() |
|
.center([29.6, 30.47]) |
|
.scale(250000) |
|
.rotate([0, 0, -37.6]), |
|
width: 960, |
|
height: 650, |
|
data: [ |
|
{ |
|
features: topojson.feature(d, d.objects["seccio-censal"]), |
|
static: { |
|
paintfeature: function(parameters, d) { |
|
parameters.context.fillStyle = color(d.properties.rate); |
|
parameters.context.fill(); |
|
} |
|
}, |
|
dynamic: { |
|
postpaint: function(parameters) { |
|
if (!hover) return; |
|
|
|
parameters.context.beginPath(); |
|
parameters.context.lineWidth = 1 / parameters.scale; |
|
parameters.path(hover); |
|
parameters.context.stroke(); |
|
} |
|
}, |
|
events: { |
|
hover: function(parameters, d) { |
|
hover = d; |
|
|
|
parameters.map.paint(); |
|
}, |
|
click: function(parameters, d) { |
|
parameters.map.zoom(d); |
|
} |
|
} |
|
}, |
|
{ |
|
features: topojson.feature( |
|
districtes, |
|
districtes.objects["districtes"] |
|
), |
|
static: { |
|
paintfeature: function(parameters, d) { |
|
parameters.context.lineWidth = 1 / parameters.scale; |
|
parameters.context.strokeStyle = "rgb(70,70,70)"; |
|
parameters.context.stroke(); |
|
} |
|
} |
|
} |
|
] |
|
}); |
|
|
|
map.init(); |
|
}); |
|
}); |
|
</script> |
