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

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:

• 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

• 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

• 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)

• Static table
• Shows Edmonton's Eco Station locations

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

• Dynamic table
• Maximum rows set to twelve
• Updates to match filtered data

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