Skip to content

Instantly share code, notes, and snippets.

@martgnz

martgnz/choropleth-3.html

Last active May 4, 2016 19:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save martgnz/98828050b66e0314e566282bc5362e9a to your computer and use it in GitHub Desktop.
Save martgnz/98828050b66e0314e566282bc5362e9a to your computer and use it in GitHub Desktop.
Download ZIP
Final code for Spam.js Choropleth
Raw
choropleth-3.html
<!DOCTYPE html>
<meta charset="utf-8" />
<style>
#map {
margin: 0 auto;
text-align: center;
}
.legend {
height: 35px;
width: 250px;
}
</style>
<body>
<div id="map"></div>
<script src="d3.min.js"></script>
<script src="topojson.min.js"></script>
<script src="rbush.min.js"></script>
<script src="d3-legend.js"></script>
<script src="spam.min.js"></script>
<script type='text/javascript'>
var color = d3.scale.linear()
.domain([0.1, 0.18, 0.26, 0.33, 0.41])
.range(["#ca0020", "#f4a582", "#f7f7f7", "#92c5de", "#0571b0"])
var legend = d3.legend.color()
.shapeHeight(10)
.shapeWidth(50)
.shapePadding(0)
.labelFormat(d3.format("%"))
.orient("horizontal")
.labelAlign("start")
.scale(color);
d3.select(".legend")
.call(legend)
d3.json("bcn.json", function(error, d) {
topojson.presimplify(d)
var map = new StaticCanvasMap({
element: "#map",
width: 960,
height: 650,
projection: d3.geo.mercator()
.center([29.6, 30.47])
.scale(250000)
.rotate([0,0,-37.6]),
data: [{
features: topojson.feature(d, d.objects["bcn"]),
static: {
paintfeature: function(parameters, d) {
parameters.context.fillStyle = color(d.properties.rate)
parameters.context.fill()
parameters.context.lineWidth = 0.5 / parameters.scale
parameters.context.strokeStyle = 'rgba(0,0,0,0.2)'
parameters.context.stroke()
}
}
}
]
})
map.init()
})
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment