D3.js 101 - Technical Intro • Hacker News Board

D3.js 101 - Technical Intro

#1

Post by sebg » Mon, Feb 04, 2013, 2:28 PM UTC

D3.js 101 - Technical Intro
scottcheng.github.com

Re: D3.js 101 - Technical Intro

#2

Post by RaSoJo » Mon, Feb 04, 2013, 3:49 PM UTC

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

Re: D3.js 101 - Technical Intro

#3

Post by mattmanser » Mon, Feb 04, 2013, 3:59 PM UTC

RaSoJo wrote: post #2

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.

Re: D3.js 101 - Technical Intro

#4

Post by TannerLD » Mon, Feb 04, 2013, 4:00 PM UTC

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.

Re: D3.js 101 - Technical Intro

#5

Post by mattmanser » Mon, Feb 04, 2013, 4:03 PM UTC

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

Re: D3.js 101 - Technical Intro

#6

Post by 1_player » Mon, Feb 04, 2013, 4:12 PM UTC

TannerLD wrote: post #4

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.

Re: D3.js 101 - Technical Intro

#7

Post by sighlent » Mon, Feb 04, 2013, 4:12 PM UTC

Check out Scott Murray's D3 Tutorials

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

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

Re: D3.js 101 - Technical Intro

#8

Post by avianchaosx » Mon, Feb 04, 2013, 4:14 PM UTC

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

Re: D3.js 101 - Technical Intro

#9

Post by insraq » Mon, Feb 04, 2013, 4:15 PM UTC

TannerLD wrote: post #4

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.

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

Re: D3.js 101 - Technical Intro

#10

Post by thirsteh » Mon, Feb 04, 2013, 4:26 PM UTC

1_player wrote: post #6

TannerLD wrote: post #4

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.