|
<!DOCTYPE html> |
|
<meta charset="utf-8" /> |
|
<style> |
|
canvas { |
|
background: rgb(218, 233, 234) |
|
} |
|
</style> |
|
<body> |
|
<script src="https://d3js.org/d3.v3.min.js"></script> |
|
<script src="https://d3js.org/topojson.v1.min.js"></script> |
|
<script src="https://d3js.org/queue.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 color = d3.scale.ordinal() |
|
.domain(["L1", "L2", "L3", "L4", "L5", "L6", "L7", "L8", "L9", "L10", "L11"]) |
|
.range(["rgb(225, 57, 62)", "rgb(156, 69, 154)", "rgb(83, 185, 85)", "rgb(254, 189, 16)", "rgb(49, 123, 200)", "rgb(132, 125, 198)", "rgb(174, 97, 24)", "rgb(230, 89, 180)", "rgb(246, 132, 41)", "rgb(0, 173, 239)", "rgb(168, 209, 100)"]) |
|
|
|
queue() |
|
.defer(d3.json, "bcn.json") |
|
.defer(d3.csv, "data.csv") |
|
.await(ready) |
|
|
|
function ready(error, bcn, data) { |
|
if (error) throw error |
|
|
|
topojson.presimplify(bcn) |
|
|
|
data.forEach(function(d) { |
|
d.lng = +d.lng |
|
d.lat = +d.lat |
|
|
|
return d |
|
}) |
|
|
|
var map = new StaticCanvasMap({ |
|
element: "body", |
|
projection: d3.geo.mercator() |
|
.center([29.6, 30.47]) |
|
.scale(250000) |
|
.rotate([0,0,-37.6]), |
|
width: 960, |
|
height: 650, |
|
data: [{ |
|
features: topojson.feature(bcn, bcn.objects["metro"]), |
|
static: { |
|
paintfeature: function(parameters, d) { |
|
parameters.context.lineWidth = 0.5 |
|
parameters.context.fillStyle = "rgb(250, 250, 250)" |
|
parameters.context.strokeStyle = "rgb(200, 200, 200)" |
|
parameters.context.fill() |
|
parameters.context.stroke() |
|
} |
|
} |
|
}, |
|
{ |
|
features: topojson.feature(bcn, bcn.objects["seccio-censal"]), |
|
static: { |
|
paintfeature: function(parameters, d) { |
|
parameters.context.fillStyle = "rgb(255, 255, 255)" |
|
parameters.context.strokeStyle = "rgb(170, 170, 170)" |
|
parameters.context.fill() |
|
parameters.context.stroke() |
|
}, |
|
postpaint: function(parameters) { |
|
data.forEach(function(d) { |
|
var projectedPoint = parameters.map.settings().projection([d.lng, d.lat]) |
|
|
|
parameters.context.beginPath() |
|
parameters.context.arc(projectedPoint[0], projectedPoint[1], 3, 0, 2 * Math.PI, true) |
|
parameters.context.fillStyle = color(d.line) |
|
parameters.context.fill() |
|
}) |
|
} |
|
} |
|
}] |
|
}) |
|
map.init() |
|
} |
|
</script> |
