🗺 Infographics of San Francisco

Role
Required Solo School Project
Timeline
2 Weeks
Tools & Skills
Mapbox
Microsoft Excel
Illustrator
Figma
Infographic Design
skip ↓ to the takeaways

A year ago, & exactly today, I was visiting San Francisco.

While I lived San Mateo, SF was only a train ride away, and filled with endless opportunities. Fortune cookie factories, friends, frolics. I was very much in love with the city’s golden sand & eccentric people.

To be frank, SF isn’t without its problems. Used needles and human feces dot the sidewalks, thieves smash car windows in broad daylight, and dealers sell illicit drugs that capitalize on the people wandering the streets. 

Today, there is a growing number of open and active criminal cases in SF– frequently low-level and unpursued by the police [3]. The same datasets the police publicize exemplify their inability to close cases, lack of personnel, and selective pursuit of criminal law. 
Since 2018, the City of San Francisco has publicized the safety of its neighborhoods via their SF Data mapping project [4]. This has created a wealth of open-source information on everything from restaurant scores to 911 calls. The datasets I used update automatically daily at 10:00am PST [4]. The version mapped is from June 4, 2024 at 3:40 PM.

I compared eviction reports (filed with the San Francisco Rent Board) from 1997 to the present, with dispatched calls for police service, and the actual status of Police Incident Reports. I was interested in seeing the separation & overlap between each: eviction notices can help visualize the movement of people via gentrification, and the delta in cost of housing per period. Likewise, dispatched calls are distinct from incident reports because they are in real time- they tell us what the police value and which neighbourhoods have dangerous incidents that are tracked.

Map Legend

Figure 4. Map Legends for Police Incident Reports, Eviction Notices, & Dispatched Law Enforcement Calls
I found that on a macro level– crime and evictions were concentrated in the Mission + Tenderloin, spreading less densely outwards. If you zoom in, you can see open police reports everywhere- but a noticeable priority and abundance of 911 calls in those areas. There were a high number of dropped and open cases: arresting and charging adults is not actually the norm.

Evictions vs. Police Reports & Incidents

Figure 5. Mapbox. To see the Inner Legend, please press the + button 4 or more times.

Paradoxes of SF

“Male w/machete is back,” “Theft, From Locked Vehicle, >$950.” 
California’s state-wide reclassification of shoplifting hauls “below $950” as a misdemeanor has resulted in theft becoming a “practical and easy way” to fund drug consumption [3]. Larceny theft totals 256,211 cases in reports, but are less represented in phone calls– an almost futile attempt to alert understaffed police divisions [5].

Government policy encourages SF officers to turn a blind eye to low-level crime, thus, many aren’t even documented in datasets.
The Mission neighborhood tops the danger list with a staggering 85,595 incidents, closely followed by Tenderloin at 84,245. Ironically, Zumper lists the Tenderloin’s average rent as $1,801, compared to San Francisco’s median– $3,200 [10].
The lowest level engineer at Open AI makes 500k USD per year, with a US$266.7K base [8]
A full-time Starbucks barista makes $20.25-$22.99 an hour, or $44,233 yearly [9]
This reflects the city's huge wealth disparity–  if these two averages were roommates sharing a two bedroom apartment ($3,859/ month), the engineer would pay 8.68% of their base salary, compared to 52.35% from the barista’s [6].

My Design Process

Knowing I had experience with infographic design (and that it's very time-consuming), I allocated two entire weeks to work through varying fidelities of sketches before settling on my final design. Despite this, my infographic process was by no means a linear process.

While sorting through mountains of data, I discovered that crime statistics are tall and highly asymmetrical. Crime in SF strikes you like a crowbar, and I wanted to convey exactly how harrowing it felt to navigate certain neighbourhoods.  My first sketch played with the idea of text following a dotted line that circled around the Golden Gate: a homage to the ironic foundations the city is built upon.

The red doubly served as the color of the landmark, and a representation of violence. Feedback I gave myself at stage was that the text was too small in size, and it wasn't an optimal use of space to screenshot my map with little context.

Draft 2: Reflections on the Bay

Figure 8 & 9. Old SF Infographics
In my next designs (high-fidelity), I continued with the idea of weaving storytelling with SF landmarks. Red doubly served as the color of the Golden Gate Bridge, and a reminder of violence.
Initially, I wanted to represent the bay via sea lions, and an ocean + bridge themed palette. I've worked in Illustrator extensively, and love working with the pen tool. However, despite the time and hours I had put in at this point, I received some harsh feedback from Anthea & Areeba (which was both appreciated & requested) about the general 'vibe' of the piece.

They felt my designs weren't reflective of my insights- most non-locals aren't familiar with the sea lions, and they asked me to focus the scope of my work ("what are the dogs for?)"

Draft 3: Marrying Insights & Design Decisions

This time, I made a statement through color. I replicated the fog around the bridge, and added small finishing touches in Photoshop (ie. highlights and a bloody mist). During this round of critique, Jessica noted that she wished there was more showing, and less telling. Her problem wasn't my aesthetic design- it was how I had represented the insights themselves.

At this point, I had opted for two infographics because of the sheer amount of research & content I had. This lesson was pivotal because I realized that my infographic was to convey the bigger picture through design and symbolism- I didn't have to add a pie chart and little details that the average viewer would skim over.
Figure 10 & 11. New SF Infographics that better convey my message.

Draft 4: The Final one

Figure 10. Non-Color Graded. Figure 11. Color Graded
While less ambitious in scope, this new infographics uses a landscape ratio, better displays my insights, and actually marries my findings with the emotional content of the infographic: violence and chaos.

A great lesson from Jessica was how I should approach the process of design: am I conveying my insights to a first time viewer with no context? What if they were from a different country? Could they understand my work if they could only see the pictures?
To document the idea that there have been more Police Reports than the population over 6 years, I adjusted the height of the bridge to represent the number of people, while adding evictions to the same scale.
I went through several layers and options before settling on my final color grading- the perfect mix of SF-esque colors, grain, and readaibility without losing grit and emotion.
All in all, I was most comfortable with the infographic design process, and least comfortable with MapBox. I initially struggled to create a visualization and clean my data, but the time I spent in Excel helped me hone my insights and decide what I wanted to focus on. Later, I played around with marker styling to create a unique and readable map with several layers of detail and excellent color contrast.

Mapping San Francisco is mapping my past.

The famous Pier 39 sea lions. My first ever design conference. The street where a homeless man with a machete pursued my bus (Mission St & 3rd). These are my stories. These are our stories

As Robotham aptly wrote, San Francisco “is not an escape from America’s dysfunction, but rather an opportunity to master it” [3].
The problems that San Francisco is engulfed with aren't unique from the rest of America. Rather, they are the same problems, matured and amplified [3].

Credits

Thank you to Hudzah for the inspiration & Aadil for teaching me to love San Francisco.

Limitations to the data include approximated locations, and potentially incorrect classifications. Several crimes are unrepresented by reports, or inaccurately categorized (ie. blank or null). Over 5 years, the city has only reported 209 charges of rape, but 57,829 charges of miscellaneous and uncategorized crimes [4]
This study was typeset in Apercu Pro, Apercu Mono, PP Eiko, & Tobias.
The map was typeset in FF Din & League Mono. All illustrations are custom.
This case study was publicized as part of a mandatory class requirement.
[1] Katie Canales. San Francisco’s Sea Cliff neighborhood, where Twitter CEO Jack Dorsey owns $30 million worth of homes, is a parade of oceanside mansions. Here’s what it’s like inside. Business Insider. Retrieved June 8, 2024 from https://www.businessinsider.com/what-its-like-san-francisco-sea-cliff-neighborhood-2020-2

[2] Muriel Vega. 2023. Average Salary in San Francisco: How Far a $100,000 Salary Goes. The Rent. Blog : A Renter’s Guide for Tips & Advice. Retrieved June 9, 2024 from https://www.rent.com/blog/average-salary-in-san-francisco/

[3] 2023. Why I Live in San Francisco. Retrieved June 8, 2024 from https://www.palladiummag.com/2023/06/13/why-i-live-in-san-francisco/

[4] Police Department Incident Reports: 2018 to Present | DataSF | City and County of San Francisco. Retrieved June 8, 2024 from https://data.sfgov.org/Public-Safety/Police-Department-Incident-Reports-2018-to-Present/wg3w-h783/about_data

[5] Heat Map of Law Enforcement Dispatched Calls for Service: Real-Time | DataSF | City and County of San Francisco. Retrieved June 8, 2024 from https://data.sfgov.org/Public-Safety/Heat-Map-of-Law-Enforcement-Dispatched-Calls-for-S/894k-2ag2

[6] Average Rent in San Francisco, CA - 2024 Rent Prices. Apartments.com. Retrieved June 9, 2024 from https://www.apartments.com/rent-market-trends/san-francisco-ca/

[7] Restaurant manager salary in San Francisco, CA. Retrieved June 9, 2024 from https://www.indeed.com/career/restaurant-manager/salaries/San-Francisco--CA?salaryType=YEARLY&from=careers_serp

[8] OpenAI Software Engineer Salary | $500K-$890K+. Levels.fyi. Retrieved June 9, 2024 from https://www.levels.fyi/companies/openai/salaries/
software-engineer

[9] Full Time Jobs, Employment in San Francisco, CA | Indeed.com. Retrieved June 9, 2024 from https://www.indeed.com/jobs?q=full+time&l=San+Francisco%2C+CA&sc=0kf%
3Afcckey%28afd1466db269b253%29%3B
&vjk=3d3f6bfd6646ca5b

[10] Average Rent in San Francisco, CA and Rent Price Trends. Zumper - Apartments for Rent & Houses. Retrieved June 9, 2024 from https://www.zumper.com/rent-research/san-francisco-ca
(c.) 2021—2022
Next Case Study

Other Fun Projects

(c.) 2021—2022