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.

https://docs.idew.org/project-data-visualization-2/docs.idew.org

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.

https://docs.idew.org/code-dataviz-dashboard/docs.idew.org

https://docs.idew.org/code-dataviz-dashboard/dashboard-template-tutorial/1-first-look-at-templatedocs.idew.org

https://docs.idew.org/code-dataviz-dashboard/dashboard-template-tutorial/2-sql-introductiondocs.idew.org

https://docs.idew.org/code-dataviz-dashboard/dashboard-template-tutorial/3-producing-chartsdocs.idew.org

https://docs.idew.org/code-dataviz-dashboard/dashboard-template-tutorial/4-creating-your-own-database-google-sheetdocs.idew.org

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

Supplemental Documentation

https://docs.idew.org/code-dataviz-dashboard/sql-examplesdocs.idew.org

https://docs.idew.org/code-dataviz-dashboard/code-examplesdocs.idew.org

https://docs.idew.org/code-dataviz-dashboard/dashboard-layout-examplesdocs.idew.org

Using Google Charts  |  Google for DevelopersGoogle for Developers

Spreadsheet

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

https://docs.idew.org/project-data-visualization-2/reference/a-spreadsheet-exercisesdocs.idew.org

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.

https://docs.idew.org/project-data-visualization-2/reference/b-python-notebook-exercisesdocs.idew.org

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.