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.
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”
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)
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.
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!
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!