Skip to content
  • Sign In
  • Try Now
View all events
D3

React + D3 for Data Visualizations: Advanced Features

Published by O'Reilly Media, Inc.

Advanced content levelAdvanced

Architecture, geography, and layouts

Join expert web developer Colin Megill for a hands-on, in-depth exploration of advanced features in React and D3 for building interactive data visualizations. In two three-hour sessions, you’ll learn elegant, maintainable ways to build ambitious interactive visualizations by pairing D3’s math and layouts with React’s component architecture and DOM model, and you’ll dive into Redux advanced concepts, animation in React, React Fiber, and Redux for managing global application state. You’ll leave ready to replace scattered callbacks with Redux, deep link to visualization states, and decrease barriers for designers to get in the game.

What you’ll learn and how you can apply it

By the end of this live, online course, you’ll understand:

  • How to architect visualization components for reuse
  • How to make different parts of your visualization interface cleanly communicate as your codebase scales

And you’ll be able to:

  • Reconcile D3 and React’s competing DOM models and data-binding methodologies to build beautiful, maintainable codebases
  • Manage data flow through interactive visualizations using component architecture and Redux
  • Effortlessly deep link to any state in your visualization

This live event is for you because...

  • You’re a frontend developer responsible for building complex data visualization-powered products.
  • You’re a data visualization practitioner looking to level up your skills and develop more complex interactive tools or applications.
  • You’re a technical designer working on, or with an interest in, data visualization.

Prerequisites

  • A working knowledge of D3 (preferably two or more years’ experience) and React (completion of the React + D3 for Data Visualizations: Foundations course will suffice)
  • A solid understanding of JavaScript, Git, and npm
  • Familiarity with ES6 (useful but not required)

Materials or downloads needed in advance:

  • A laptop, desktop, or other connected machine with a text editor (e.g., Atom), the Chrome browser, and Node 6.2.0 installed

Recommended preparation

Schedule

The time frames are only estimates and may vary according to how the class is progressing.

Day 1

Architecting for composition and reusability(30 minutes)

  • Level 0: DefaultProps
  • Level 1: Props (including style prop using object.assign)
  • Level 2: Child components for overrides
  • Level 3: Component is a file in the project
  • Interactivity between charts and Ajax: Managing global application state with Redux (90 minutes)

Day 2

Using D3 layouts and geometry in React (30 minutes)

Student choice exercises (105 minutes)

  • Colin will provide multiple ideas for guided individual experimentation, or you can work on your own projects

Geography & Zooming (60 minutes)

Reflections on converting a complex D3 codebase to React (30 minutes)

Your Instructor

  • Colin Megill

    Colin Megill is founder of Seattle-based startup http://pol.is, a web app that leverages the real time web, interactive data visualization, and machine learning to gather sentiment in an organic, emergent way. Colin’s primary foci are frontend development, product design, information design, and interactive data visualization. He has also designed, architected, and built client-side applications and trained teams for some of the largest brands in the world across multiple industries.

    He speaks regularly in the United States and abroad at meetups and conferences, including appearances at Reactive2015 in Slovakia and CSSConf in NYC. Colin lives on Whidbey Island, near Seattle, with his wife Christie and their two wonderful little boys.

    Xlinksearch