$29.99
Chicago Transit Authority Ridership
Visualization
We are going to build a visualization of annual ridership totals dating to
the mid-1980s.
Requirements
• The chart should be a bar chart.
• The data should be obtained from the Chicago OpenData website via
an AJAX call. https://data.cityofchicago.org/Transportation/CTARidership-Annual-Boarding-Totals/w8km-9pzd
• The X axis should be years in ascending order starting from the left.
• The Y axis should be the amount of boardings for a particular
transportation type.
• The axes should be labeled with accurate labels.
• The datasets presented on the graph should have proper labels in the
chart legend.
• There should be 4 datasets displayed on the chart:
o Total ridership
o Bus ridership
o Paratransit ridership
o Rail ridership
• Each dataset should have its own distinct color e.g. the "Total" bars
should be of a different color than the "Rail" bars to make them
distinguishable on the chart.
• The Y axis should be a logarithmic scale so the paratransit bars don't
appear as tiny slivers compared to the rest of the totals.
• The Y logarithmic scale axis should display the numbers in standard
decimal form instead of scientific e notation. (e.g. instead of 5e+5 it
should display 500000)
Submission Instructions
The project files should be in a ZIP file named LastnameFirstnameHW4.zip
How to Complete
Read the quick start guide for the Chart.js library and set it up a basic
example chart on a webpage. It does not have to be a React app for this
assignment as long as the submission ZIP file has a HTML file I can
double click on to view a working page.
First set up a bar chart with dummy data and multiple datasets. Assign
each data set its own color, and experiment with settings for
the axes and their labels.
Go to Chicago's OpenData website to retrieve this particular
dataset: https://data.cityofchicago.org/Transportation/CTA-RidershipAnnual-Boarding-Totals/w8km-9pzd
Experiment in getting the dataset using a GET request using Postman
like in previous assignments.
Create an AJAX call using fetch() and process the results into the
lists necessary to construct your bar chart. The map function will be
your best friend here.