Name: datasci-sf-tree-map
Owner: SFBrigade
Description: Basic map viz for SF Trees
Forked from: thfield/sf-map
Created: 2016-10-06 02:11:45.0
Updated: 2017-03-05 22:41:52.0
Pushed: 2016-10-14 05:08:41.0
Homepage: http://old.codeforsanfrancisco.org/datasci-sf-tree-map/
Size: 2183
Language: JavaScript
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
Mapping San Francisco
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:
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>:
ipt src="vendor/d3.min.js"></script>
ipt src="vendor/topojson.js"></script>
ipt src="vendor/d3-queue.js"></script>
ipt src="vendor/d3-legend.js"></script>
ipt 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 inThe choropleth variable is where all the magic happens:
choropleth = Choropleth()
elect(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 inSupervisor_Districts_April_2012censustractselect_precinctszipcodesneighborhoods_analysisneighborhoods_planningneighborhoods_sffindNeeds 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')