Comment on page

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