marufsiddiqui / jscn-data-vis

Data Visualization

In this session you will experiment with different options for data visualization in javascript.

Using a given data set you will attempt to generate specific charts relying on highcharts, google charts and/or d3.

You can find the json in the data folder containing the raw data you can use for generating your charts.

Challenge 1

Create a stacked column chart displaying the information in the bookings per day.

Challenge 2

Add some method of control for the date range being displayed.

Challenge 3

Add controls for filtering bookings by type (business, private etc).

Challenge 4

Create a combo chart for the information in the vehicle usage: column chart for active vehicles and line chart for total vehicles.

Challenge 5

Make the vehicle usage total vehicles line chart have a vertical climb/drop off when the value changes.

Challenge 6

Allow transformation of charts into different types. From stacked column to regular column or line chart.

Challenge 7

Allow setting a base index. Selecting a date from the current data set which represents x = 0.

Boss fight

Combine data from the two sets to display the bookings per day and the total vehicles per day line. There should be two x axis representing the different scales of information.

References

https://d3js.org/ https://developers.google.com/chart/ http://www.highcharts.com/