Visualizing Fire Incidents during January, 2015 in San Jose

1. Data
Visualization
Elements
Exploring Fire Incidents in San Jose
Laurie Reynolds
April, 2016

2. “Beauty on data visualization arises from hitting a certain
sweet spot between order and chaos, exactly the point where
the information is really rich and seems infinite, but there is
still enough structure and guidance to lead you from one
interesting discovery to the next one.”
2
Moritz Stefaner
Data Visualization Designer (OECD, World Economic Forum, …)
http://truth-and-beauty.net/about
Source: http://visualoop.com/blog/19269/talking-with-moritz-stefaner

3. Agenda
● Demo of the Fire Incident Data
● Elements of a Visualization
● Steps to creating the San Jose January 2015 Fire Incident Visualization
● Design Discussion
3

4. Demo Fire Incident Visualization
4http://codeforsanjose.github.io/dashboards/dashboards/fire-data-explorer/index.html#

5. Elements of a Data Visualization
5

6. Internet
● Infinite capacity
● Data from any time is available
● Variety of presentation elements
● On Demand
● Highly interactive
● Customizable
● Integrate with other sources
Data Visualization in different media
Television & Newspaper
● Brief (2 minutes/ columns)
● Current news
● Video/Text oriented
● 12 hour cycle
● Passive
● Fixed format
● Static content
6

7. 7Source: http://www.informationisbeautiful.net/visualizations/what-makes-a-good-data-visualization/

8. Fire Incident Visualization
8
Interaction
● Select filters / reset
● Select chart elements
● Map - zoom
● Hover
● Links
Visual
● Colors
● Layout
● Chart type
● Map shapes
● Chart animation
● Map Zoom
Information
● Chart annotations
● Map annotations
● Description
Data
● Stations
● Incidents
Story
Fire incidents in San Jose from
January 2015
Goal
Create an exploratory
visualization for people to
discover their own insights

9. Exploring January 2015 Fire Incidents
9

10. Understand the data
Prepare the data
Identify the story
Create/Refine the
visualization
Feedback & review
Collect the data
Verify
Publish
10
Steps to creating the San
Jose January 2015 Fire
Datavisualization

11. Story - Every fire incident point represents multiple people
Call taker
Call responders
Data Consumers
Caller
Person(s) in need
Person(s) affected by the
incident
People associated with the incident
Policy Makers - how
should we allocate funds
& resources?
Voters - How should I
vote on issues? How
will decisions impact
me?
Reporters/ Residents -
what is happening in the
community?
Employees - How will
my job change?
11

12. Goal
● Provide an exploratory visualization of San Jose
January, 2015 Fire Incident calls
● Provide a way for people to see incidents related to a
specific area of San Jose
12

13. Collect the data
13
Data.sanjose.gov
● http://data.sanjoseca.gov/dataviews/226237/san-
jose-fire-incidents-jan-2015/
San Jose Fire Stations
● http://www.sanjoseca.gov/index.aspx?NID=755

14. Understand the data
Data Fields
● Incident number
● Date Time of Event
● Dispatched Time
● Unit on the way time
● On Scene Unit
● Cleared Time
● Unit Count
● Priority - (Priority 1 | Priority 2 | Priority 1 or
Priority 2)
● Final Incident Type - (Medical | Fire & other)
● Final Incident Category
Questions
1) Map units responding to
stations
2) 800 units were uncategorized
3) How long does it take to make
data public? (January, 2015)
14

15. Prepare the data
● Removed entries where there were no units responding
● Grouped data by day and time of day
● Convert station address to latitude and longitude
15

16. Create the visualization - prototype
16

17. Create the visualization
17

18. Create the visualization - Terrific tools make it easy
● HTML
● CSS
● Javascript
○ Leaflet.js - Library for building interactive maps
■ http://leafletjs.com/
○ DC - Dimensional charting library
■ https://dc-js.github.io/dc.js/
■ D3 - “D3.js is a JavaScript library for manipulating documents based on data”
● https://d3js.org/
■ Crossfilter - Filtering library for multidimensional views
● http://square.github.io/crossfilter/
18

19. Leaflet.js
19http://leafletjs.com/

20. Charts - DC.js - Crossfilter + D3
1) Load your data
2) Generate your dimension & group
3) Apply to chart
http://bl.ocks.org/jun9/raw/5631952/
20

21. Verify & Publish
Verify
● Annotate to indicate it is for demo only and not an official San
Jose site
● Initial version the incident durations were not correctly
bucketed.
Publish
● Github static pages
○ http://codeforsanjose.github.io/dashboards/dashboards/fire-data-explorer/index.html#
21

22. 8,000+ calls / month!
I bet most of them
occurred during the
weekend
Which unit
responded to the
most incidents?
● What questions do your stakeholders have?
● What might change given the answer to the
questions?
I wonder how many
incidents occurred
in my neighborhood
22

23. What story would you tell?
23

24. Laurie Reynolds
email: laurie_reynolds@yahoo.com | LinkedIn: https://www.linkedin.com/in/lauriesreynolds
24
Human Centered Design User Advocate
Continuous Curiosity
Design software to be beautiful
inside and out
Collaboration Systems Thinking Analytics & Visualizations
Mission Critical
Life Sciences
Finance
Media
Government
Knight Ridder Financial
Knight Ridder New Media
(San Jose Mercury News Online)

25. Resources
25

26. 26
Resource Link
Leaflet.js
Library for building interactive maps
http://leafletjs.com/
DC
Dimensional charting library
https://dc-js.github.io/dc.js/
D3
Data Driven Documents
https://d3js.org/
Web Developers Checklist http://webdevchecklist.com/
Data Visualization Checklist http://stephanieevergreen.com/wp-
content/uploads/2014/05/DataVizChec
klist_May2014.pdf
Visualization: http://codeforsanjose.github.
io/dashboards/dashboards/fire-data-explorer/index.
html#
Code: https://github.
com/codeforsanjose/dashboards/tree/master/dashbo
ards/fire-data-explorer
Data Visualization Elements - Resources