Mapping San Francisco
- census tracts
city assessor lots (blocklots)(not yet!)- election precincts
- neighborhoods
- supervisor districts
- zip codes
Data from DataSF
This code uses the pattern from Towards Reusable Charts.
First, you need to have somewhere for the map to go. Add an element to your html file:
<div id="map_container"></div>The tooltip needs styles from css/stylesheet.css, specifically those for #tooltip and .hidden
You need to include d3.v3, topojson, d3-queue, d3-legend, and choropleth.js in the <head>:
<script src="vendor/d3.min.js"></script>
<script src="vendor/topojson.js"></script>
<script src="vendor/d3-queue.js"></script>
<script src="vendor/d3-legend.js"></script>
<script src="js/choropleth.js"></script>In your JS file, declare some user-set variables:
whatMapdetermines the geography drawntheDataFilepath to the csv of data to be renderedidPropertythe column from the csv that corresponds to the geographic iddataPropertythe column of interesting data associated with the geographymapElementDOM element for the map to be drawn in
The choropleth variable is where all the magic happens:
var choropleth = Choropleth()
...
d3.select(mapElement).call(choropleth)The following string variables determine how the choropleth gets drawn.
whatMapdetermines the geography drawntheDataFilepath to the csv of data to be renderedidPropertythe column from the csv that corresponds to the geographic iddataPropertythe column of interesting data associated with the geographymapElementDOM element for the map to be drawn in
- Supervisor Districts:
Supervisor_Districts_April_2012 - Census Tracts:
censustracts - Election Precincts:
elect_precincts - Zip Codes:
zipcodes - Neighborhoods designated by:
- Department of Public Health:
neighborhoods_analysis - Planning Department:
neighborhoods_planning - Office of Neighborhood Services:
neighborhoods_sffind
Needs to be a csv file with column headers. One column, identified as idProperty, required to match values from data/geometa.json
See required ID values in data/geometa.json
The column heading from your data csv
CSS-style selector, default #map_container
Use the following JS functions to make changes on the fly
Change number of "Color Buckets". Can also be set before rendering.
Where number is between 3 and 9. See vendor/colorbrewer/colorbrewer.css for available sets
Example: choropleth.quanta(3)
Change color scheme. Can also be set before rendering.
Where string is a colorbrewer scale. See vendor/colorbrewer/colorbrewer.css for available colors
Example: choropleth.colorScheme('Reds')
Change the data color encoded initially as dataProperty
Where string is the property of the csv dataset you want mapped.
Example: changeData('population')
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent