Program for Data Viz ⏱

👉 As you work through the following activities don't hesitate posting questions on Slack (#ws-programming-data-viz) and include a link to your Replit code when needed (or even a short video).

For Background: The Project Guidebook

While this workshop is focused on the programming aspect of project, you will want to review the full project guide book below to understand the context.

The ChallengeProject: Data Visualization 2

Three Paths to Visualizations

We offer three paths to work with data and present a visualization, each using a distinct programming language or platform. For your classroom you may choose one path for a single project, all three to provide to facilitate a sequence of projects, or provide students with a choice. Through your own review and work with this material you can determine a best path for your context.

Complete the web app sequence at a minimum, and then consider reviewing the spreadsheet and python exercises as well.

Web App (HTML/CSS/JS

The web app applies HTML, CSS, and Javascript with a Spreadsheet (used simply for raw data) to support creating a data dashboard that works in a standard browser. This project is more popular and in depth that the other two options.

Core Dashboard Tutorial

Complete each of the steps below to get started with a dashboard.

Getting StartedCode: Web App Data Visualization

1 - First Look at TemplateCode: Web App Data Visualization

2 - SQL IntroductionCode: Web App Data Visualization

3 - Producing ChartsCode: Web App Data Visualization

4 - Creating Your Own Database (Google Sheet)Code: Web App Data Visualization

For your database consider looking for some freely online data available in a CSV file format from sites like Kaggle.com.

Supplemental Documentation

SQL ExamplesCode: Web App Data Visualization

Chart ExamplesCode: Web App Data Visualization

Dashboard Layout ExamplesCode: Web App Data Visualization

Using Google Charts  |  Google DevelopersGoogle Developers

Spreadsheet

The spreadsheet path is a gentler approach to creating a data visualization using a tool that many are comfortable with.

Data Viz with Spreadsheets ExerciseProject: Data Visualization 2

Python

Python is often the choice for professional data scientists and machine learning programmers, making it a great option to onboard students into high-demand disciplines. But this approach may prove to be more difficult to find entry-level coding material online, requiring a more adventurous perspective for beginner or novice programmers.

Data Viz with Python ExerciseProject: Data Visualization 2

Well done! Share links of any visualizations you have created on Slack!

Planning for Student Success

Now that you have experience with programming for this project...

• Consider how you will approach classroom management when students are completing a tutorial like this one.

  • What will be your expectations?

  • How much will be individual work versus team work?

  • Will you assign any code champions to help you support students with questions?

• How will you supplement it with other programming content or experiences?

  • Will you use any online tutorials?

  • Will you supplement with any CS unplugged activities?

  • Will you create any custom programming exercises yourself?

If you are participating in the Innovation Workshop you will consider similar questions for broader project activities.