Intro to Data Visualizations
-
Upload
daniel-greenfeld -
Category
News & Politics
-
view
2.227 -
download
9
description
Transcript of Intro to Data Visualizations
![Page 1: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/1.jpg)
@pydanny
Data VisualizationFundamentals
by Daniel Greenfeld
Source: US CensusRenderer: Many EyesCreated: 12/8/2012
Saturday, December 8, 12
![Page 2: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/2.jpg)
@pydanny
• Principal at Cartwheel Web
• Author of pydanny.com, a popular technology blog
• Entrepreneur and CTO
@pydanny
• Learned Data Visualization at NASA
Saturday, December 8, 12
![Page 3: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/3.jpg)
@pydanny
Helping tomorrow!
I’ll be there to help, so ask away!
Or email me at [email protected]
Saturday, December 8, 12
![Page 4: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/4.jpg)
@pydanny
Tools covered
•Many Eyes
•Google Charts
•D3.js
No coding
Some coding
Need a developer
Saturday, December 8, 12
![Page 5: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/5.jpg)
@pydanny
Many Eyesbit.ly/many-eyes
Saturday, December 8, 12
![Page 6: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/6.jpg)
@pydanny
Many Eyes
bit.ly/many-eyesSaturday, December 8, 12
![Page 7: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/7.jpg)
@pydanny
Many Eyes
• Great for rapid visualizations
• Free service provided by IBM.
• All data posted is freely available.
• Generates accessible content.
Pros:
Saturday, December 8, 12
![Page 8: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/8.jpg)
@pydanny
Many Eyes
• Closed source - IBM can shut it down.
• All data posted is freely available.
• Uses Java applets to present data.
Cons:
Saturday, December 8, 12
![Page 9: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/9.jpg)
@pydanny
Using Many Eyes
1. Go to bit.ly/many-eyes2. Sign up with your email3. Upload some data4. Create a visualization
Let’s try it out!
Saturday, December 8, 12
![Page 10: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/10.jpg)
@pydanny
Many Eyes
bit.ly/many-eyesSaturday, December 8, 12
![Page 11: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/11.jpg)
@pydanny
Signing Up I
Click ‘login’
bit.ly/many-eyesSaturday, December 8, 12
![Page 12: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/12.jpg)
@pydanny
Signing Up II
Click ‘register’
Saturday, December 8, 12
![Page 13: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/13.jpg)
@pydanny
Signup III
Email and Captcha
Saturday, December 8, 12
![Page 14: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/14.jpg)
@pydanny
Follow emailed instructions
Talk to me afterwards if you have any problems.
Saturday, December 8, 12
![Page 15: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/15.jpg)
@pydanny
What data to use?
• Many Eyes has a lot of free data on it.
• I want a new report.
• On data that I generated.
Saturday, December 8, 12
![Page 16: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/16.jpg)
@pydanny
Example I
• I run a site called
• I want to know how many of each pet type is registered.
Saturday, December 8, 12
![Page 17: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/17.jpg)
@pydanny
Example I Data Prep
• I exported the data from to CSV.
• Opened the CSV with Excel
Saturday, December 8, 12
![Page 18: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/18.jpg)
@pydanny
Uploading Data I
Copy/paste from your
spreadsheet
Saturday, December 8, 12
![Page 19: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/19.jpg)
@pydanny
Uploading Data II
Copy/pasted from Excel
Many Eyes interpretation
of my data
Saturday, December 8, 12
![Page 20: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/20.jpg)
@pydanny
Upload saved!
Visualize!
Saturday, December 8, 12
![Page 21: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/21.jpg)
@pydanny
Choosing Visualizations
• Analyze Text
• Compare a set of values
• See relationships among data points
• See the parts of a whole
• See the world
• Track rises and falls over time
Saturday, December 8, 12
![Page 22: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/22.jpg)
@pydanny
Choosing Visualizations
• Analyze Text
• Compare a set of values
• See relationships among data points
• See the parts of a whole
• See the world
• Track rises and falls over time
Bar/Bubble charts
Pie Charts
Saturday, December 8, 12
![Page 23: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/23.jpg)
@pydanny
Bar Chart
Saturday, December 8, 12
![Page 24: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/24.jpg)
@pydanny
Bubble Chart
Saturday, December 8, 12
![Page 25: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/25.jpg)
@pydanny
Pie Chart
Saturday, December 8, 12
![Page 26: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/26.jpg)
@pydanny
Easy Conclusions
• Dogs are clearly the most popular pet
• Cats come second
• Birds, Fish, Rabbits are roughly the same
Saturday, December 8, 12
![Page 27: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/27.jpg)
@pydanny
Many EyesText Analysis
Saturday, December 8, 12
![Page 28: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/28.jpg)
@pydanny
Example II
• I built a site called
• I want to do some text analysis.
Saturday, December 8, 12
![Page 29: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/29.jpg)
@pydanny
Scraping Text
copy/pastewith explicit permission of
site and author
http://bit.ly/WPfEdeSaturday, December 8, 12
![Page 30: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/30.jpg)
@pydanny
Upload the Data
Saturday, December 8, 12
![Page 31: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/31.jpg)
@pydanny
Word Tree
Click for better view
Warning: Dependent on java applets
Saturday, December 8, 12
![Page 32: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/32.jpg)
@pydanny
Tag Cloud
http://www.niemanlab.org/2011/10/word-clouds-considered-harmful/
Saturday, December 8, 12
![Page 33: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/33.jpg)
@pydanny
Word Cloud
Saturday, December 8, 12
![Page 34: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/34.jpg)
@pydanny
Many EyesGeo Analysis
Saturday, December 8, 12
![Page 35: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/35.jpg)
@pydanny
Example III
• I’m the CTO of
• We want to share information about people moving.
Saturday, December 8, 12
![Page 36: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/36.jpg)
@pydanny
Prep the data
• Export to CSV
• Open with Excel
Saturday, December 8, 12
![Page 37: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/37.jpg)
@pydanny
Upload the Data
Saturday, December 8, 12
![Page 38: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/38.jpg)
@pydanny
Choose Visualization
Saturday, December 8, 12
![Page 39: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/39.jpg)
@pydanny
Destinations
Saturday, December 8, 12
![Page 40: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/40.jpg)
@pydanny
Google Charts
Saturday, December 8, 12
![Page 41: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/41.jpg)
@pydanny
Google Charts Boot Camp
https://developers.google.com/chart/
Saturday, December 8, 12
![Page 42: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/42.jpg)
@pydanny
Google Charts
• Free for many use cases
• Customizable skins and themes
• Relatively easy to use
• Really good documentation
• Bootcamp coming up!
Pros
Saturday, December 8, 12
![Page 43: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/43.jpg)
@pydanny
Google Charts
• Closed source - Google can change terms
• You have to know a little code.
• You won’t need much of my help!
Cons
Saturday, December 8, 12
![Page 44: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/44.jpg)
@pydanny
D3.js
Saturday, December 8, 12
![Page 45: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/45.jpg)
@pydanny
D3.js example I
http://nyti.ms/SN5mfhFour Ways to Slice Obama’s Budget Proposal
Saturday, December 8, 12
![Page 46: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/46.jpg)
@pydanny
D3.js example II
http://www.isbarackobamathepresident.com/Saturday, December 8, 12
![Page 47: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/47.jpg)
@pydanny
D3.js
• Open source! (source code on Github)
• W3C Standard Friendly
• Unbelievable power
• Killer examples
• Can use the same CSVs as Many-Eyes
Pros
Saturday, December 8, 12
![Page 48: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/48.jpg)
@pydanny
D3.js
• You will need a developer
• Very steep learning curve
Cons
Saturday, December 8, 12
![Page 49: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/49.jpg)
@pydanny
Warningcode ahead!
Saturday, December 8, 12
![Page 50: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/50.jpg)
@pydanny
JQuery-like selectors
d3.selectAll("p").style("color", "white");
Saturday, December 8, 12
![Page 51: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/51.jpg)
@pydanny
Dynamic Properties
d3.selectAll("p").style("color", function() { return "hsl(" + Math.random() * 360 + ",100%,50%)";});
d3.selectAll("p").style("color", function(d, i) { return i % 2 ? "#fff" : "#eee";});
Saturday, December 8, 12
![Page 52: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/52.jpg)
@pydanny
Loading Data
d3.json("census.json", function(error, data){} // Do logic here});
d3.csv("pets.csv", function(error, data){} // Do logic here});
d3.tsv("immigrants.tsv", function(error, data){} // Do logic here});
Supports JSON, CSV, and TSV.Saturday, December 8, 12
![Page 53: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/53.jpg)
@pydanny
Data Binding
d3.selectAll("p") .data([4, 8, 15, 16, 23, 42]) .style("font-size", function(d) {
return d + "px"; });
Binds values to the first six paragraphs
Sets font-size per bound paragraph
Saturday, December 8, 12
![Page 54: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/54.jpg)
@pydanny
Entering Datavar p = d3.select("body").selectAll("p") .data([4, 8, 15, 16, 23, 42]) .text(String);
p.enter().append("p") .text(String);
If less than six paragraphs, then
add until six exist.
Create nodes for incoming dataSaturday, December 8, 12
![Page 55: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/55.jpg)
@pydanny
Exiting Datavar p = d3.select("body").selectAll("p") .data([4, 8, 15, 16, 23, 42]) .text(String);
p.enter().append("p") .text(String);
p.exit().remove(); Remove extra nodes
Cleaning up your workspaceSaturday, December 8, 12
![Page 56: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/56.jpg)
@pydanny
Transitions
d3.select("body").transition() .style("background-color", "black");
Saturday, December 8, 12
![Page 57: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/57.jpg)
@pydanny
Build on Web-Standards
• Creates SVG images on the fly
• No Java or Flash needed
• Works on modern browsers
• Easy to debug with browser inspectors
Saturday, December 8, 12
![Page 58: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/58.jpg)
@pydanny
Requires Javascript skillvar m = [20, 120, 20, 120], w = 1280 - m[1] - m[3], h = 800 - m[0] - m[2], i = 0, root;
var tree = d3.layout.tree() .size([h, w]);
var diagonal = d3.svg.diagonal() .projection(function(d) { return [d.y, d.x]; });
var vis = d3.select("#body").append("svg:svg") .attr("width", w + m[1] + m[3]) .attr("height", h + m[0] + m[2]) .append("svg:g") .attr("transform", "translate(" + m[3] + "," + m[0] + ")");
d3.json("flare.json", function(json) { root = json; root.x0 = h / 2; root.y0 = 0;
function toggleAll(d) { if (d.children) { d.children.forEach(toggleAll); toggle(d); } }
// Initialize the display to show a few nodes. root.children.forEach(toggleAll); toggle(root.children[1]); toggle(root.children[1].children[2]); toggle(root.children[9]); toggle(root.children[9].children[0]);
update(root);});
Remember the Many-Eyes version of this data.
Saturday, December 8, 12
![Page 59: Intro to Data Visualizations](https://reader034.fdocuments.net/reader034/viewer/2022052321/53fa90838d7f7253318b54d8/html5/thumbnails/59.jpg)
@pydanny
Thank you!
Saturday, December 8, 12