MOOC Data Visualization and Infographics with D3 - Alberto Cairo, Scott Murray
1. Alberto Cairo
1.1. Features of a great viz
1.2. Link: https://www.dropbox.com/sh/aie8242ps40yz9c/AABpV6D8cPp1FUcPdnvtBBC-a/2Lesson2_0Slides.pdf?dl=0
1.2.1. Truthful
1.2.2. Functional
1.2.3. Beautiful
1.2.4. Insightful
1.2.5. Enlightening
1.2.6. Dont's
1.2.6.1. NYT Article
1.2.6.2. Link: http://www.nytimes.com/2014/11/25/upshot/a-persuasive-chart-showing-how-persuasive-charts-are.html
1.2.6.3. A Persuasive Chart Showing How Persuasive Charts Are
1.2.6.4. don’t lie to others
1.2.6.5. don’t lie to yourself
1.2.6.6. Link: http://www.lhup.edu/~DSIMANEK/cargocul.htm
1.2.6.7. “The first principle is that you must not fool yourself--and you are the easiest person to fool”
1.2.6.8. Richard Feynman, 1974, Caltech Graduation Address
1.2.6.9. minimize misunderstanding
1.2.6.10. Where to start
1.2.6.10.1. Start with the Data
1.2.6.10.2. Not with the Message
1.2.6.10.3. Link: http://www.thefunctionalart.com/2014/01/article-about-infographics-gets.html
1.2.6.10.4. The thought starts with the message and then gets into putting other related
1.2.6.10.5. information together to support it instead of starting with the data and thinking
1.2.6.10.6. of what to make of it – the message. The advantage of taking this route is also
1.2.6.10.7. that you are not just restricted by topics or numbers or just presenting ‘news’.
1.2.6.10.8. You can go a step further and air your ‘views’ too to make a point.”
1.3. Read more
1.3.1. Naked Statistiks
1.3.2. Link: http://www.goodreads.com/book/show/17986418-naked-statistics
1.3.3. How not to be wrong
1.3.4. Link: http://www.goodreads.com/book/show/18693884-how-not-to-be-wrong?from_search=true
1.3.5. Statistics unplugged
1.3.6. Link: http://www.goodreads.com/book/show/994445.Statistics_Unplugged
1.3.7. Discovering statistics using R
1.3.8. Link: http://www.goodreads.com/book/show/14468215-discovering-statistics-using-r
2. Scott Murray
2.1. Introducing D3
2.2. Link: http://chimera.labs.oreilly.com/books/1230000000345/ch02.html
2.2.1. JavaScript library for
2.2.2. creating data visualizations
2.2.2.1. Data
2.2.2.2. Driven
2.2.2.3. Documents(HTML/SG)
2.2.3. Background
2.2.3.1. Mike Bostock
2.2.3.2. Link: http://bost.ocks.org/mike/
2.2.3.3. Open source on GitHub
2.2.3.4. Link: https://github.com/mbostock/d3/
2.2.3.5. d3js.org
2.2.3.6. Link: http://www.d3js.org/
2.2.4. What It Does
2.2.4.1. Loading data into the
2.2.4.2. browser’s memory
2.2.4.3. Binding data to elements within
2.2.4.4. the document, creating new
2.2.4.5. elements as needed
2.2.4.6. Transforming those elements by interpreting
2.2.4.7. each element’s bound datum and setting its
2.2.4.8. visual properties accordingly
2.2.4.9. Transitioning elements between states
2.2.4.10. in response to user input
2.2.5. What It Doesn’t Do
2.2.5.1. “canned” visualizations
2.2.5.1.1. for explanatory visualization work
2.2.5.1.2. not for exploratory visualizations
2.2.5.2. older browsers
2.2.5.3. handle bitmap map tiles
2.2.5.3.1. Instead
2.2.5.4. hide your original data
2.2.5.4.1. client side
2.2.5.4.2. If your data can’t be
2.2.5.4.3. shared, then don’t use D3
2.3. Technology Fundamentals
2.4. Link: http://chimera.labs.oreilly.com/books/1230000000345/ch03.html
2.4.1. Code Editor
2.4.1.1. Sublime Text
2.4.1.2. Link: http://www.sublimetext.com/
2.4.2. localhost
2.4.2.1. Mamp
2.4.2.2. Link: http://www.mamp.info/de/
2.4.2.2.1. Mac
2.4.2.3. Wamp
2.4.2.4. Link: http://www.wampserver.com/en/
2.4.2.4.1. Windows web
2.4.2.4.2. development
2.4.2.4.3. environment
2.4.3. HTML
2.4.3.1. Markup Language
2.4.3.1.1. tags
2.4.3.2. Applying structure to content
2.4.4. CSS
2.4.4.1. Style the content visually
2.4.5. SVG
2.4.5.1. Scalable vector graphics
2.4.5.2. Image format
2.4.5.3. powerful with d3
2.4.5.3.1. Take the image and
2.4.5.3.2. manipulate it by using d3
2.4.5.4. written with tags
2.4.5.4.1. and attributes
2.4.5.4.2. line
2.4.5.4.3. rect
2.4.5.4.4. text
2.4.5.4.5. circle
2.4.5.5. peacefuly coexists with HTML
2.4.6. java script
2.4.6.1. Skripting language to dynamicly
2.4.6.2. manipulate things on the webpage
2.4.6.3. // comment
2.4.6.4. var something = value
2.4.6.4.1. int // number 5,7 etc.
2.4.6.4.2. "string" // text
2.4.6.4.3. var array
2.4.6.5. function
2.4.6.5.1. console.log(something)