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.
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.
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.
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
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.
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.
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.
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.
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.
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.
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.
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.
39 comments
[ 3.7 ms ] story [ 94.3 ms ] threadGood intentions, awful execution.
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.
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...
http://wistia.com/doc/upload-api
Click on the background to see the voronoi cells, script here:
http://wistia.com/doc/javascripts/voronoi.js
Generator: http://2013.poster.thirteen23.com/generator/
Poster: http://2013.poster.thirteen23.com/
[1]: https://github.com/thirteen23/2013-holiday-poster
http://alignedleft.com/tutorials/d3/
Also in book: http://shop.oreilly.com/product/0636920026938.do
http://kpeng.github.com/d3-workshop
Also http://www.dashingd3js.com/ is a good tutorial for learning d3.js (goes into more detail than the linked slideshow).
I tried to add tons of comments explaining what's going on.
http://pineapple.io/resources/tagged/d3-js
I wanted to map a few tweets the other day and the examples helped a lot
http://shanes-tests.appspot.com/d3
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.
Wonder what other good tuts are out there?
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.