D3.js 101 - Technical Intro | Hacker News Reader

D3.js 101 - Technical Intro

scottcheng.github.com

158 pointssebg39 comments

These two-dimensional presentations confuse me if I don't realize they are two-dimensional at first. I press the right arrow key through the entire presentation and I find it much shorter than I imagined. Then I realize you have to go down as well.

I was very interested to see a presentation about D3.js, I struggled to wrap my head around it a few days ago and left for simplier libraries. I opened this presentation and I can't figure out in which order should I visit these pages. I closed it in anger.

Good intentions, awful execution.

Go right till you see a down arrow, go down until you can't go down further, then go right, and repeat. It's silly and unnecessary, yes, but not that hard.

check out http://www.dashingd3js.com - I wrote it and it starts at the basics and goes from there...

Just use the space bar.

On iOS?

Agreed. They look cool, but they are usability disaster.

It really depends on who your intended user is. If the slides are intended to form a presentation (quite likely), then the user is often the person making the slides in the first place. In such cases they're not a usability disaster at all. Rather, they're really helpful (being able to switch between different sections, or miss sections that your audience already knows about easily is really useful).

On the other hand, if the slides are intended for reading, then yes, they may be a usability disaster. But then, slides aren't going to be the best format for reading anyway.

Exactly. Thanks bro.

It's reveal.js and yes, confusing.

Don't think too much, just hit 'Space' and it will guide you correctly through the slides.

Altough even the guided tour feels spatially incorrect...

I wish I could just figure out what content is actually on this thing and skip to the parts that are interesting. Just because people can reveal.js doesn't mean they should. ugh

You can press <ESC> to see an overview of the whole presentation - which is interactive.

As a fun but related aside, Wistia are using d3 for a pretty cool background on their developer docs:

http://wistia.com/doc/upload-api

Click on the background to see the voronoi cells, script here:

http://wistia.com/doc/javascripts/voronoi.js

Another fun but related aside: I used d3 to help generate layouts of tightly packed circles, which are then used as the animated background in my agency's 2013 holiday poster.

Generator: http://2013.poster.thirteen23.com/generator/

Poster: http://2013.poster.thirteen23.com/

This is pretty cool. I'd be interested in reading a blog post about how you did this, pitfalls you encountered, etc.

Thanks! There's a barebones colophon in the HTML source, and I've published the source code [1], but I do intend to write up sometime soon.

[1]: https://github.com/thirteen23/2013-holiday-poster

Beautiful work! Love the shining.

I just wrote a little bit about building the generator: http://thirteen23.com/garage/2013/02/building-our-bubbly-pos...

Check out Scott Murray's D3 Tutorials

http://alignedleft.com/tutorials/d3/

Also in book: http://shop.oreilly.com/product/0636920026938.do

Thanks for posting this, I had read part of those tutorials a few weeks back and they were really great at explaining the logic, but I couldn't find them again when I wanted to show them to a colleague.

Thank you for posting this!

http://tributary.io/ is a cool playground for d3.js.

Also http://www.dashingd3js.com/ is a good tutorial for learning d3.js (goes into more detail than the linked slideshow).

I mocked up a simple chart using d3 in tributary for our development team last week if anyone is interested in looking at it: http://tributary.io/inlet/4637557

I tried to add tons of comments explaining what's going on.

I'm the guy who made this presentation. I see a lot of complaints about the two-dimensional layout of slides, so let me say that this was made for a talk, and I put it online so that my audience could play with it when I gave my talk. Also, during my talk, I did lots of real-time demos on that empty playground page and highlighted a bunch of technical details that are not on the slides. Therefore I agree with those who find it confusing that this is definitely not the best reading material for learning d3, but like @bengillies said, it served my purpose as the presenter.

If you are interested in learning d3, there are a bunch of tutorials on the GitHub wiki: https://github.com/mbostock/d3/wiki/Tutorials, and I like this one in particular: http://mbostock.github.com/d3/tutorial/circle.html. Not comprehensive, but very clear on what it covers.

Let me also recommend this talk for d3 starters: http://vimeo.com/35005701. It starts with very basic stuffs (JSON), and has lots of live demos. I kinda learned from it when making this presentation.

I did a SkillShare presentation on D3.js a few months ago covering basic topics and workflow within D3.js. People might find it useful after looking at this presentation, since it goes a little bit more in-depth with documented source code.

http://kpeng.github.com/d3-workshop

The best things about D3 are how well documented it is and the volume of examples available: http://bl.ocks.org/mbostock

I wanted to map a few tweets the other day and the examples helped a lot

http://shanes-tests.appspot.com/d3

I wholeheartedly enjoyed the presentation (which makes me a weirdo I guess). The content was also really good. I have been wanting to fool around with D3, but it seemed too daunting.

Anyone else get an error trying to run this slide? (ARRAYS & DATA MANIPULATION) on http://scottcheng.github.com/d3js-101/#/data-manipulation

I don't understand whats going on here, what does array[, accessor] and [start, ]stop[, step] mean? I get an error "SyntaxError: Unexpected token ," which I tend to agree with.

That's just API spec, not syntactically correct JavaScript... The parameters in [] are optional. I.e. you can pass only one array to d3.max, or pass an array and an accessor. Similar with the range API.

The content was good, but the layout of the presentation was stupid.

I think there can never be enough D3 tuts, added this to my bookmark list. I really enjoy the wide variety of data representations possible with D3.

Wonder what other good tuts are out there?

Why playground no load for me :( http://scottcheng.github.com/d3js-101/playground/

I'm guessing you're just meant to use the js console, it's got the script loaded and a prepopulated array in it.

Yeah, that page is basically a blank slate with d3.js loaded. You should open the js console, and cut/paste code from the presentation. Works great!

http://tributary.io is a better playground.

I expected more than, what, four slides?

It's two-dimensional, you can also go down. Press ESC to get an overview and pressing SPC guides you through all the slides (ie. goes down as well).

Here's more resources for d3.js on my site :)

http://pineapple.io/resources/tagged/d3-js

on IE don't work

Reply on news.ycombinator.com