| license: mit | |
| height: 650 | |
| border: none |
Another example of a zoomable choropleth made with spam.js and two layers.
The difference is in the interaction: instead of zooming into the census tracts you get closer to the district. This is smarter, resulting in a general overview of each zone. It also makes it easier to create a tooltip/hover.
You can control the zooming factor with the zoomScaleFactor parameter. It accepts a value between 0 and 1.
| <!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/rbush@1.4.3/rbush.js"></script> | |
| <script src="https://unpkg.com/spamjs@1.1.0/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", | |
| zoomScale: 0.8, | |
| 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(); | |
| } | |
| } | |
| }, | |
| { | |
| 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(); | |
| } | |
| }, | |
| events: { | |
| click: function(parameters, d) { | |
| parameters.map.zoom(d); | |
| } | |
| } | |
| } | |
| ] | |
| }); | |
| map.init(); | |
| }); | |
| }); | |
| </script> |
