Upload
daniel-greenfeld
View
2.227
Download
9
Embed Size (px)
DESCRIPTION
My introductory talk for the Data Summit on Immigration
Citation preview
@pydanny
Data VisualizationFundamentals
by Daniel Greenfeld
Source: US CensusRenderer: Many EyesCreated: 12/8/2012
Saturday, December 8, 12
@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
@pydanny
Helping tomorrow!
I’ll be there to help, so ask away!
Or email me at [email protected]
Saturday, December 8, 12
@pydanny
Tools covered
•Many Eyes
•Google Charts
•D3.js
No coding
Some coding
Need a developer
Saturday, December 8, 12
@pydanny
Many Eyesbit.ly/many-eyes
Saturday, December 8, 12
@pydanny
Many Eyes
bit.ly/many-eyesSaturday, December 8, 12
@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
@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
@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
@pydanny
Many Eyes
bit.ly/many-eyesSaturday, December 8, 12
@pydanny
Signing Up I
Click ‘login’
bit.ly/many-eyesSaturday, December 8, 12
@pydanny
Signing Up II
Click ‘register’
Saturday, December 8, 12
@pydanny
Signup III
Email and Captcha
Saturday, December 8, 12
@pydanny
Follow emailed instructions
Talk to me afterwards if you have any problems.
Saturday, December 8, 12
@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
@pydanny
Example I
• I run a site called
• I want to know how many of each pet type is registered.
Saturday, December 8, 12
@pydanny
Example I Data Prep
• I exported the data from to CSV.
• Opened the CSV with Excel
Saturday, December 8, 12
@pydanny
Uploading Data I
Copy/paste from your
spreadsheet
Saturday, December 8, 12
@pydanny
Uploading Data II
Copy/pasted from Excel
Many Eyes interpretation
of my data
Saturday, December 8, 12
@pydanny
Upload saved!
Visualize!
Saturday, December 8, 12
@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
@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
@pydanny
Bar Chart
Saturday, December 8, 12
@pydanny
Bubble Chart
Saturday, December 8, 12
@pydanny
Pie Chart
Saturday, December 8, 12
@pydanny
Easy Conclusions
• Dogs are clearly the most popular pet
• Cats come second
• Birds, Fish, Rabbits are roughly the same
Saturday, December 8, 12
@pydanny
Many EyesText Analysis
Saturday, December 8, 12
@pydanny
Example II
• I built a site called
• I want to do some text analysis.
Saturday, December 8, 12
@pydanny
Scraping Text
copy/pastewith explicit permission of
site and author
http://bit.ly/WPfEdeSaturday, December 8, 12
@pydanny
Upload the Data
Saturday, December 8, 12
@pydanny
Word Tree
Click for better view
Warning: Dependent on java applets
Saturday, December 8, 12
@pydanny
Tag Cloud
http://www.niemanlab.org/2011/10/word-clouds-considered-harmful/
Saturday, December 8, 12
@pydanny
Word Cloud
Saturday, December 8, 12
@pydanny
Many EyesGeo Analysis
Saturday, December 8, 12
@pydanny
Example III
• I’m the CTO of
• We want to share information about people moving.
Saturday, December 8, 12
@pydanny
Prep the data
• Export to CSV
• Open with Excel
Saturday, December 8, 12
@pydanny
Upload the Data
Saturday, December 8, 12
@pydanny
Choose Visualization
Saturday, December 8, 12
@pydanny
Destinations
Saturday, December 8, 12
@pydanny
Google Charts
Saturday, December 8, 12
@pydanny
Google Charts Boot Camp
https://developers.google.com/chart/
Saturday, December 8, 12
@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
@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
@pydanny
D3.js
Saturday, December 8, 12
@pydanny
D3.js example I
http://nyti.ms/SN5mfhFour Ways to Slice Obama’s Budget Proposal
Saturday, December 8, 12
@pydanny
D3.js example II
http://www.isbarackobamathepresident.com/Saturday, December 8, 12
@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
@pydanny
D3.js
• You will need a developer
• Very steep learning curve
Cons
Saturday, December 8, 12
@pydanny
Warningcode ahead!
Saturday, December 8, 12
@pydanny
JQuery-like selectors
d3.selectAll("p").style("color", "white");
Saturday, December 8, 12
@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
@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
@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
@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
@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
@pydanny
Transitions
d3.select("body").transition() .style("background-color", "black");
Saturday, December 8, 12
@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
@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
@pydanny
Thank you!
Saturday, December 8, 12