> For the complete documentation index, see [llms.txt](https://docs.launchboard.app/cxd/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.launchboard.app/cxd/cxd-cross-disciplinary/projects/cs-for-math-and-science-charting-data-1.md).

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

{% embed url="<https://www.loom.com/share/9567352990574b2d8d5b22f1a94b974f>" %}

### A Quick Intro to Data Science

{% embed url="<https://youtu.be/i2jwZcWicSY>" %}

#### **Student Objectives:**&#x20;

* 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

{% embed url="<https://www.loom.com/share/00719ccf2892452c9889d763c2a52ecb>" %}

### 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.&#x20;
* **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.\
  &#x20;<img src="https://1554394248-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Me5PnfC1YVrQ0BpXcd0%2F-MeNhRyRGRKCIpz6TLaG%2F-MeNkWzfK_2xCXwfuSjY%2Fimage.png?alt=media&amp;token=b1af21fc-c068-4fbe-a498-4e05a7e27a3b" alt="" data-size="original">&#x20;

### 3. Program the dashboard for public access through the web

* **Create a free** [**Replit**](https://replit.com/) **account for programming your report.**
* **Create a fork (copy) of** [**this report template**](https://replit.com/@jimlyst/Data-Report#index.html)**. Once you click "Run" you should see the screen shown below.**\
  &#x20;<img src="https://1554394248-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Me5PnfC1YVrQ0BpXcd0%2F-MeNhRyRGRKCIpz6TLaG%2F-MeNlqkjEFBkHdvQUy8K%2Fimage.png?alt=media&amp;token=3a1cf268-9c1d-40c5-b02c-cc4f29d348c8" alt="" data-size="original">&#x20;
* **Upload your CSV files to your Replit workspace.**\
  :warning: <mark style="color:red;background-color:yellow;">Pie charts and donut charts will not work with any zero values.</mark> <mark style="background-color:yellow;">It is a current bug in the</mark> [<mark style="background-color:yellow;">RoughViz</mark>](https://github.com/jwilber/roughViz) <mark style="background-color:yellow;">library. The work around is to replace any zero values with 0.000001 or similar. Other chart types should work fine with zero values.</mark>
* **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!**

{% hint style="info" %}
**Programming Reference Material**

This will be challenging, but use the reference material [**found here**](https://github.com/jwilber/roughViz) to troubleshoot and make customizations to your charts.
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.launchboard.app/cxd/cxd-cross-disciplinary/projects/cs-for-math-and-science-charting-data-1.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.