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!
Last updated