Overview

Welcome! Envision is Forge's 10-week course in data visualization with D3.js. By the end of our 10 weeks together, you'll have a rock-solid understanding of web development technologies (HTML, CSS, and JavaScript) and the ability to develop and publish interactive D3 data displays to the web. By the end of the course, you'll walk away with a fully functional website showing off your new skills!

Course Details

Zoom link

Workshop and Lab:

Please have your cameras on whenever possible, and don't hesitate to interrupt us with questions!

GitHub

Repo with all course materials here:

Weekly feedback form

Form available here:

Please fill out this form before leaving the Zoom call every week. This form is 100% anonymous, and we read every piece of feedback, every week!

Safe space form

Form accessible here:

If anyone at Forge, including (especially!) your course staff or classmates, makes you feel unsafe or unwelcome at any point this semester please, fill out the above form describing what happened. All submissions will be read and addressed by Emily Vaughan, our Creative Courses Director, and the full-time staff if necessary.

You may fill out this form either anonymously or with your name, if you'd like Emily to reach out to you to discuss further.

Schedule

Week 1: Introduction to Forge, D3, and HTML.

• Review the basic norms and policies for participating in a Forge course

• Learn the value of visualizing complex data in D3 over Tableau, matplotlib, excel, etc.

• Set up your tools and development environment, get acquainted with Slack, and schedule your weekly lab meeting

• Learn the basics of HTML and get started building out the bones of your website

• Lab: Bring (and discuss) one effective and one ineffective interactive data visualization

Week 2: Styling web elements with CSS

• Further knowledge of HTML attributes, especially of the universal attributes class and id

• Understand how class and id act as hooks, but don't in themselves change element style

• Learn what CSS is and its basic rule-based syntax

• Learn and practice writing a variety of CSS selectors

• Learn and practice writing a variety of CSS declarations

• Learn about display and layout properties in CSS

• Practice using flexbox to create more complicated CSS layouts of HTML elements

• Apply these principles to Project 1, your website!

Week 3: Git and GitHub

• Install Git and create a GitHub account

• Learn basic terminal commands, such as ls and cd, used to navigate working directories

• Complete a terminal scavenger hunt to practice these commands

• Learn the difference between Git and GitHub, and how they work together

• Practice the GitHub pull / edit / add / commit / push workflow through the Five Word Stories exercise

Week 4: JavaScript basics for D3

• Learn how to use Google Chrome's dev tools to view and interact with JavaScript in the console

• Learn and practice the following JavaScript processes and concepts:

  • Object data type

  • Arrays

  • If, else if, else

  • Ternary operator

  • Iteration (for loops)

  • Functions

  • DOM manipulation

Acknowledgements

We'd like to thank and acknowledge:

• Prof. Eric Field, UVA School of Architecture, for introducing us to D3

• Ishaan Dey, for the sick markdown buttons