React for Dataviz
A monthly data visualization built with React, D3, and others.
Livecoded last Sunday of the month.
or subscribe to the newsletter 💌
Let's build a Sankey diagramHave you ever tried making a sankey diagram with d3+react, I can't seem to make it work for some reason.:/December 16th, 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
Christmas movies at the box officeChristmas 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 ChristmasChristmas 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 USAEvery year americans buy a bunch of christmas trees. Use the dataset to compare real and fake sales with two bar charts.December 3rd, 2018
Declarative D3 charts with React 16.3The 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
Server-side rendering a D3 chart with React 16The 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 ReactYou 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
Fractals in ReactI 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
Using d3js transitions in ReactOne 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 d3Particle 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