$30 off During Our Annual Pro Sale. View Details »

Object Constancy In Visualisations

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/

Lukas Rieder

July 14, 2015
Tweet

More Decks by Lukas Rieder

Other Decks in Programming

Transcript

  1. Object Constancy In Visualisations

  2. Lukas “Overbryd” Rieder

  3. …back in March…

  4. None
  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

  10. None
  11. None
  12. Simple good example

  13. None
  14. None
  15. None
  16. Everything else is cups and balls.

  17. None
  18. None
  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.

  24. None
  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