Interactive Charts with D3
wattenberger.netlify.com
wattenberger.netlify.com
There are no popups, cookie warnings, ads or other cruft. It's informative, exquisitely designed, interactive in the right places, it loads fast and everything fits together perfectly.
I'm in awe.
Easy fix is to change to font-family: serif; on the App component
Well done for shipping!
I was hoping that only happened at few enough window sizes that not many people noticed. This is an unfortunate side-effect of using iframes to show inline examples. There are a few solutions - I'm hoping to have time to work through one of them this weekend.
But it's a typical example why front end development with web technologies still isn't where it should it be.
And I'm not blaming the front end devs, the technology just isn't up to the task. The fact alone that you have to deal with problems like this is telling enough.
I'm really interested in using this amazing tech most of us have at our fingertips to try new ways to learn things. There have to be so many avenues we haven't yet explored, and I find that so exciting.
(This introductory post is by the author of “Fullstack D3 and Data Visualization”, a book notable for, among other things, having the coolest front cover in existence: https://www.fullstack.io/fullstack-d3)
https://wattenberger.com/ https://github.com/Wattenberger/Wattenberger-2016/tree/maste...
I found the non-minified .jsx [1] for it though, if you're into that.
[1] https://gist.github.com/stackola/6e0afcfab8048152426f387e1ce...
There are some interesting bits in there - the basic structure is:
- the post itself is at src/Interactions
- the code changes using a ScrollEvent component (src/_ui/Code)
- the code examples (inline and fixed on the right) are using the Code component (src/_ui/Code)
- the inline demos are using the LocalExample component (src/_ui/LocalExample). The LocalExample component basically builds an iframe and displays it
Both of these components support:
- a list of lines that are removed
- a list of lines that are added
I've been liking that this setup lets me have complete examples that work as standalone web pages, but I can also edit them on the fly and work through changes on-the-fly. Which lets me talk about interim states [like this one](https://github.com/Wattenberger/blog/blob/master/src/Interac...).
I'm happy to answer any questions about it, the code is a bit messy :)
If I had to go with a custom design, I'd use HighCharts (free for non-commercial use) or ChartsJS (free), which already have these basic functions (interactive hover tooltips with supplementary data) built in. Just declare your data variable and specify your chart type, and that's it. You can also modify the CSS to change the look and feel. Non-coders could build a dash in Google Data Studio, PowerBI or Tableau and export it for embedding on the web.
Don't get me wrong, I've seen Mike Bostock's D3 gallery and yes, it's ideal for making incredibly elaborate, artistic data visualizations. But a line chart should be simple.
I have used D3 for complicated visualizations, for example an orthographic view of stacked floor plans, you click on a floor and it slides out, zooms and re-orients itself and displays the time- and location-based data in different colored areas around the floor.
Complicated things like that is where D3 shines I think.
I have an image in the book detailing the spectrum of data viz tools on the web. At one end are the quick-pickup tools that aren't customizeable, and at the other end you have.. d3. Which isn't really a framework so much as a collection of tools that can help with making web charts.
What I probably failed to communicate in this post is that there are tons of opportunities to help communicate data with the web. Tooltips are just the most common interaction, but you could easily envision using scroll as a trigger, or adding a way to "zoom in" on parts of a chart.
The learning curve is definitely steeper, but once you have the skills, the world is really your oyster for visualizing data online. The pudding (https://pudding.cool/) is a great showcase of possibilities, or even uncommon chart types like at https://wattenberger.com/fishing
But as soon as you need to deviate or add extra functionality from what your chart library gives you, it's often about as much work to just do the chart from scratch in D3 than to dig into the internals of ChartJS or whatever to add in what you want.
Also, while it does have a steep learning curve, once you get the hang of it it's not that hard.
"How up to date is the book? The book is up to date with the latest version of D3" That page is not found.
there is no examples/ folder in github repo. Nice.