Interactive Charts with D3

#1

Post by msukmanowsky » Thu, Jun 13, 2019, 3:21 AM UTC

Interactive Charts with D3
wattenberger.netlify.com

Re: Interactive Charts with D3

#2

Post by pixelmonkey » Thu, Jun 13, 2019, 3:59 AM UTC

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)

Re: Interactive Charts with D3

#3

Post by ryanmarsh » Thu, Jun 13, 2019, 5:29 AM UTC

Also see Dashing D3 (how I learned).

https://www.dashingd3js.com/

Re: Interactive Charts with D3

#4

Post by ashout » Thu, Jun 13, 2019, 5:37 AM UTC

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!

Re: Interactive Charts with D3

#5

Post by dpau » Thu, Jun 13, 2019, 6:04 AM UTC

pixelmonkey wrote: post #2

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 )

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://github.com/Wattenberger/Wattenberger-2016/tree/maste...

Re: Interactive Charts with D3

#6

Post by spiderfarmer » Thu, Jun 13, 2019, 8:14 AM UTC

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.

Re: Interactive Charts with D3

#7

Post by Keyframe » Thu, Jun 13, 2019, 8:29 AM UTC

in your Terminal, start a server in the examples/ folder

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

Re: Interactive Charts with D3

#8

Post by delta1 » Thu, Jun 13, 2019, 9:02 AM UTC

spiderfarmer wrote: post #6

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.

Agreed, except the font is subjectively unpleasant to read.

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

Re: Interactive Charts with D3

#9

Post by vixen99 » Thu, Jun 13, 2019, 9:36 AM UTC

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.

Re: Interactive Charts with D3

#10

Post by steve1977 » Thu, Jun 13, 2019, 10:55 AM UTC

spiderfarmer wrote: post #6

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.

Well - when I get the tooltip of one of the rightmost bars, I get horizontal scrollbars. That much for "done right"