davidedaniel / applied-data-viz Goto Github PK

• 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 | [email protected] | @david on slack

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.

• Experience with Javascript
• Familiarity with React
• Familiarity with data visualization

Laptop

• Multiple Cores: 2 - 4
• Memory: 4GB min. 8GB recommended
• OS (Linux, Windows, MacOS)

• Git
• Node or Node w/ NVM

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.

• Resolving any setup & tooling then diving into ES2017 primer
• State management - What, Why & How?
• Immutability
• Redux

• React testing - mocha/enzyme
• Functional components vs class
• Lifecycle methods
• Context

• React & SVG, Canvas, DOM mutation
• Storybook
• Building for & Contributing to component libraries

• React-motion
• Mid-course project ( paired if even students/grouped if odd)

• React data viz libraries
• Higher order components

• Working with JSON & APIs
• Structuring a React/redux web app
• Project planning

• Covering any requested topics
• Project assignments & practical work
• Testing & code reviews

• Covering any further topics that are requested
• Completing projects & reviewing

• HackOregon Code of Conduct