/applied-data-viz

Primary LanguageJavaScript

Applied Data Visualization - Winter 2017

Course Information

  • Location: PNCA Building. 511 NW Broadway, Portland, OR 97209
  • Meeting Times: Monday & Wednesday 6-9pm, starting January 22nd
  • Duration: 8 weeks

Instructor Contact Information

David Daniel | davidedaniel@gmail.com | @david on slack

Course Purpose & Goals

This course is all about data visualization with React.

We will have an ES2017 primer to build upon the current ES2016 standard, focusing on where we will use it in project work. We will also cover state management & immutability, concepts and implementation. We'll cover testing in the React ecosystem. We will learn how to create visual elements from Hack Oregon data sources, how to use React's lifecycle methods, and how to leverage D3 within components in a modular and performant way.

For a final project each student will create a React visualization web app, with React Redux, optionally using React specific Javascript libraries. All components we build in class, once tested & reviewed will be open-sourced.

Prerequisites
  • Experience with Javascript
  • Familiarity with React
  • Familiarity with data visualization
Computing and Technical Environment

Laptop

  • Multiple Cores: 2 - 4
  • Memory: 4GB min. 8GB recommended
  • OS (Linux, Windows, MacOS)
Please install the following software prior to our first class:

Course Outline

Every week we will be covering material planned for the week, and reviewing any materials from the previous week.

There will be weekly assignments based on the material covered that week due over the weekend and to be reviewed in class on Mondays. Midway through the course we'll start applying what we're learning towards building data visualization components.

For final projects, teams of 2 will work together on specs from the current season of Hack Oregon projects or platform. If these components satisfy requirements & code review, they will be open sourced as part of Hack Oregon's component library.

Class Schedule and Topics Covered

Week 1
  • Resolving any setup & tooling then diving into ES2017 primer
  • State management - What, Why & How?
  • Immutability
  • Redux
Week 2
  • React testing - mocha/enzyme
  • Functional components vs class
  • Lifecycle methods
  • Context
Week 3
  • React & SVG, Canvas, DOM mutation
  • Storybook
  • Building for & Contributing to component libraries
Week 4
  • React-motion
  • Mid-course project ( paired if even students/grouped if odd)
Week 5
  • React data viz libraries
  • Higher order components
Week 6
  • Working with JSON & APIs
  • Structuring a React/redux web app
  • Project planning
Week 7
  • Covering any requested topics
  • Project assignments & practical work
  • Testing & code reviews
Week 8
  • Covering any further topics that are requested
  • Completing projects & reviewing
Policies