CS for Math & Science: Charting Data

Introduction and Background

For this project you will collect or generate some data and create a set of charts to include in a web-based report on the data — much like a data scientist may do to communicate data findings.

A Quick Intro to Data Science

Student Objectives:

• Generate or collect data on a topic or from an experiment

• Process and prepare the data for visualization

• Design a custom report with charts

• Program the dashboard for public access through the web

Subject Areas: Computer Science, Math, Science, and Engineering

Instructions

1. Collect data on a topic or experiment and prepare the data

• Your first step is to collect your data. This can be data you download from the internet, data you collected in a science lab, or data you generated in a spreadsheet based on mathematical formulas. You want to have enough data to generate two or three charts for your report.

• Review and clean the data as needed in a spreadsheet. Create a simple table(s) of your data in a spreadsheet and make sure the formatting is consistent and there are no missing data points etc.

• Export each data table to a CSV (Comma Separated Values) file. This is a common export feature in spreadsheets. Ensure that the column labels are the first row and that the remaining rows are data from your table.

2. Design a custom report with charts

• Review the data you have and determine the appropriate chart types to use. Will your tables require bar charts, scatter plots, line charts, histograms, or pie charts?

• Generate a quick sketch outlining your report layout. This does not have to be fancy. It can be a quick sketch that communicates the overall design idea and useful for conversation, like the one below.

3. Program the dashboard for public access through the web

• Create a free Replit account for programming your report.

• Create a fork (copy) of this report template. Once you click "Run" you should see the screen shown below.
• Upload your CSV files to your Replit workspace. ⚠️ Pie charts and donut charts will not work with any zero values. It is a current bug in the RoughViz library. The work around is to replace any zero values with 0.000001 or similar. Other chart types should work fine with zero values.
• Modify the template code for one of the charts to use your data and the appropriate chart type. This will take some time and trial-and-error! Once you are successful, repeat the process for the rest of your data.

• Fine-tune the formatting of your charts.

• Modify the text in the HTML with your chart descriptions and headings.

• Share your report with five people for a quick review and feedback. Make improvements as needed.

• Great job!

Programming Reference Material

This will be challenging, but use the reference material found here to troubleshoot and make customizations to your charts.