MOOC Data Visualization and Infographics with D3 - Alberto Cairo, Scott Murray

Get Started. It's Free
or sign up with your email address
MOOC Data Visualization and Infographics with D3 - Alberto Cairo, Scott Murray by Mind Map: MOOC Data Visualization and  Infographics with D3 - Alberto  Cairo, Scott Murray

1. Alberto Cairo

1.1. Features of a great viz

1.2. Link:

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 NYT Article Link: A Persuasive Chart Showing How Persuasive Charts Are don’t lie to others don’t lie to yourself Link: “The first principle is that you must not fool yourself--and you are the easiest person to fool” Richard Feynman, 1974, Caltech Graduation Address minimize misunderstanding Where to start Start with the Data Not with the Message Link: The thought starts with the message and then gets into putting other related information together to support it instead of starting with the data and thinking of what to make of it – the message. The advantage of taking this route is also that you are not just restricted by topics or numbers or just presenting ‘news’. 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:

1.3.3. How not to be wrong

1.3.4. Link:

1.3.5. Statistics unplugged

1.3.6. Link:

1.3.7. Discovering statistics using R

1.3.8. Link:

2. Scott Murray

2.1. Introducing D3

2.2. Link:

2.2.1. JavaScript library for

2.2.2. creating data visualizations Data Driven Documents(HTML/SG)

2.2.3. Background Mike Bostock Link: Open source on GitHub Link: Link:

2.2.4. What It Does Loading data into the browser’s memory Binding data to elements within the document, creating new elements as needed Transforming those elements by interpreting each element’s bound datum and setting its visual properties accordingly Transitioning elements between states in response to user input

2.2.5. What It Doesn’t Do “canned” visualizations for explanatory visualization work not for exploratory visualizations older browsers handle bitmap map tiles Instead hide your original data client side If your data can’t be shared, then don’t use D3

2.3. Technology Fundamentals

2.4. Link:

2.4.1. Code Editor Sublime Text Link:

2.4.2. localhost Mamp Link: Mac Wamp Link: Windows web development environment

2.4.3. HTML Markup Language tags Applying structure to content

2.4.4. CSS Style the content visually

2.4.5. SVG Scalable vector graphics Image format powerful with d3 Take the image and manipulate it by using d3 written with tags and attributes line rect text circle peacefuly coexists with HTML

2.4.6. java script Skripting language to dynamicly manipulate things on the webpage // comment var something = value int // number 5,7 etc. "string" // text var array function console.log(something)

3. Module 2

3.1. (March 23-29, 2015)

3.2. Web + D3