Eco Station Monthly Users Dashboard

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, d3.js, and bootstrap.js
Best viewed in: Google Chrome

Desktop Dashbord I: ECO STATION DASHBOARD (CLICK ME!)
Desktop Dashbord II: ECO STATION DASHBOARD II (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:

1. 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

2. 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

3. 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)

4. Location Table

• Static table
• Shows Edmonton's Eco Station locations

5. Number Display

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

6. 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 the mouseover delay tooltipMixin
• Use the nav to include both the data table and leaflet map
• 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