week01.md

Week 1 -- Day 1

Overview (this week)

• Day 1
  • Syllabus (Canvas)
  • Examples (from PDF)
  • Course goals & non-goals
  • Evaluation
  • Github Pages (Assignment)
  • Introducing & experimenting with the modern browser (dev console and the DOM)
• Day 2
  • Python and Python Data Viz compared to JavaScript/D3
  • Jupyter compared to Observable
  • Demo & in-class exercises -- reusing code with Observable

Course goals

You will learn how to use cutting-edge web technologies to...

• Tell a story with data
  • Test a hypothesis
  • Communicate insights
  • Make an (convincing) argument
• Create custom visualizations with the most modern technologies
  • term project working on a team
  • geospatial data
  • animations
• Create your own website/porfolio
  • portfolio, blog, or whatever you'd like
  • we'll use the site to provide context for the things we'll do in Observable

Course non-goals

The goal is not to...

• Turn you into a front-end web developer
  • ...although you'll take a step in that direction
  • You will learn how to contribute in a team with front-end developers
  • Web devs use a relatively complex suite of tools and workflows, but you'll learn the basics
• Turn you into an open-source software developer
  • ...although you'll take a step in that direction
  • You will learn how to adapt examples and debug the code that you write
  • We'll also look under the hood at some of the more popular open source projects
• Spend time learning GUIs for proprietary charting packages
  • ...although we'll discuss them and put them in context
  • You will learn how to create the anything they can, but you'll use open-source libraries and write code.
  • With code, you can create the kinds of visualizations that proprietary charting packages only dream about.

Evaluation

• Quizzes or midterm/final exams?? Concensus Answer: Quizzes (based on readings)
  • Part of "Class Participation"
• Short (individual) projects
• Term (team) project

The modern browser

A look under the hood...

• Learning Goals
  • From "View Source" to the browser console
  • Introduce the DOM
  • Introduce MDN - mention stackoverflow and W3Schools
• The Console
  • Show how it can be simple (https://pbogden.github.io/with_style.html) -- I wrote this
  • Show how it can be autogenerated (https://pbogden.github.io) -- Github converted it from a README.md
  • Show how it can be complex, even for an "apparently" simple web page (google.com)
  • Manipulate the DOM from the console -- introduce MDN as an authoritative resource.
    • The DOM (Document Object Model) -- MDN
    • EXERCISE (in-class): Remove the heading from my page
      • document.getElementById()
      • Element.remove()
    • EXERCISE (in-class): Remove the Google logo from google.com -- without removing the rest of the content

Observable notebooks

• Learning goals
  • Introduce to Observable notebooks
  • Get a high-level perspective of how it works
  • Develop interest in the range of possibilities
• Introduction to Observable -- collection
  • A Taste of Observable
  • Introduction to data
    • Public APIs
• Notebooks & Cells -- tutorial video
  • A nice introduction for those who are already familiar with JavaScript
  • On day 2, we'll take a Python perspective