14 ms·

Interactive Charts with D3

216 points by msukmanowsky 7y ago

pixelmonkey 7y ago
If building interactive charts with D3 leads to beautiful interactive blog posts like this one, combining code and visuals in a seamless way — well, then, sign me up! (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://www.fullstack.io/fullstack-d3)
- dpau 7y ago
  I've just been browsing the author's website, some really good examples of D3 usage and all the code is on Github: https://wattenberger.com/ https://wattenberger.com/ https://github.com/Wattenberger/Wattenberger-2016/tree/master/src/components/Articles https://github.com/Wattenberger/Wattenberger-2016/tree/maste...
- kamarg 7y ago
  I bought the book the day it was released. It's an excellent resource for anyone wanting to learn D3. Of particular surprise was that I haven't found any errors/omissions that caused the code examples to not work properly so far.
ryanmarsh 7y ago
Also see Dashing D3 (how I learned). https://www.dashingd3js.com/ https://www.dashingd3js.com/
ashout 7y ago
Is there a tutorial somewhere that goes over how to make the interactive editor on the right of the blog post? That is super cool!
- stackola 7y ago
  This appears to be a custom react setup, no premade framework that I could find. I found the non-minified .jsx [1] for it though, if you're into that. [1] https://gist.github.com/stackola/6e0afcfab8048152426f387e1ce08ea5 https://gist.github.com/stackola/6e0afcfab8048152426f387e1ce...
- wattenberger 7y ago
  Hey thanks! The code is all up at https://github.com/Wattenberger/blog/ https://github.com/Wattenberger/blog/ for anyone who's curious. 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/Interactions/Interactions.js#L650-L674 https://github.com/Wattenberger/blog/blob/master/src/Interac...). I'm happy to answer any questions about it, the code is a bit messy :)
spiderfarmer 7y ago
This website shows everything that's amazing about the internet and about web development, when done right. 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.
- delta1 7y ago
  Agreed, except the font is subjectively unpleasant to read. Easy fix is to change to font-family: serif; on the App component
  - wattenberger 7y ago
    Interesting! I'm actually a big fan of the font. Fonts are a weirdly personal choice - I'll think on adding a font toggle, since the whole point of the article is to be read.
    - delta1 7y ago
      Thank you for your work! It is definitely personal and as I mentioned, completely subjective. That is a great idea. Well done for shipping!
  - tomcam 7y ago
    Interesting—I’m exactly the opposite and very much enjoy the font.
- steve1977 7y ago
  Well - when I get the tooltip of one of the rightmost bars, I get horizontal scrollbars. That much for "done right"
  - spiderfarmer 7y ago
    Your second sentence should end with a period so I'm not taking your feedback seriously.
Keyframe 7y ago
in your Terminal, start a server in the examples/ folder there is no examples/ folder in github repo. Nice.
- wattenberger 7y ago
  Thanks for flagging! This post was a bit of a WIP and I had just moved the examples to their own repo last night :) Fixed and updated
vixen99 7y ago
Link missing! "How up to date is the book? The book is up to date with the latest version of D3" That page is not found.
- steve1977 7y ago
  Welcome to the world of web development. Maybe it was up to date last week?
- jashmenn 7y ago
  Whoops! I'll fix that URL. But it is up-to-date with the latest version of D3.
sillyquiet 7y ago
I make no assertion about its ease-of-implementation, niceness, or performance, but I love love love creating charts with D3 - there's an elegance to it that just speaks to me over the alternative graphing libraries in js.
- wattenberger 7y ago
  I totally agree - especially when I consider how long ago it was created (early 2011, more than 8 years ago) and how quickly most things in the Frontend web world age.
guru110 7y ago
Doesn't work in IE 10.
- lorenzq 7y ago
  Seriously? Who cares? That's not target demographic.
InTheArena 7y ago
Great design and work @wattenburger. Top notch tutorial, and approach to make it understandable.
- wattenberger 7y ago
  thanks! I really appreciate it
rchaud 7y ago
Is it just me or is D3 absurdly complicated for making a simple chart? I look through that tutorial and I ask myself why I'd go to the trouble of coding a chart from scratch when I've presumably already spent time analyzing and cleaning a dataset and am looking to make it presentable to an audience. 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.
- Isamu 7y ago
  Yes, if all you wanted was a simple chart I wouldn't take the time to learn D3 unless I was motivated to learn it for other reasons. There are simpler solutions for simple charts. 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.
  - wattenberger 7y ago
    Exactly! I should probably have a section (or at least a link to a resource) that talks about _why_ you would want to learn this. 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/ https://pudding.cool/) is a great showcase of possibilities, or even uncommon chart types like at https://wattenberger.com/fishing https://wattenberger.com/fishing

216 points by msukmanowsky 7y ago

If building interactive charts with D3 leads to beautiful interactive blog posts like this one, combining code and visuals in a seamless way — well, then, sign me up! (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://www.fullstack.io/fullstack-d3)

dpau 7y ago
I've just been browsing the author's website, some really good examples of D3 usage and all the code is on Github: https://wattenberger.com/ https://wattenberger.com/ https://github.com/Wattenberger/Wattenberger-2016/tree/master/src/components/Articles https://github.com/Wattenberger/Wattenberger-2016/tree/maste...
kamarg 7y ago
I bought the book the day it was released. It's an excellent resource for anyone wanting to learn D3. Of particular surprise was that I haven't found any errors/omissions that caused the code examples to not work properly so far.

ryanmarsh 7y ago

Also see Dashing D3 (how I learned). https://www.dashingd3js.com/ https://www.dashingd3js.com/

ashout 7y ago

Is there a tutorial somewhere that goes over how to make the interactive editor on the right of the blog post? That is super cool!

stackola 7y ago
This appears to be a custom react setup, no premade framework that I could find. I found the non-minified .jsx [1] for it though, if you're into that. [1] https://gist.github.com/stackola/6e0afcfab8048152426f387e1ce08ea5 https://gist.github.com/stackola/6e0afcfab8048152426f387e1ce...
wattenberger 7y ago
Hey thanks! The code is all up at https://github.com/Wattenberger/blog/ https://github.com/Wattenberger/blog/ for anyone who's curious. 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/Interactions/Interactions.js#L650-L674 https://github.com/Wattenberger/blog/blob/master/src/Interac...). I'm happy to answer any questions about it, the code is a bit messy :)

spiderfarmer 7y ago

This website shows everything that's amazing about the internet and about web development, when done right. 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.

delta1 7y ago
Agreed, except the font is subjectively unpleasant to read. Easy fix is to change to font-family: serif; on the App component
- wattenberger 7y ago
  Interesting! I'm actually a big fan of the font. Fonts are a weirdly personal choice - I'll think on adding a font toggle, since the whole point of the article is to be read.
  - delta1 7y ago
    Thank you for your work! It is definitely personal and as I mentioned, completely subjective. That is a great idea. Well done for shipping!
- tomcam 7y ago
  Interesting—I’m exactly the opposite and very much enjoy the font.
steve1977 7y ago
Well - when I get the tooltip of one of the rightmost bars, I get horizontal scrollbars. That much for "done right"
- spiderfarmer 7y ago
  Your second sentence should end with a period so I'm not taking your feedback seriously.

Keyframe 7y ago

in your Terminal, start a server in the examples/ folder there is no examples/ folder in github repo. Nice.

wattenberger 7y ago
Thanks for flagging! This post was a bit of a WIP and I had just moved the examples to their own repo last night :) Fixed and updated

vixen99 7y ago

Link missing! "How up to date is the book? The book is up to date with the latest version of D3" That page is not found.

steve1977 7y ago
Welcome to the world of web development. Maybe it was up to date last week?
jashmenn 7y ago
Whoops! I'll fix that URL. But it is up-to-date with the latest version of D3.

sillyquiet 7y ago

I make no assertion about its ease-of-implementation, niceness, or performance, but I love love love creating charts with D3 - there's an elegance to it that just speaks to me over the alternative graphing libraries in js.

wattenberger 7y ago
I totally agree - especially when I consider how long ago it was created (early 2011, more than 8 years ago) and how quickly most things in the Frontend web world age.

guru110 7y ago

Doesn't work in IE 10.

lorenzq 7y ago
Seriously? Who cares? That's not target demographic.

InTheArena 7y ago

Great design and work @wattenburger. Top notch tutorial, and approach to make it understandable.

wattenberger 7y ago
thanks! I really appreciate it

rchaud 7y ago

Is it just me or is D3 absurdly complicated for making a simple chart? I look through that tutorial and I ask myself why I'd go to the trouble of coding a chart from scratch when I've presumably already spent time analyzing and cleaning a dataset and am looking to make it presentable to an audience. 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.

Isamu 7y ago
Yes, if all you wanted was a simple chart I wouldn't take the time to learn D3 unless I was motivated to learn it for other reasons. There are simpler solutions for simple charts. 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.
- wattenberger 7y ago
  Exactly! I should probably have a section (or at least a link to a resource) that talks about _why_ you would want to learn this. 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/ https://pudding.cool/) is a great showcase of possibilities, or even uncommon chart types like at https://wattenberger.com/fishing https://wattenberger.com/fishing