Another classic comes to Spam: Mike Bostock's Let's Make a Map.
| <!DOCTYPE html> | |
| <meta charset="utf-8" /> | |
| <body> | |
| <script src="//d3js.org/d3.v3.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/newsappsio/spam/master/spam.min.js"></script> | |
| <script type='text/javascript'> | |
| var width = 960, | |
| height = 1000 | |
| d3.json("uk.json", function(error, d) { | |
| topojson.presimplify(d) | |
| var subunits = topojson.feature(d, d.objects.subunits) | |
| var map = new StaticCanvasMap({ | |
| element: "body", | |
| width: width, | |
| height: height, | |
| projection: d3.geo.albers() | |
| .center([0, 55]) | |
| .rotate([4.4, 0]) | |
| .parallels([50, 60]) | |
| .scale(1000 * 5) | |
| .translate([width / 2, height / 2]), | |
| data: [{ | |
| features: subunits, | |
| static: { | |
| paintfeature: function(parameters, d) { | |
| switch (d.id) { | |
| case "IRL": | |
| parameters.context.lineWidth = 1.5 | |
| parameters.context.fillStyle = "rgb(255, 255, 255)" | |
| parameters.context.strokeStyle = "rgb(170, 170, 170)" | |
| parameters.context.setLineDash([2, 3]) | |
| parameters.context.stroke() | |
| break | |
| case "ENG": | |
| parameters.context.fillStyle = "rgb(221, 204, 221)" | |
| break | |
| case "WLS": | |
| parameters.context.fillStyle = "rgb(204, 221, 221)" | |
| break | |
| case "SCT": | |
| parameters.context.fillStyle = "rgb(221, 221, 204)" | |
| break | |
| case "NIR": | |
| parameters.context.fillStyle = "rgb(204, 221, 204)" | |
| break | |
| } | |
| parameters.context.fill() | |
| // Paint country names | |
| for (var i in subunits.features) { | |
| var subunit = subunits.features[i] | |
| var center = parameters.path.centroid(subunit) | |
| parameters.context.beginPath() | |
| parameters.context.textAlign = "center" | |
| parameters.context.font = "300 20px Helvetica Neue" | |
| parameters.context.fillStyle = "rgba(119, 119, 119, 0.5)" | |
| parameters.context.fillText(subunit.properties.name, center[0], center[1]) | |
| } | |
| }, | |
| postpaint: function(parameters) { | |
| // Paint the country boundaries | |
| var mesh = topojson.mesh(d, d.objects.subunits, function(a, b) { return a !== b && a.id !== "IRL" }) | |
| parameters.context.beginPath() | |
| parameters.context.lineWidth = 1 | |
| parameters.context.strokeStyle = "rgb(119, 119, 119)" | |
| parameters.context.setLineDash([2, 2]) | |
| parameters.path(mesh) | |
| parameters.context.stroke() | |
| } | |
| } | |
| }, | |
| { | |
| features: topojson.feature(d, d.objects.places), | |
| static: { | |
| paintfeature: function(parameters, d) { | |
| var projectedPoint = parameters.map.settings().projection(d.geometry.coordinates) | |
| parameters.context.beginPath() | |
| parameters.context.fillStyle = "rgb(68, 68, 68)" | |
| parameters.context.font = "10px Helvetica Neue" | |
| parameters.context.arc(projectedPoint[0], projectedPoint[1] / parameters.scale, 2 / parameters.scale, 0, 2 * Math.PI, true) | |
| // Change the city label alignment according to each side of the map | |
| if (projectedPoint[0] > 600) { | |
| parameters.context.textAlign = "left" | |
| parameters.context.fillText(d.properties.name, projectedPoint[0] + 4, projectedPoint[1] + 3) | |
| } else { | |
| parameters.context.textAlign = "right" | |
| parameters.context.fillText(d.properties.name, projectedPoint[0] - 4, projectedPoint[1] + 3) | |
| } | |
| parameters.context.fill() | |
| } | |
| } | |
| } | |
| ] | |
| }) | |
| map.init() | |
| }) | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment