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

D3.js 101 - Technical Intro

scottcheng.github.com

Post reply on HN
Print view View original

31–40 of 40 posts

Re: D3.js 101 - Technical Intro

#32

Post by watmough »

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.

Just use the space bar.

Re: D3.js 101 - Technical Intro

#33

Post by 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?

Re: D3.js 101 - Technical Intro

#34

Post by teamonkey »

watmough wrote: post #32
1_player wrote: post #6

Earlier quoted context omitted.

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.

Just use the space bar.

On iOS?

Re: D3.js 101 - Technical Intro

#36

Post by 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.

Re: D3.js 101 - Technical Intro

#37

Post by scottcheng »

bengillies wrote: post #16
insraq wrote: post #9

Earlier quoted context omitted.

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 han…

Exactly. Thanks bro.

Re: D3.js 101 - Technical Intro

#38

Post by scottcheng »

adamesque wrote: post #25
mattmanser wrote: post #5

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/

Beautiful work! Love the shining.

Re: D3.js 101 - Technical Intro

#39

Post by scottcheng »

wavesounds wrote: post #28

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.

Re: D3.js 101 - Technical Intro

#40

Post by adamesque »

adamesque wrote: post #25
mattmanser wrote: post #5

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/

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