React for Dataviz
A monthly data visualization built with React, D3, and others. Livecoded last Sunday of the month. Join live or subscribe to the newsletter 💌
Free-hand mouse drawing with D3v6 and React Hooks
Should you use React's built-in mouse handling? Why do coordinates look weird? Why does d3.mouse not work like you expect? Find out with this fun example.
October 6th, 2020
How data visualization saved 40,000+ lives this spring
Social distancing saved lives this spring. Dataviz helped people understand why it matters
May 25th, 2020
Visualizing how viruses spread in a population
Let's build a simulation of how viruses spread in populations and see the impact of social distancing for ourselves.
March 16th, 2020
Building a Piet Mondrian art generator with React & D3 treemaps
You can become a famous artist by just painting colorful squares. So I figured what better way to experiment with D3 treemaps than to pay homage to Piet Mondrian.
November 13th, 2019
Experimenting with the new React Concurrent mode
I've been playing around with React's new Concurrent Mode and it is amazing. A little mind-bendy, a dash mad, and a whole lot of wonderful.
November 6th, 2019
Visualizing Moore's Law with React & D3
Moore's Law states that the number of transistors on a chip roughly doubles every two years. But how does that stack up against reality?
October 7th, 2019
How to drive React state with D3 transitions for complex animation
Here's part 2 of Kiran's challenge from last week 👉 animating our drilldown piechart.
July 1st, 2019
A Drilldown Piechart with React and D3
A few days ago Kiran B sent me a challenge via Twitter DM: How can I make a drilldown piechart?
June 28th, 2019
Which emails sparked joy – an animated timeline built with React and D3 tutorial
I asked thosands of people "Did you like this email?". Here's the result in a beautiful data visualization. Learn how to build and animate responsive data visualizations with React and D3.
August 5th, 2019
Why dataviz does better for your career than TODOapps
Stop learning to code TODOapps! Why not learn modern React by building apps you can show off?
March 6th, 2019
Behind the curve ... of my bar donut chart 🤨
Last night I built something so cool it's still blowing my mind. And I got the idea from the flat earth society.
March 5th, 2019
Pirates’ downfall causes global warming
Did you know the downfall of pirates caused global warming? It's true, we have data to prove it
February 28th, 2019
JavaScript’s most popular dataviz library
Yesterday we talked about how data visualization helps you understand the world. Today I wanted to tell you about JavaScript's most popular data visualization library 👉 D3.
February 26th, 2019
Dinosaurs, software engineers, and cholera. What do they have in common?
February 25th, 2019
The Kiran circle arc challenge
Kiran has a problem. He's working on a project and doesn't know how. Let's help
December 21st, 2018
Let's build a real-time WebGL map of all airplanes
Uber has built a cool suite of data visualization tools for WebGL. Let's explore with a real-time dataset of global airplane positions.
December 20th, 2018
Explore Uber's WebGL dataviz libraries
Uber has built a cool suite of data visualization tools for WebGL. Let's explore
December 18th, 2018
Let's build a Sankey diagram
Have you ever tried making a sankey diagram with d3+react, I can't seem to make it work for some reason.:/
December 16th, 2018
A responsive chart of smartphone market share 📲
Smartphones, magnificent little things. But there's only 4 kinds. Draw a responsive stackchart of their marketshare.
December 15th, 2018
When do people buy candy? 🍬
Candy is delicious. When do people buy it most? Visualize the data in a fun way
December 12th, 2018
When do Americans buy their Christmas presents?
My girlfriend likes to buy her presents early, I wait until the last minute. What do other people do? Create a way to visualize the last few weeks of the year and rank them by popularity.
December 10th, 2018
What goes in stockings for Christmas?
Ever seen Christmas stockings? They get stuffed with all sorts of stuff. Build a donut chart of what's what and add a mouse hover effect that shows what a slice represents.
December 9th, 2018
Will you buy a Christmas tree?
Not everyone buys a Christmas tree. 🎄 Draw a donut chart of people's thoughts.
December 8th, 2018
Christmas carols and their words
Christmas carols are a time honored tradition. Draw a heatmap of their most popular words.
December 7th, 2018
What do Americans want for Christmas?
Different ages want different things. Create a horizontal stack chart showing what everyone wants for Christmas.
December 6th, 2018
Christmas movies at the box office
Christmas movies are the best movies. How much do they make at the box office? Show the power distribution curve with a vertical barchart.
December 5th, 2018
Money spent on Christmas
Christmas can be very expensive. Plot a line of how much americans think they're spending on Christmas gifts over the years.
December 4th, 2018
Christmas trees sold in USA
Every year americans buy a bunch of christmas trees. Use the dataset to compare real and fake sales with two bar charts.
December 3rd, 2018
Announcing D3blackbox and useD3
November 6th, 2018
Easy D3 blackbox components with React hooks
Combining D3 and React can be tricky. D3 loves internal state, React likes components to be stateless.
November 1st, 2018
Build responsive SVG layouts with react-svg-flexbox
SVG is great. Best way to build scalable graphics on the web. SVG can do everything from simple logos to data visualization and even animation.
August 17th, 2018
ReactVR/react-360 is great, but maybe not quite there yet
August 3rd, 2018
Creating the perfect rounded edge with D3 curves
A coaching client showed me this design and asked: "Ok, how do I build this?"
July 31st, 2018
Tiny React & D3 flamegraph tutorial
June 6th, 2018
Declarative D3 charts with React 16.3
The new React 16.3 brings some changes to the ecosystem that change how we go about integrating React and D3 to build data visualizations.
April 27th, 2018
Declarative D3 transitions with React 16.3
The new React 16.3 brings some changes to the ecosystem that change how we go about integrating React and D3 to build data visualizations.
April 12th, 2018
Livecoding Recap: A new more versatile React pattern
March 27th, 2018
Silky smooth Piechart transitions with React and D3.js
Today, I finally figured out how to build smooth D3 arc transitions. 🎉
March 9th, 2018
Loops are the hardest
February 15th, 2018
3 key insights that make D3.js easy to learn
The other day somebody asked me how to learn D3.js from scratch. I quipped that it took me writing a book to really learn it. It's one hell of a library.
February 8th, 2018
Advent of Code Day 22 – Sporifica Virus
December 22nd, 2017
Server-side rendering a D3 chart with React 16
The Flash of Doom is one of the most annoying issues with D3 charts. You load the page, then you load the data, then you render your chart. With React 16, we can fix that using server-side rendering.
September 28th, 2017
How you can translate any random D3 example to React
You and I both know that when it's time to code some D3, the easiest approach is to find an example that does something similar, copy its code, and tweak it a bit. But a lot of those examples are in old versions of D3, and what if you're using React or something and can't just plop code into your project like nobody's business?
August 31st, 2017
N-body Collision Simulation with React, D3, and MobX
Collision detection is one of those problems that's easy in theory but hard in practice. Even between ideal circles. Here's how to do it
March 16th, 2017
Optimizing React choropleth map rendering
December 19th, 2016
Dancing tree fractal with React
December 13th, 2016
Fractals in React
I spent 3 hours building a Pythagoras tree fractal. It's 2:30am, and is my life even real? Who the hell accidentally spends all night building fractals? Me… I guess.
November 18th, 2016
Histogram in D3v3 vs D3v4
D3v4 introduced just enough changes from D3v3 to trip you up.
October 25th, 2016
A trick to make your big dataviz load super fast
October 17th, 2016
Animated string diffing with React and D3
August 22nd, 2016
Livecoding #19: It’s hard to package a library
August 15th, 2016
Livecoding #13: rendering React components with canvas
June 28th, 2016
Livecoding #12: towards animating 10k+ elements with React
June 16th, 2016
Using d3js transitions in React
One of d3’s biggest selling points is the general update pattern. Add some function calls and voila – animated visualization with transitions. You totally _can_ achieve the same result with React. Yes, even if you use React to render SVG. Yes, you can use d3’s powerful transitions API too. The React version is easier to understand, too. Keep reading and you’ll see why.
April 28th, 2016
Animating with React, Redux, and d3
Particle generator. It makes tiny circles fly out of where you click. Hold down your mouse and move around. The particles keep flying out of your cursor. On mobile and only have a finger? That works, too. I’m a nerd, so this is what I consider fun. Your mileage may vary."
March 11th, 2016
About the Author
Hi, I’m Swizec Teller. I help coders become software engineers.
Story time 👇
React+D3 started as a bet in April 2015. A friend wanted to learn React and challenged me to publish a book. A month later React+D3 launched with 79 pages of hard earned knowledge.
In April 2016 it became React+D3 ES6. 117 pages and growing beyond a single big project it was a huge success. I kept going, started live streaming, and publishing videos on YouTube.
In 2017, after 10 months of work, React + D3v4 became the best book I'd ever written. At 249 pages, many examples, and code to play with it was designed like a step-by-step course. But I felt something was missing.
So in late 2018 I rebuilt the entire thing as React for Data Visualization — a proper video course. Designed for busy people with real lives like you. Over 8 hours of video material, split into chunks no longer than 5 minutes, a bunch of new chapters, and techniques I discovered along the way.
React for Data Visualization is the best way to learn how to build scalable dataviz components your whole team can understand.
Some of my work has been featured in 👇
