Object Constancy In Visualisations

A talk I held at the 59th up.front usergroup Berlin on 14th of July 2015.

Code: https://gist.github.com/Overbryd/a93ddc3ea2ccff05f438
Live: http://bl.ocks.org/Overbryd/raw/a93ddc3ea2ccff05f438/

All References:

"Animated Transitions in Statistical Data Graphics" Paper
http://vis.berkeley.edu/papers/animated_transitions/2007-AnimatedTransitions-InfoVis.pdf

D3 InfoVis Paper

http://vis.stanford.edu/files/2011-D3-InfoVis.pdf

D3 contributors
https://github.com/mbostock/d3/graphs/contributors

D3 Gallery

https://github.com/mbostock/d3/wiki/Gallery

D3 API Reference

https://github.com/mbostock/d3/wiki/API-Reference

D3 “How Selections Work”

http://bost.ocks.org/mike/selection/

RUG-B Income Survey

http://overbryd.github.io/income_survey/

Ruby Logo Flat Image (Slide 2) by Vivien Leroy

https://dribbble.com/shots/988487-Flat-UI-Ruby

“Monster” Image (Slide 5) by Walt Disney Pictures and Pixar Animation Studios

Cups and Balls Trick (Slide 17) by Matthew Noah Falk

https://www.youtube.com/watch?v=KRtPoX6tExU

Gapminder's Wealth & Health of Nations
http://romsson.github.io/dragit/example/nations.html

Is it Better to Rent or Buy?

http://www.nytimes.com/interactive/2014/upshot/buy-rent-calculator.html

Visualising algorithms

http://bost.ocks.org/mike/algorithms/

Transcript

1. Object Constancy In Visualisations
2. Lukas “Overbryd” Rieder
3. …back in March…
5. 700 lines of code MONSTER
6. Design is hard.
7. I usually do not look back.
8. You know when a design is done, because it stopped being a nightmare.
9. Object Constancy
12. Simple good example
16. Everything else is cups and balls.
19. D3
20. Data-Driven-Documents
21. Data-Driven-Documents 1 2 3
22. Michael Bostock @mbostock Jason Davies @jasondavies
23. Overwhelmingly great projects and community.
25. Reuses the web ecosystem
26. yet another bar chart tutorial
27. Follow up on @Overbryd
 for slides and code
28. Follow @mbostock or @jasondavies
 for D3 development
29. Contact team@opencorporates.com for a job! The largest open database of companies in the world is looking for a frontend designer.
30. • "Animated Transitions in Statistical Data Graphics" Paper
 http://vis.berkeley.edu/papers/animated_transitions/2007-AnimatedTransitions-InfoVis.pdf • D3 InfoVis Paper
 http://vis.stanford.edu/files/2011-D3-InfoVis.pdf • D3 contributors
 https://github.com/mbostock/d3/graphs/contributors • D3 Gallery
 https://github.com/mbostock/d3/wiki/Gallery • D3 API Reference
 https://github.com/mbostock/d3/wiki/API-Reference • D3 “How Selections Work”
 http://bost.ocks.org/mike/selection/ • RUG-B Income Survey
 http://overbryd.github.io/income_survey/ • Ruby Logo Flat Image (Slide 2) by Vivien Leroy
 https://dribbble.com/shots/988487-Flat-UI-Ruby • “Monster” Image (Slide 5) by Walt Disney Pictures and Pixar Animation Studios • Cups and Balls Trick (Slide 17) by Matthew Noah Falk
 https://www.youtube.com/watch?v=KRtPoX6tExU • Gapminder's Wealth & Health of Nations
 http://romsson.github.io/dragit/example/nations.html • Is it Better to Rent or Buy?
 http://www.nytimes.com/interactive/2014/upshot/buy-rent-calculator.html • Visualising algorithms
 http://bost.ocks.org/mike/algorithms/ References