
Interactive Charts with D3 - msukmanowsky
https://wattenberger.netlify.com/
======
spiderfarmer
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
Agreed, except the font is subjectively unpleasant to read.

Easy fix is to change to font-family: serif; on the App component

~~~
wattenberger
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
Thank you for your work! It is definitely personal and as I mentioned,
completely subjective. That is a great idea.

Well done for shipping!

------
pixelmonkey
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
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/maste...](https://github.com/Wattenberger/Wattenberger-2016/tree/master/src/components/Articles)

------
ashout
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!

~~~
wattenberger
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/Interac...](https://github.com/Wattenberger/blog/blob/master/src/Interactions/Interactions.js#L650-L674)).

I'm happy to answer any questions about it, the code is a bit messy :)

------
rchaud
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
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
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)

------
sillyquiet
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
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.

------
vixen99
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.

~~~
jashmenn
Whoops! I'll fix that URL. But it is up-to-date with the latest version of D3.

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

~~~
wattenberger
thanks! I really appreciate it

------
Keyframe
_in your Terminal, start a server in the examples / folder_

there is no examples/ folder in github repo. Nice.

~~~
wattenberger
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

------
ryanmarsh
Also see Dashing D3 (how I learned).

[https://www.dashingd3js.com/](https://www.dashingd3js.com/)

------
guru110
Doesn't work in IE 10.

~~~
lorenzq
Seriously? Who cares? That's not target demographic.

