Visualization - San Francisco Earthquake Safety

Chien-Yu Sung

# Introduction

I grew up in Taiwan, an island in the Pacific Ocean, which is located between the Eurasian Plate, the Okinawa Plate and the Philippine Plate. Due to that fact, there were, on average, 26,686 earthquakes in Taiwan each year between 2001 and 2015. 965 of them were felt by human according to Taiwan's Central Weather Bureau.

I am now living in San Francisco and there were about 414 earthquakes in the past 365 days according to earthquaketrack.com on 04/08/2019. Therefore, I think it's very important to understand earthquake preparedness and safety in San Francisco. The purpose of this project is to analyze and visualize the Seismic Hazard Zones in San Francisco. Moreover, I also used the Tall Building Inventory and the San Francisco City Survey Data to present a better perspective regarding safety issues. With this content, we would be able to tell which buildings are more dangerous for earthquakes and fires caused by earthquakes. On the other hand, there is information about whether or not there are children and disable people in the house, then we can better understand how to help those people evacuate.


# Data

Dataset 1 - San Francisco Seismic Hazard Zones

show details

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

Attribution Value Sreenshot
Size (KB) 714

Dataset 2 - Tall Building Inventory

show details

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

Attribution Value Sreenshot
Size (KB) 339
Rows 181
Columns 45
Data Types String, Number, Datetime, Boolean, Polygon (Latitude/Longitude Geometry)

Used Columns:

Column Interpretation
polygon The geometry of the building.
Name Name of the building.
Address Street address of the building.
Fire_Resistence_Type Fire resistance of building materials.
Percent_Sprinklered Percentage of building with sprinklers installed.
Liquefaction_Potential Classification of the liquefaction potential at the building's centroid.
Typ_Story_Height Height of typical story.

Dataset 3 - San Francisco City Survey Data 2017

show details

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

Attribution Value Sreenshot
Size (KB) 375
Rows 2,167
Columns 92
Data Types String, Number

Used Columns:

Column Interpretation
disablephys Do you have any (long term) physical conditions that limit your activities?
1: Yes
2: No
3: Refused
k0to5 Do you have any children ages 0-5 who live in San Francisco?
1: Yes
2: No
3: Refused

Dataset 4 - Current Supervisor Districts

show details

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

Attribution Value Sreenshot
Size (KB) 448

Dataset 5 - San Francisco Fire Station Locations

show details

Licence: Open Source, created by Chien-Yu (Brian) Sung
Type: CSV
Date: 05/14/2019

How I created this dataset:

# Prototypes

NO. 1 - San Francisco Tall Buildings Earthquake Safety


These are Non-Proportional Maps, where the shapes were made by the POLYGON Geometry data. I planned to combine them into one visualization in D3v5. The goal of this visualization is to present if any of the tall buildings in San Francisco is in the Seismic Hazard Zones. Moreover, with the details shown with interactivity, we would be able to tell which ones are more dangerous than others.

For the interactivity:
I planned to add zooming features for user to see the shapes of those tall buildings and seismic hazard zones. Also, adding tooltips to show details when hovering over the buildings. Adding filtering and brushing features for categorical data such as Fire Resistence Type and Liquefaction Potential. Clicking on seismic hazard zones to highlight the buildings on that area. Hovering over the buildings to highlight the height value on sequential color legend.

Comment:
Add locations of fire stations on the map. Add zooming features.

NO. 1 - San Francisco Tall Buildings Earthquake Safety


These are Non-Proportional Maps, where the shapes were made by the POLYGON Geometry data. I planned to combine them into one visualization in D3v5. The goal of this visualization is to present if any of the tall buildings in San Francisco is in the Seismic Hazard Zones. Moreover, with the details shown with interactivity, we would be able to tell which ones are more dangerous than others.

For the interactivity:
I planned to add zooming features for user to see the shapes of those tall buildings and seismic hazard zones. Also, adding tooltips to show details when hovering over the buildings. Adding filtering and brushing features for categorical data such as Fire Resistence Type and Liquefaction Potential. Clicking on seismic hazard zones to highlight the buildings on that area. Hovering over the buildings to highlight the height value on sequential color legend.

Comment:
Add locations of fire stations on the map. Add zooming features.

NO. 2 - Evacuation Difficulty


The goal of this Proportional Map is to present the difficulty of evacuation for each supervisor district. I wanted to combine this map with Seismic Hazard Zones and calculate the ration of Seismic Hazard Zones in each district. The data is decimal but I will format it using percentage. Currently the data is encoded into colors and labels but I wanted to create some symbols to make the visualization more interesting. In addition, I wanted to add the locations of fire department to the map for reference.

For the interactivity:
I planned to add a detail orientated tooltip in the upper-left corner. When hovering over each district, the legend will be highlighted. Adding brushing features to the legend so user can select a range of value to display. Tooltips to show detail when hovering over fire department locations.

Comments:
Use other method to display details such as disable and kids percentage. There are a lot of free space, maybe you can encode the data in other way like adding a bar chart.


# D3 Visualization 1 - San Francisco Tall Building Earthquake Safety

I recommend using Chrome if the graph shows improperly.

Interpretation

This is the map of San Francisco with Supervisor District Boundaries. The black multi-polygons indicate the earthquake zones in San Francisco. The blue circles represent the locations of fire department stations. The multi-polygons with yellow or red colors are the tall buildings in San Francisco. The legend in the upper-left corner is encoded based on the height of the buildings.

Discussion

Most of the tall building are located in the financial district. The tallest one is Salesforce Tower. Most of the tall buildings have 100% coverage of sprinkler installation which is very helpful when fire occurs during earthquakes. The buildings closer to the bay have high Liquefaction Potential. For instance, according to several news, the Millennium Tower in downtown is sinking and leaning every year, which makes it very vulnerable if huge earthquakes happen.

Interactivity

0. Hovering over the map shows the district number and name.
1. Hovering over the fire department stations shows the station numbers.
2. Hovering over the buildings shows the details of that building in tooltip.
3. Hovering over the buildings highlights the height value on the legend.
4. Panning or zooming the graph gives you a better view of the map.
5. Clicking the "Fire Resistance Type" in the upper-left corner filters the buildings with that value.


# D3 Visualization 2 - Evacuation Difficulty

Interpretation

The data was extracted from San Francisco City Survey in 2017. "Disable" indicates if there is any disable member in the house. "Kid" indicates if there is any kids under 5 years old in the house. "Area" was calculated by using d3.geoArea() function. "Support" was calculated with dividing the Fire Station count by the Area above.

The "Evacuation Difficulty" was calculated with the following formula:

(Disable Ratio + Kid Ratio) / Support

Discussion

In the city survey dataset, we would be able to tell that whether there is a disable member or a infant under 5 years old in the house. Those two cases increase the difficulty of evacuation when earthquakes happen. Since we couldn't really get the accurate number of total residents in each district, we can compare the ratio between each of them. That reduce the lie factor when the total resident amounts are different.

When removing "Support" from difficulty formula, you can see that district 10 has the highest ratio of those two cases. On the other hand, adding "Support" shows that district 4 has higher evacuation difficulty due to the fact that there is only one fire station in that area. Nevertheless, district 10 is covered by the Seismic Hazard Zones more than district 4. Therefore, I'd say that district 10 requires more support regarding evacuation or help during earthquakes.

Interactivity

0. Hovering over the map shows the district number and name.
1. Hovering over the districts shows the details of that district in tooltip.
2. Hovering over the districts highlights the Evacuation Difficulty value on the legend.
3. Clicking the "Seismic Hazard Zones" controller shows/hides the earthquake zones on the map.
4. Clicking the "Includes Fire Stations" controller removes/adds "Support" attribute in the difficulty formula.


# References and Credits

0. The picture was taken in Taiwan and sourced from Wikimedia Commons with Creative Commons CC0 License
1. News from CNN, Magnitude 6.4 earthquake hits Taiwan , related to the picture
2. Earthquake Info & Readiness, Taiwan (English)
3. Earthquake Info & Readiness, Taiwan (Traditional Chinese)
4. Taiwan earthquake alert system saves lives (English)
5. Recent Earthquakes Near San Francisco Bay Area by earthquaketrack.com
6. Get Lat Long from Address by latlong.net
7. Data by data.sfgov.org
8. Pan & Zoom Axes by Mike Bostock


# About Me

Chien-Yu Sung
An enthusiastic and responsible man with ambition and creativity. Capable of working as a dedicated team member as well as an independent initiative taker. Proud Taiwanese! Currently, a 2nd year Master student in Computer Science at University of San Francisco who is graduating on May 18, 2019.

[ Interests ]
Distributed System
Site Reliability
Cybersecurity
Data Visualization
Board Games

[ Website ]

Other Data Visualization Works

0. Police Department Incident Reports
1. The Role of Colleges in Intergenerational Mobility
2. San Francisco Fire Department Calls for Service
3. Tree Maintenance
4. Hierarchy Visualization