Inspire Design Engineering with D3 + React

The start of a very simple circle system

I fell in love with data visualizations because they’re cool looking, technical, and streamline the method of conveying information. I gave a talk on getting inspired with React and D3 at the Seattle Web Developers Meetup in December 2018.


I am most often spurred to learn something new out of inspiration. Here are a few projects that made me want to learn more about creating interactive data visualizations for the web.

from The Pudding / Shirley Wu

So I went through every single line in Hamilton (twice 😱 ) and recorded who sang each line, as well as who that line may have been directed towards. I’ve noted every phrase that was sung more than once across more than one song, and grouped them into broad themes*. You can find my lovingly (obsessively) curated data here.

Hamilton by Susie Wu on The Pudding

from the Washington Post

Segregation in US cities. At the bottom author states “The project analysis was done mostly in node.js with some work in PostGIS. While several technologies were used in this project, special thanks goes to Mapbox’s helpful suite of tools and d3.js.”…

I did a little digging on twitter, I also found that this project used “react, redux, async/await and streams”

Mapping Segregation via Washington Post

from the San Francisco Chronicle

I was amazed and horrified at the destruction caused by the California wildfires last summer. This interactive webpage not only shows the fires but the AQI (air quality index)

Tracking Fires in California

A super simple start with raw D3

See the Pen Circles Solar System pure d3 by Lorraine Sawicki (@lorenka) on CodePen.

Tools of the trade

There is a lot of data viz technology out there. I created this map of the major software players used for data since 2006. The competition is staggering, as with any technology you have to think of your requirements and you have to filter in order to get things done.

Data Science Competition Heats Up

Here we go

This is why I’m focusing on React + D3.

I love this screenshot because of Aaron advocating ES6 and React/Redux and sticking with it. But also - that last comment!

“The hardest problem in javascript science is finding whatever clicks for you and using it and happily ignoring the rest”.

Ignore what doesn't work for you with javascript

Remember the following!

  • React owns the DOM (Document Object Model)
  • D3 calculates properties

Remember, D3 should calculate. React should render.

That’s all for today, more to come soon with a bit of React!