
D3.js 101 - Technical Intro - sebg
http://scottcheng.github.com/d3js-101/#/title
======
TannerLD
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.

~~~
1_player
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.

~~~
watmough
Just use the space bar.

~~~
teamonkey
On iOS?

------
mattmanser
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>

~~~
adamesque
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/>

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

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

------
sighlent
Check out Scott Murray's D3 Tutorials

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

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

~~~
uzusan
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.

------
brucehubbard
<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).

~~~
brucehubbard
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.

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

------
avianchaosx
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>

------
ssfermoy
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>

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

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

~~~
scottcheng
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.

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

------
jjm
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?

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

~~~
lancefisher
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!

------
cheshire137
I expected more than, what, four slides?

~~~
AndreasFrom
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).

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

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

------
ytopia
on IE don't work

