Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Interactive Charts with D3

wattenberger.netlify.com

Post reply on HN
Print view View original

11–20 of 33 posts

Re: Interactive Charts with D3

#12

Post by stackola »

ashout wrote: post #4

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!

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/6e0afcfab8048152426f387e1ce...

Re: Interactive Charts with D3

#13

Post by spiderfarmer »

steve1977 wrote: post #10
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"

Your second sentence should end with a period so I'm not taking your feedback seriously.

Re: Interactive Charts with D3

#14

Post by wattenberger »

ashout wrote: post #4

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!

Hey thanks! The code is all up at 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...).

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

Re: Interactive Charts with D3

#16

Post by wattenberger »

steve1977 wrote: post #10
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"

If that's the worst thing you found, I'm stoked!

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.

Re: Interactive Charts with D3

#17

Post by wattenberger »

delta1 wrote: post #8
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

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.

Re: Interactive Charts with D3

#18

Post by 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.
Post reply on HN