The map shown above is a choropleth that colors each San Francisco supervisor district by the amount of tree maintenance cases recorded from March 1, 2018 to March 1, 2019. By hovering over a district, the district's number and specific case count is shown. Double-clicking on the map will zoom in on that spot each time the mouse is double-clicked. Scrolling the mouse wheel forward or backward while hovering over the map will also zoom in or zoom out of the map, respectively. Finally, panning the map is achieved by clicking anywhere on the map and dragging it anywhere within the grey box.
The primary goal of this map is to visualize the amount of tree maintenance cases per supervisor district in the city of San Francisco. There were several challenges encountered while creating this visualization including how to hide the legend and detail features when the map is zoomed in which is still unresolved. Another issue was trying to fix the zooming in/out and panning unresponsiveness. Unforunately, this feature is still problematic so if you find yourself unable to get the map to return to it's original position, refreshing the page resets the map.
The origianl SF 311 Tree Maintenance dataset can be found here.
This map was inspired by Denise Mauldin's World Map.
The details-on-demand interactivity created in javascript is credited to Tom Coin's Reusable D3 Tooltip.
| Done? | Letter | Justification |
|---|---|---|
| D | ||
| C | ||
| B | ||
| A | Created a choropleth in D3v5 with details-on-demand interactivity implemented in javascript and zooming/panning. |
Issues/bugs:
