Bylaw Infractions Dashboard I

Dashboard Summary

Built to analyze bylaw infractions data acquired from Open Data (City of Edmonton). Bylaw infractions data comprises of 63,365 rows. Each row has 13 attributes as shown on aforementioned website. The whole data set was used in this example, even though 2017 data is incomplete. However, only 9 attributes were used to make the dashboard. Each neighbourhood has a unique combination of: pie chart, heatmap, bubble cloud, location on the map, and total number of infractions. The first instance of the dashboard (after data is loaded) is select all, whereby all neighbourhoods are selected and overall sum of infractions is displayed.

Inspiration for the project: Interactive Data Visualization of Geospatial Data and Le choropleth
Frameworks used include: crossfilter.js, dc.js, d3.js, leaflet.js, keen_io.js, dc_addons.js and bootstrap.js
Best viewed in: Google Chrome

Desktop Dashboard(Outdated): BYLAW INFRACTIONS DASHBOARD I (CLICK ME!)
Desktop Dashboard(Updated): BYLAW INFRACTIONS DASHBOARD II (CLICK ME!)

Note: CLICKABLE ELEMENTS AND MOUSEOVER, ARE DRIVERS IN REVEALING DATA INSIGHT

Features Summary

BYLAW INFRACTIONS DASHBOARD comprises of the following:

1 Selection Options (neighbourhood selection)

• Clickable options, key up and down, and scroll bar
• Select all default option
• Shows the total number of infractions for each neighbourhood
• Multiple options can be selected using Ctrl or Shift key mapping.
• Options data changes when the heatmap or bubble cloud are filtered (clicked)

2 Pie Chart (types of complaint)

• Non-clickable and mouseover
• Shows types of complaints and their percentages
• Total data for each type is illustrated on the legend
• Mouseover unveils type and percentage
• Chart updates whenever; selection options, heatmap, or bubble cloud are filtered

3 Heatmap (yearly and monthly trend)

• Rounded rectangles, row, and column text are clickable
• Mouseover for each rectangle
• Each row shows the year's trend
• Each column uncovers month's trend related to a 7 year time frame (except for missing data)
• Mouseover shows total complaints associated to month hovered
• Chart updates whenever; selection options or bubble cloud are filtered

4 Bubble Cloud (initiators and status)

• Clickable, elastic radius, and mouseover
• Reveals infraction intiators and status
• Mouseover displays intiator or status with related total number of infractions
• Updates in response to filtering selection options or heatmap

5 Map (neighbourhoods map)

• Clickable, zoomable, and draggable
• Illustrates geographical distribution of infractions
• Popup containing neighbourhoohd's name and number of infractions appears when neighbourhood is clicked
• Selecting an option (select all exclusive) places a corresponding marker on the map
• The map and legend vary to reflect filtered data
• Map filters are bubblecloud and heatmap

6 Number Display (number of infractions)

• Dynamic number text
• Displays overall total when no filters are applied
• Updates to match filtered data

To-do's

Improvements for the dashboard include:

• Construct a custom layer and set methods to reset and update the layer (actually used preRedraw and preRender events)
• Only draw the charts after data is loaded
• Add a loader
• Add a tabular (Traffic) component for additional charts
• Add reset for filterable componets
• Add reset all for the dashboard
• Add a feature for downloading a data table
• Improve performance for heatmap Decided to remove the heatmap
• Make dashboard responsive for both mobile and desktop by using aspect ratio
• Learn from austinlyons and Gordon Woodhull Learnt only from Gordon