11 ms·

D3.js 101 - Technical Intro

158 points by sebg 14y ago

RaSoJo 14y ago
Why playground no load for me :( http://scottcheng.github.com/d3js-101/playground/ http://scottcheng.github.com/d3js-101/playground/
- mattmanser 14y ago
  I'm guessing you're just meant to use the js console, it's got the script loaded and a prepopulated array in it.
- lancefisher 14y ago
  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!
- brucehubbard 14y ago
  http://tributary.io http://tributary.io is a better playground.
TannerLD 14y ago
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 14y ago
  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.
  - thirsteh 14y ago
    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.
  - sebg 14y ago
    check out http://www.dashingd3js.com http://www.dashingd3js.com - I wrote it and it starts at the basics and goes from there...
  - watmough 14y ago
    Just use the space bar.
    - teamonkey 14y ago
      On iOS?
- insraq 14y ago
  Agreed. They look cool, but they are usability disaster.
  - bengillies 14y ago
    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.
    - scottcheng 14y ago
      Exactly. Thanks bro.
- cstuder 14y ago
  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...
- feralmoan 14y ago
  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
- adhipg 14y ago
  You can press <ESC> to see an overview of the whole presentation - which is interactive.
mattmanser 14y ago
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 http://wistia.com/doc/upload-api Click on the background to see the voronoi cells, script here: http://wistia.com/doc/javascripts/voronoi.js http://wistia.com/doc/javascripts/voronoi.js
- adamesque 14y ago
  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/ http://2013.poster.thirteen23.com/generator/ Poster: http://2013.poster.thirteen23.com/ http://2013.poster.thirteen23.com/
  - pc86 14y ago
    This is pretty cool. I'd be interested in reading a blog post about how you did this, pitfalls you encountered, etc.
    - adamesque 14y ago
      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 https://github.com/thirteen23/2013-holiday-poster
  - scottcheng 14y ago
    Beautiful work! Love the shining.
  - adamesque 14y ago
    I just wrote a little bit about building the generator: http://thirteen23.com/garage/2013/02/building-our-bubbly-poster/ http://thirteen23.com/garage/2013/02/building-our-bubbly-pos...
sighlent 14y ago
Check out Scott Murray's D3 Tutorials http://alignedleft.com/tutorials/d3/ http://alignedleft.com/tutorials/d3/ Also in book: http://shop.oreilly.com/product/0636920026938.do http://shop.oreilly.com/product/0636920026938.do
- uzusan 14y ago
  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.
- firen 14y ago
  Thank you for posting this!
avianchaosx 14y ago
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 http://kpeng.github.com/d3-workshop
deepuj 14y ago
The content was good, but the layout of the presentation was stupid.
RokStdy 14y ago
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.
brucehubbard 14y ago
http://tributary.io/ http://tributary.io/ is a cool playground for d3.js. Also http://www.dashingd3js.com/ http://www.dashingd3js.com/ is a good tutorial for learning d3.js (goes into more detail than the linked slideshow).
- brucehubbard 14y ago
  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 http://tributary.io/inlet/4637557 I tried to add tons of comments explaining what's going on.
TallboyOne 14y ago
Here's more resources for d3.js on my site :) http://pineapple.io/resources/tagged/d3-js http://pineapple.io/resources/tagged/d3-js
ssfermoy 14y ago
The best things about D3 are how well documented it is and the volume of examples available: http://bl.ocks.org/mbostock 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 http://shanes-tests.appspot.com/d3
wavesounds 14y ago
Anyone else get an error trying to run this slide? (ARRAYS & DATA MANIPULATION) on http://scottcheng.github.com/d3js-101/#/data-manipulation 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 14y ago
  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.
cheshire137 14y ago
I expected more than, what, four slides?
- AndreasFrom 14y ago
  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).
ytopia 14y ago
on IE don't work
jjm 14y ago
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?
scottcheng 14y ago
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 https://github.com/mbostock/d3/wiki/Tutorials, and I like this one in particular: http://mbostock.github.com/d3/tutorial/circle.html 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 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.

158 points by sebg 14y ago

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

mattmanser 14y ago
I'm guessing you're just meant to use the js console, it's got the script loaded and a prepopulated array in it.
lancefisher 14y ago
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!
brucehubbard 14y ago
http://tributary.io http://tributary.io is a better playground.

TannerLD 14y ago

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 14y ago
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.
- thirsteh 14y ago
  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.
- sebg 14y ago
  check out http://www.dashingd3js.com http://www.dashingd3js.com - I wrote it and it starts at the basics and goes from there...
- watmough 14y ago
  Just use the space bar.
  - teamonkey 14y ago
    On iOS?
insraq 14y ago
Agreed. They look cool, but they are usability disaster.
- bengillies 14y ago
  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.
  - scottcheng 14y ago
    Exactly. Thanks bro.
cstuder 14y ago
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...
feralmoan 14y ago
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
adhipg 14y ago
You can press <ESC> to see an overview of the whole presentation - which is interactive.

mattmanser 14y ago

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 http://wistia.com/doc/upload-api Click on the background to see the voronoi cells, script here: http://wistia.com/doc/javascripts/voronoi.js http://wistia.com/doc/javascripts/voronoi.js

adamesque 14y ago
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/ http://2013.poster.thirteen23.com/generator/ Poster: http://2013.poster.thirteen23.com/ http://2013.poster.thirteen23.com/
- pc86 14y ago
  This is pretty cool. I'd be interested in reading a blog post about how you did this, pitfalls you encountered, etc.
  - adamesque 14y ago
    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 https://github.com/thirteen23/2013-holiday-poster
- scottcheng 14y ago
  Beautiful work! Love the shining.
- adamesque 14y ago
  I just wrote a little bit about building the generator: http://thirteen23.com/garage/2013/02/building-our-bubbly-poster/ http://thirteen23.com/garage/2013/02/building-our-bubbly-pos...

sighlent 14y ago

Check out Scott Murray's D3 Tutorials http://alignedleft.com/tutorials/d3/ http://alignedleft.com/tutorials/d3/ Also in book: http://shop.oreilly.com/product/0636920026938.do http://shop.oreilly.com/product/0636920026938.do

uzusan 14y ago
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.
firen 14y ago
Thank you for posting this!

avianchaosx 14y ago

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 http://kpeng.github.com/d3-workshop

deepuj 14y ago

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

RokStdy 14y ago

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.

brucehubbard 14y ago

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

brucehubbard 14y ago
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 http://tributary.io/inlet/4637557 I tried to add tons of comments explaining what's going on.

TallboyOne 14y ago

Here's more resources for d3.js on my site :) http://pineapple.io/resources/tagged/d3-js http://pineapple.io/resources/tagged/d3-js

ssfermoy 14y ago

The best things about D3 are how well documented it is and the volume of examples available: http://bl.ocks.org/mbostock 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 http://shanes-tests.appspot.com/d3

wavesounds 14y ago

Anyone else get an error trying to run this slide? (ARRAYS & DATA MANIPULATION) on http://scottcheng.github.com/d3js-101/#/data-manipulation 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 14y ago
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.

cheshire137 14y ago

I expected more than, what, four slides?

AndreasFrom 14y ago
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).

ytopia 14y ago

on IE don't work

jjm 14y ago

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?

scottcheng 14y ago

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 https://github.com/mbostock/d3/wiki/Tutorials, and I like this one in particular: http://mbostock.github.com/d3/tutorial/circle.html 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 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.