Embedded Files
Pothole on your street? Missed trash pick-up? Loud party next door? Call 3-1-1.
Team: Keerthi Sekar & Anna Chambers
Motivation for Visualization: The motivation of this application is to view the nonemergency 3-1-1 calls over the geographic area of Cincinnati and over the course of 2022 and apply filters to determine trends. (Geographically and over different periods of times - month, week, day.)
Github: https://github.com/keerthi-sekar/CS5124-Project2
Release Page: https://github.com/keerthi-sekar/CS5124-Project2/releases/tag/v1.0.0
Demo Notes
Demo Notes
This video shows the functionality of the visualization components. It walks through the interactive features of each chart.
Due to lag issues, the wordcloud uses the first 100 call descriptions to show proof of concept of the visualization.
Data
Data
This dataset captures All Cincinnati 311 (Non-Emergency) Service Requests from 2012 to present including how long customer service requests have been open, by location, service request type, and department work group. Citizen Service Requests (CSR) give Cincinnati residents the opportunity to submit service request for concerns like potholes, tall grass and missed trash pick-up.
Data Creation: Using the Fix It Cincy! Mobile App, the customer service request online portal and the hotline (513-591-6000), citizen service requests are routed directly to City departments, including Transportation & Engineering, Buildings & Inspections, Health and Public Services. Once the department's work on the service request ticket is completed and the request is marked as "closed," customers receive an email notification that the work has been completed, followed by a link to an optional customer service feedback survey.
Data Created By: The source of this data is the CAGIS.
The map portion of the webpage showcases the spread of calls over the Cincinnati area, covering specifically the categories of the calls (ie: Recycling, residential, etc.), agency that responds to the call, and date & response time.
The timeline portion showcases when and what types of calls were placed over the course of 2022 in a monthly and weekly timeframe. You can see the distribution based on a day timeframe in the interactive frame below these timeline charts. (Below)
Note: Only used data from 2022 for our interface. Also only using data with service codes BLD-RES, RCYCLNG, PTHOLE, SIDWLKH, and TIRES to help with load time.
The view of word cloud allows you to find the subthemes within the calls that were logged. Due to lag, we only put the first 100 descriptions as proof of concept of the visualization.
Visualization Components
Visualization Components
Data is visualized in cards set up in a grid. View the demo for the GUI layout.
Map View
Map View
Shown below is the map component of the application. The map shows the location of all of the 311 calls. The user can interact with the map by changing what the calls are colored by and with each color change the legend to the right of the map updates (picture 2). The user can also choose the checkbox to toggle the map between the default street view and an aerial view (picture 3). The map can be brushed to filter by calls only in the brushed area (picture 4). The brushing functionality can be using ctrl + left click while sweeping over the map and this can be discovered by the user by hovering over the information icon (picture 5). The map also shows details about each individual call using tool tips (picture 6).
Picture 1
Picture 2
Picture 3
Picture 4
Picture 5
Picture 6
Timeline View
Timeline View
For the timeline view of the calls, we chose to use bar charts so that the user can clearly see the number of calls associated with the change over time. We divided our timeline into two bar charts, one that shows an overview by months and another that shows a breakdown by days. The bar chart by month is used to filter the one by day so that the user can explore different time windows. We chose to use selecting of that bar charts to accomplish this instead of brushing so that the user could compare months that are not next to each other (see discoveries section for more details). When the user selects a set of months on the month timeline the day timeline and all other visualizations are filtered by those months. The user can also filter down further by selecting a specific day and all other visualizations are updated to just show information from that day. Each of the timeline views also shows details (month/day and several calls) when you hover over a bar.
Default timeline view: Months
Default timeline view: Days
Applying filters by months “brushing”
Day view filtered by month brush
Applying filters by day
Tooltips
Calls by Category
Calls by Category
Our application allows users to learn more about specific details of calls by looking at the calls by category visualization. This visualization is a bar chart that has the x-axis updated by a dropdown. This allows the user to explore the number of calls based on service code, the agency responsible, response time, day of the week, or zip code. This visualization is filtered by all other visualization selections and also can be used to apply filters by clicking on bars.
Note: Zip code category includes a link out to a map of all the zip codes
Wordcloud view
Wordcloud view
The wordcloud shows all of the important words taken from the unstructured description text of the data. The wordcloud shows the amount of time the word appears by size of the word. This allows the user to determine what is being said in regards to the calls. The wordcloud is updated by the filters applied in all other visualizations.
Unfiltered Word Cloud
Filtered Word Cloud
Design Sketching & Justification
Design Sketching & Justification
Map Design & Justification
Map Design & Justification
The map is side by side with the color key. Above the map is a dropdown to allow the user to select the color by option. Next to the drop is a check box that will change the map to an aerial view. The key is updated when the dropdown is changed. We will be using a categorial color scale (d3.Category10) because the majority of the color by data type are nominal and we want to keep the color scheme consistent throughout.
Timeline Design & Justification
Timeline Design & Justification
Design Challenge technique was used for the timeline sketching. The 5 options purpose was to view the data over different periods of time. After sketching all the possible ideas, the elements and interactive techniques were “selected” for the final views that were implemented in the project.
(Note: sketching was completed before we narrowed down the dataset to just 2022)
This view (interactive bar charts) was selected to be implemented since it makes it easy to break down the different timeframes of the data (Month to day). This also gives the user the flexibility to choose what parts of the timeline to focus on and observe trends. Clicking the specific month (or multiple months) can also combine the analysis of specific times of the year in the timeline with the map visualization.
The tradeoff to use bar charts instead of the line chart was chosen since bar charts show the distribution of calls better over a period of time. The bars allows the user to view the proportions easier than a line chart could provide. IE: If January has 100 calls and March has 5 calls, the proportion is seen more clearly than a line chart.
While we decided to do bar charts instead of a line chart, to consolidate views with the required charts (Service Code, Response Time, Zipcodes, etc.) we decided to use the drop down to switch between the different relationships.
These 2 views were not used at the end – the interactivity requirement to show multiple periods of time was hard to expand on with a heatmap and scatterplot. Ultimately, the bar charts were the best choice out of the 4 charts to show the amount of calls over the month and day timeframe.
Findings
Findings
The map visualization allows you to identify trends within specific areas of Cincinnati such as:
Most occurring call types based on region of Cincinnati
Example: Sidewalk and repair hazards occur in counties between Norwalk and Fairfax
Example: Residential issues are spread across ALL of Cincinnati
Agencies that support the community respective to the region of Cincinnati
Example: Since the sidewalk and repair is between Norwalk and Fairfax, the Dept of Transportation main area of support is there.
Response time across the center of Cincinnati is on average 0-9 days
Example: The calls placed over all categories for May and December of 2022. Within May and December you can see the high and dips are in a similar pattern.
Example: When you click the “Pothole” category in the bar chart, the word cloud updates to only show words from descriptions with the PTHOLE service code. It can be seen in the lanes have multiple potholes. Glenway is relatively medium in size to show there are a few occurrences in that area.
Trends that can be viewed in the timeline panels:
Distribution of calls over the months
Highest amount of calls during a day of the week
Categories: Agency Responsible, Service Code, etc. Distribution over the months
Process
Process
Libraries: This project was developed using JavaScript, HTML, CSS, and the d3 library (https://d3js.org/) to help create the visualizations. In addition to d3 we used d3-cloud (https://www.npmjs.com/package/d3-cloud) to help with the development of the wordcloud and leaflet-area-select (https://github.com/w8r/leaflet-area-select) for the functionality of brushing the map.
Code Structure: The code for this application is separated into three main parts: HTML, CSS, and JavaScript files. The HTML file creates the basic structure and layout of the webpage and defines where the visualizations will be placed using svg tags. The CSS file defines the style of the application by indicating the colors and positioning of HTML class values. The JavaScript files contain the main bulk of the logic and create the visualizations. The JavaScript code is organized into classes for each type of chart with one main JavaScript file that initiates, calls, and updates the class objects. We reused one bar chart class for all the bar charts shown. The main JavaScript file also loads and processes the data and handles filtering.
How to run code:
Option 1:
Clone the repo or download and unzip
In a terminal cd into the downloaded/cloned directory
In the same terminal: run `python -m http.server 8000` (for Python 3)
Python 2: run `python -m SimpleHTTPServer 8000`
Must download Python if not already installed
Navigate to http://localhost:8000 in a browser
Option 2:
Go to https://github.com/keerthi-sekar/CS5124-Project2/releases/tag/v1.0.0
Click on “Source Code” (.zip or .tar based on your machine)
Extract the zip/tar file
In a terminal cd into the downloaded/cloned directory
In the same terminal: run `python -m http.server 8000` (for Python 3)
Python 2: run `python -m SimpleHTTPServer 8000`
Must download Python if not already installed
Navigate to http://localhost:8000 in a browser
Instead of using Python, you can also use Visual Studio Code extension’s Live Server.
Install Live Server in VS Code
Go to index.html of the project
Click “Go Live” and it will automatically take you to a browser with localhost connected.
Work Breakdown
Anna Chambers: Map Section, Brushing and Linking Capabilities, Filtering
Keerthi Sekar: Timeline Section, Wordcloud
Page updated
Google Sites
Report abuse