Visualization - Tree Maintenance

# Introduction

The dataset I used in this project was 311 Cases sourced from data.sfgov.org . This project focused on visualizing tree maintenance data happened between 03/01/2018 and 03/01/2019, especially with geospatial data, in order to get a better understanding about the stories underneath. I used Python3 and Tableau for creating my prototype, and I used D3.js version 5 for implementing the visualization. The font styles used in this website are powered by Google Fonts . This is an open source project, all the source code can be found here .

# Data

Dataset 1 - Tree Maintenance March 2018 to 2019

Source: data.sfgov.org
Licence: ODC Public Domain Dedication and Licence
Type: CSV
Date: 04/02/2019

Attribution	Value	Sreenshot
Size (MB)	4.7
Rows	11,478
Columns	20
Data Types	String, Number, Datetime, Boolean, Location (Latitude and Longitude), URL

Data Processing:
Used python to filter unused column and to create new data file. See source code here .

Used Columns:

Column	Interpretation
Source	Mechanism or path by which the service request was received.
Address	Human readable address or description of location.
Request Details	The human readable name of the service request details.
Opened	The date and time when the service request was made.
Closed	The date and time when the service request was closed.
Status	A single-word indicator of the current state of the service request.
Supervisor District	San Francisco Supervisor District as defined in 'Supervisor Districts as of April 2012'.
Neighborhood	San Francisco Neighborhood as defined in 'SF Find Neighborhoods'.
Latitude	Latitude of the location, using the WGS84 projection.
Longitude	Longitude of the location, using the WGS84 projection.
Media URL	A URL to media associated with the request. Used to web scrape photos.

Dataset 2 - Analysis Neighborhoods

Source: data.sfgov.org
Licence: ODC Public Domain Dedication and Licence
Type: GeoJSON
Date: 04/04/2019

Attribution	Value	Sreenshot
Size (MB)	1.6

Dataset 3 - Streets - Active and Retired

Source: data.sfgov.org
Licence: ODC Public Domain Dedication and Licence
Type: GeoJSON
Date: 04/04/2019

Attribution	Value	Sreenshot
Size (MB)	13

Dataset 4 - Current Supervisor Districts

Source: data.sfgov.org
Licence: ODC Public Domain Dedication and Licence
Type: GeoJSON
Date: 04/08/2019

Attribution	Value	Sreenshot
Size (KB)	448

# Prototype

# D3 Visualization 1 - San Francisco Tree Maintenance Distribution

Discussion

First, my D3 visualization is quite different from my prototype since it's very hard to customize the result when using Tableau and it doesn't support dark theme. The record was abundant so I split them into months. You can see that Phone and Mobile/Open311 took the majority parts of the sources. I would say that the reason was because people or constructors could easily report the incidents with their phones. Furthermore, they would be able to take a picture and upload it instantly. There were lots of tree maintenance on 36th Avenue in August, 2018. I couldn't find the reason online but I assumed that they scheduled a month to clean up all the demaged trees there. You are able to see the reasons and the pictures by hovering over the record symbols. There are several records from Integrated Agency with exactly same Latitude and Longitude, which made them overlapped, so I added some minor salt to distinguish them just a little bit. For example, in August 2018 in Excelsior neighborhood. (See reference here ) Overall, there was no certain pattern regarding the location of the tree maintenance. They were just everywhere in San Francisco!

Interactivity

0. Hovering over the record symbols shows details (and picture) of the record.
1. Hovering over the record symbols highlights the legends, brushes pie chart, changes the content in pie.
2. Hovering over the legends brushes the record and pie chart, changes the content in pie.
3. Hovering over the arcs of the pie chart highlights the legends, brushes records, changes the content in pie.
4. Hovering over the neighborhood highlights the boundaries and, shows the name and area ratio against entire SF.
5. Draging the circle on the slider, clicking on the slider or ticks changes the data source by year and month.

Ratio Calculation

Area Ratio: After drawing the paths of basemap, use foreach() function to go through each neighborhood and calculate the area using d3.geoArea(). Put the result of each neighborhood and the total area into a dictionary for later use. (On line 134 of vis.js file)

d3.select("g#tooltip")
  .selectAll("path.land")
  .each(function(d) {
    let current = d3.geoArea(d);
    area.values[d.properties.nhood] = current;
    area.total += current;
  });

Source Ratio: When calculating the X and Y coordinates on the projection, count the number of records of each source and the total. Put the result into a dictionary for later use. (On line 205 of vis.js file)

data.forEach(function(row) {
  let lat = parseFloat(row.Latitude);
  let lon = parseFloat(row.Longitude);
  let pixels = projection([lon, lat]);

  row.x = pixels[0];
  row.y = pixels[1];

  let source = row.Source;
  if (!(source in recordCount.values)) {
    recordCount.values[source] = 0;
  }
  recordCount.values[source]++;
  recordCount.total++;
});

Credits

0. SF Arrests Map by Sophie Engle
1. Conic Equal Area by D3
2. d3.geoArea() by D3
3. Circle Dragging I by Mike Bostock
4. SVG foreignObject Example by Mike Bostock

# D3 Visualization 2 - San Francisco Tree Maintenance Choropleth Map

Discussion

Previously, I had a assumption that there was no certain pattern regarding the location of the tree maintenance. However, after I created another visualization using different data encoding, I had another conclusion that there did exist a pattern. District 3, A.K.A. Financial District, and District 4, A.K.A Sunset District, are well developed. Therefore, greenbelt in those areas would be considered less than other part of San Francisco. On the other hand, district 8 contains a lot of parks, mountains and peaks so there would be more trees in that area. That's why tree maintenance happened more frequently there. The other assumption is that the district with less area contains less trees. Thus, the reason that less tree maintenance happened in District 3 would be answered. However, this assumption does not work on Distirct 8 and District 4.

Interactivity

0. Hovering over the district highlights the boundaries.
1. Hovering over the district shows the details including number of records and ratio.
2. Hovering over the district shows the tick on color legend.

Ratio Calculation

Record Ratio: Before drawing the basemap, use foreach() function to go through the dataset and count the record. Put the result of each district and the total number into a dictionary for later use. (On line 39 of vis2.js file)

data.forEach(function(row) {
  let dist = row["Supervisor District"];

  if (!(dist in dataCount.values)) {
    dataCount.values[dist] = 0;
  }

  dataCount.values[dist]++;
  dataCount.total++;
});

Credits

0. SF Arrests Map by Sophie Engle
1. Mobility Bubble Chart by Sophie Engle
2. D3 Continuous Scales by D3

# About Me