Michael Otis


Self-learning Data Science - Engineering Technologist - Technology Enthusiast

Portfolio


About


The website aims to democratize data visualizations. Data visualizations can ease decision making and necessitate accurate predictions. Moreover, another goal of the website is to share Michael Otis's journey of self-learning Data Science.

Around the web


Github: Michael Otis
Github Organization(s): Edmonton Open Data
Bl.ocks: My bl.ocks
Observable: My Javascript Notebooks
Contact Email: mikelotis123@gmail.com

Eco Station II


eco station II gif

An improvent of Eco Station I
Best viewed in: Google Chrome (Desktop and mobile Dashboard)
To-do: Apply Joey Cherdarchuk findings

CLICK ME FOR DASHBOARD II

Close Project

Bylaw Infractions II


blylaw infraction II gif

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

To-do's

Close Project

Edmonton Municipality II


municipality responsive gif clickable map

Map

Purpose: View and explore Wards, Neighbourhoods, and, Zoning Bylaw of Edmonton
Best viewed in: Google Chrome (Desktop and mobile Map)

To-do's

  • Minimize data with topojson eg. reducing coordinates accuracy and removing unwanted properties
    (reduced coordinates accuracy to 3 decimal places used mapshaper)
  • Look into efficient ways to process large geojson mapshaper and topojson
  • Apply Joey Cherdarchuk findings
CLICK ME FOR MAP!!!

Close Project

Eco Station I


eco station I gif

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


bylaw infractions I gif

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

Edmonton Municipality I


edmonton municipality I gif

Map

Purpose: View and explore Wards, Neighbourhoods, and, Zoning Bylaw of Edmonton
Best viewed in: Google Chrome (Desktop Map)

To-do's

  • Add a loader
  • Sync the map views - Leaflet.Sync and compare
  • Give layers distinct colors
  • Minimize data with topojson eg. reducing coordinates accuracy and removing unwanted properties
CLICK ME FOR MAP!!!

Close Project