A choropleth map is a thematic map in which areas are shaded or patterned in proportion to the measurement of the statistical variable being displayed on the map. The Mapsense Demographics dataset supplies geometries of US administrative regions like state, counties, and census tracts, as well as the US census data associated with each region which is available to query and stylize. Select any of the feature properties- in this case, unemployment rate- and create a color ramp to make a choropleth.
Last active
August 29, 2015 14:15
-
-
Save mapsense-examples/00ee03b071e938ce6cc0 to your computer and use it in GitHub Desktop.
Make a Choropleth
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content='initial-scale=1,maximum-scale=1,user-scalable=no' /> | |
| <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
| <script src="http://d3js.org/topojson.v1.min.js" charset="utf-8"></script> | |
| <script src="https://developer.mapsense.co/mapsense.js" charset="utf-8"></script> | |
| <link type="text/css" href="https://developer.mapsense.co/mapsense.css" rel="stylesheet"/> | |
| <style> | |
| html, body, #myMap{ | |
| height: 100%; | |
| width: 100%; | |
| margin: 0; padding: 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="myMap"></div> | |
| <script> | |
| var map = mapsense.map("#myMap") //tell it where to go | |
| .center({lon: -120, lat: 40.808}) //set a center | |
| .zoom(5) //set a zoom | |
| //.zoomRange([5,20]); // if you want to restrict zoom levels | |
| //tile url | |
| var url = "https://{S}-api.mapsense.co/universes/mapsense.demographics/{Z}/{X}/{Y}.topojson?api-key=key-2d5eacd8b924489c8ed5e8418bd883bc"; //&where=layer=='county'&dz=-2"; | |
| //create a coloring function | |
| var colorRamp = d3.scale.linear() | |
| .domain([0,.15]) | |
| .range(['rgb(247,251,255)', 'rgb(8,48,107)']) | |
| var layer = mapsense.topoJson() //init a topojson layer | |
| .url(mapsense.url(url).hosts(['a', 'b', 'c', 'd'])) //tell it where to look | |
| .clip(true) | |
| .selection( | |
| function(d){ | |
| d.attr("class", "mapFeatures") //use a d3 selection to class each feature | |
| .style("fill", function(feature){ //color each feature by its unemployment rate | |
| return colorRamp(feature.properties.unemployment) | |
| }) | |
| } | |
| ); | |
| map.add(layer); //add the topojson layer to your map | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment