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:
whatMap
determines the geography drawntheDataFile
path to the csv of data to be renderedidProperty
the column from the csv that corresponds to the geographic iddataProperty
the column of interesting data associated with the geographymapElement
DOM 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.
whatMap
determines the geography drawntheDataFile
path to the csv of data to be renderedidProperty
the column from the csv that corresponds to the geographic iddataProperty
the column of interesting data associated with the geographymapElement
DOM 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')