Michael Otis

Bylaw Infractions II

---

Dashboard Summary

Larger map display, row and bar chart addition, and map encapsulating selection options are some improvements to Dashboard I. Data used in Dashboard II is similar to Dashboard I. Dashboard II's code is more efficient, maintainable, and scalable.

Inspiration for the Project: Mean Daily Temperature Extremes and drive to complete crucial To-do's
Frameworks used include: Leaflet.SlideMenu, FontAwesome, Spin.js, and same frameworks as Dashboard I

Desktop and mobile Dashboard: BYLAW INFRACTIONS DASHBOARD II (CLICK ME!)
Note: FAILURES OF DASHBOARD I MADE DASHBOARD II A REALITY

Lessons Learned from Dashboard I & II

No.	Dashboard I	Dashboard II
1	Wrote code in the constraints of Le choropleth and Interactive Data Visualization	Learning responsive basics facilitated desired improvements
2	Not taking time to understand arising issues	Understood arising issues using global variables and Document Object Model
3	Intimidated by Mean Daily Temperature Extremes code and didn't extract needed code	Diving deeper into d3.js, dc.js, leaflet.js, dc-addons.js, and bootstrap docs aided in code efficiency
4	Abruptly used researched examples without deep thought	Mathematical procedures and operations are paramount for responsiveness

Improvements to Dashboard I

• Altered layout to enable smooth viewing on both mobile and desktop
• Made the dashboard responsive using viewbox sizing
• Changed the default map base layer at base-map-chart.js
• Removed heatmap to speed up yearly and monthly analysis
• Checked To-do's for Dashboard I

To-do's

• Refactor the code using functional programming eg. using transducers
• Add capability to filter data by clicking the legend ranges, potential solutions - filtering map markers, filter leaflet maps with a slider, and filtering data in leaflet
• Add sidebar to house additional features, helpers - How To - Side Navigation and How to think like a programmer
• Paginate the row chart
• Update the data
• Improve user interaction experience for mobile
• Unchecked To-do's from Dashboard I
• Apply Joey Cherdarchuk findings

Close Project

Eco Station I

---

Dashboard Summary

Uses data acquired from Open Data (City of Edmonton) to analyze yearly and monthly trends of Eco Station users. Users can filter by month(s) or by year(s) to view desired trends. Filterable charts and the dashboard have a reset method. 2017 data is not included in this example thus, 72 rows are selected out of 80 rows.

Inspiration for project: DC.js for Data Science Essential Training and Crossfilter Data Science Essential Training
The frameworks used include: crossfilter.js, dc.js, and bootstrap.js
Best viewed in: Google Chrome

Desktop Dashbord: ECO STATION DASHBOARD (CLICK ME!)
Note: CLICKABLE ELEMENTS AND MOUSEOVER, ARE DRIVERS IN REVEALING DATA INSIGHT

Features Summary

Only the location table isn't dynamic (doesn't update when filters are applied). Dashboard components resize when browser window is resized.
ECO STATION DASHBOARD constitutes of the following:

Componet	Features
Bar Chart (monthly trend)	Clickable bars, elastic y axis, and mouseover on bars Shows monthly trend when not filtered (clicked) Mouseover shows corresponding month and number of users When filtered the line chart, pie chart, and data table update accordingly to reflect filtered data
Pie Chart (yearly composition)	Clickable and mouseover for pie slices Shows yearly composition when not filtered (clicked) Legend data updates as per bar chart filters Mouseover shows corresponding year and percentage Bar chart and data table update when the chart is filtered
Line Chart (yearly trend)	Elastic y axis and mouseover on line Shows the overall total trend when bar chart is not filtered Updates to show yearly trend for clicked month(s)
Location Table	Static table Shows Edmonton's Eco Station locations
Number Display	Dynamic number text Displays overall total when no filters are applied Updates to match filtered data
Data Table	Dynamic table Maximum rows set to twelve Updates to match filtered data

To-do's

Improvements for the dashboard and potential solutions

• Add chart titles
• Replace static table with leaflet static map
• Update the data
• Lessen mouse delay tooltipMixin
• Use the nav
• Make the dashboard responsive for mobile and desktop using aspect ratio and keenio
• Indicate chart extremes (min and max) by applying bootstrap labels
• Implement intro.js for step-by-step guide and feature introduction
• Learn from Anmol Koul

Close Project

Bylaw Infractions 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: BYLAW INFRACTIONS DASHBOARD I (CLICK ME!)
Note: CLICKABLE ELEMENTS AND MOUSEOVER, ARE DRIVERS IN REVEALING DATA INSIGHT

Features Summary

BYLAW INFRACTIONS DASHBOARD comprises of the following:

Componet	Features
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)
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
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
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
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
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

Close Project