D3.js 101 - Technical Intro • Hacker News Board

sighlent wrote: post #7

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.

Re: D3.js 101 - Technical Intro

#24

Post by ssfermoy » Mon, Feb 04, 2013, 7:42 PM UTC

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

Re: D3.js 101 - Technical Intro

#25

Post by adamesque » Mon, Feb 04, 2013, 7:49 PM UTC

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/

Re: D3.js 101 - Technical Intro

#26

Post by pc86 » Mon, Feb 04, 2013, 9:06 PM UTC

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/

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

Re: D3.js 101 - Technical Intro

#27

Post by adamesque » Mon, Feb 04, 2013, 9:15 PM UTC

pc86 wrote: post #26

adamesque wrote: post #25

Earlier quoted context omitted.

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

Re: D3.js 101 - Technical Intro

#28

Post by wavesounds » Mon, Feb 04, 2013, 10:09 PM UTC

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.

Re: D3.js 101 - Technical Intro

#29

Post by cheshire137 » Mon, Feb 04, 2013, 10:54 PM UTC

I expected more than, what, four slides?

Re: D3.js 101 - Technical Intro

#30

Post by AndreasFrom » Mon, Feb 04, 2013, 11:01 PM UTC

cheshire137 wrote: post #29

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