Stop copying past D3 examples! Create your own data visualizations. Learn how to create scalable components that everyone in your team can understand.
Dynamic data visualization for the Internet is the pain in the ass that you see.
Yes, of course, anyone can build a chart in Google Docs, but that’s not what you need, is it? You cannot create a product on top of Google Sheets. You definitely cannot enter dynamic data from the API, personalized for the user, and let them navigate and explore them.
You heard people build these amazing things with D3. The New York Times uses it, The Guardian – as well as Netflix, Uber, 23andMe, Visa, Walmart and many others. I know, because they were at my seminars
94+ Full HD videos
Viewing the code in front of your eyes makes it easier to understand.
React is the biggest revolution in JavaScript programming since jQuery appeared on the scene 10 years ago, and D3 is different from everything you’ve seen before.
The problem is how most of us first learn to program. “It’s like a cooking recipe,” the teachers will say.
Take sweet pepper and chop it. Then sprinkle with salt and pepper, add olive oil and voila: you have a refreshing salad. A very simple salad with one ingredient, but nonetheless a salad. You can follow, and ultimately you will understand what the code does.
This is required programming. It reads like a sequence of steps.
React and D3 are declarative. You don’t write how you want your code to work, you write what you want to achieve. Your bell pepper salad recipe looks something like this:
<Salad>
<Oil />
<BellPepper cut salted />
</Salad>
You look at it and you know that it is a salad. It includes butter and bell peppers. You do not need to read the steps to find out the result. The recipe states what it does.
Declarative code makes your project cleaner and easier to maintain. It means more time to create value for your users and customers.
But learning to think is declaratively difficult. It starts as voodoo magic. We were all there.
That’s why React for data visualization starts with small building blocks, and then extends to entire dashboards. Learn the basics in about an hour, then dive as deep as you want.
Why use React and D3 to visualize data?
I believe that React combined with D3 is the best thing that has ever happened with data visualization on the Internet.
The React approach to components makes your code more reusable, its advanced algorithms make it fast, and D3 offers the best tools for data processing. Together they represent the two most popular JavaScript libraries on the web.
React for Data Visualization gives you a brief overview of the basic principles with which you can start, and then a deep dive that strengthens your knowledge through various projects and examples. Create a working code that you can show to your friends, boss and colleagues.
Learn the basics with interactive examples right in your browser – no need to install anything. Forget about Npm, Webpack, Babel, and Node. Just React and D3.
Immerse yourself in complex projects that will teach you how it all fits together. Create interactive visualizations, create animations, and increase productivity with canvas. Learn everything you need to know about building beautiful apps with React and D3.
From the basics of React and D3 to state handling with Redux and MobX, React alternatives such as Preact and Inferno.
And the best part?
All this is cut into pieces. If you have 5 minutes or an hour a day, you can take this course. This is a promise.
React data visualization based on practical examples
Pie chart goes to chart
Shows how to use hybrid animation for data-driven effects. Even the transition between different types of visualization.
Interactive map
Shows how to work with topographic data, draw maps and regions. We do map scaling and research.
Interactive bar chart
Teaches you some D3 statistical functions and the basics of charting. Drawing shapes, adding axes, data analysis …
Interactive toolbar
Together they form an interactive panel where several diagrams exchange data, respond to common controls and act together to give users a complete picture.
Animated alphabet
An animated alphabet will teach you how to create input / update / output transitions. Animated elements in and out of your data visualization.
Particle generator
The particle generator will teach you the basics of using Redux to manage state, expand your browser, and animate tens of thousands of elements.
Interactive game of billiards
An interactive pool game will teach you how to render React graphical components on canvas HTML5, make them interactive, and use MobX to handle states.
