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


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?

3. Program the dashboard for public access through the web

  • Create a free Replit account for programming your report.

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

Last updated