Slide 1

Slide 1 text

@pydanny Data Visualization Fundamentals by Daniel Greenfeld Source: US Census Renderer: Many Eyes Created: 12/8/2012 Saturday, December 8, 12

Slide 2

Slide 2 text

@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

Slide 3

Slide 3 text

@pydanny Helping tomorrow! I’ll be there to help, so ask away! Or email me at [email protected] Saturday, December 8, 12

Slide 4

Slide 4 text

@pydanny Tools covered •Many Eyes •Google Charts •D3.js No coding Some coding Need a developer Saturday, December 8, 12

Slide 5

Slide 5 text

@pydanny Many Eyes bit.ly/many-eyes Saturday, December 8, 12

Slide 6

Slide 6 text

@pydanny Many Eyes bit.ly/many-eyes Saturday, December 8, 12

Slide 7

Slide 7 text

@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

Slide 8

Slide 8 text

@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

Slide 9

Slide 9 text

@pydanny Using Many Eyes 1. Go to bit.ly/many-eyes 2. Sign up with your email 3. Upload some data 4. Create a visualization Let’s try it out! Saturday, December 8, 12

Slide 10

Slide 10 text

@pydanny Many Eyes bit.ly/many-eyes Saturday, December 8, 12

Slide 11

Slide 11 text

@pydanny Signing Up I Click ‘login’ bit.ly/many-eyes Saturday, December 8, 12

Slide 12

Slide 12 text

@pydanny Signing Up II Click ‘register’ Saturday, December 8, 12

Slide 13

Slide 13 text

@pydanny Signup III Email and Captcha Saturday, December 8, 12

Slide 14

Slide 14 text

@pydanny Follow emailed instructions Talk to me afterwards if you have any problems. Saturday, December 8, 12

Slide 15

Slide 15 text

@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

Slide 16

Slide 16 text

@pydanny Example I • I run a site called • I want to know how many of each pet type is registered. Saturday, December 8, 12

Slide 17

Slide 17 text

@pydanny Example I Data Prep • I exported the data from to CSV. • Opened the CSV with Excel Saturday, December 8, 12

Slide 18

Slide 18 text

@pydanny Uploading Data I Copy/paste from your spreadsheet Saturday, December 8, 12

Slide 19

Slide 19 text

@pydanny Uploading Data II Copy/pasted from Excel Many Eyes interpretation of my data Saturday, December 8, 12

Slide 20

Slide 20 text

@pydanny Upload saved! Visualize! Saturday, December 8, 12

Slide 21

Slide 21 text

@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

Slide 22

Slide 22 text

@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

Slide 23

Slide 23 text

@pydanny Bar Chart Saturday, December 8, 12

Slide 24

Slide 24 text

@pydanny Bubble Chart Saturday, December 8, 12

Slide 25

Slide 25 text

@pydanny Pie Chart Saturday, December 8, 12

Slide 26

Slide 26 text

@pydanny Easy Conclusions • Dogs are clearly the most popular pet • Cats come second • Birds, Fish, Rabbits are roughly the same Saturday, December 8, 12

Slide 27

Slide 27 text

@pydanny Many Eyes Text Analysis Saturday, December 8, 12

Slide 28

Slide 28 text

@pydanny Example II • I built a site called • I want to do some text analysis. Saturday, December 8, 12

Slide 29

Slide 29 text

@pydanny Scraping Text copy/paste with explicit permission of site and author http://bit.ly/WPfEde Saturday, December 8, 12

Slide 30

Slide 30 text

@pydanny Upload the Data Saturday, December 8, 12

Slide 31

Slide 31 text

@pydanny Word Tree Click for better view Warning: Dependent on java applets Saturday, December 8, 12

Slide 32

Slide 32 text

@pydanny Tag Cloud http://www.niemanlab.org/2011/10/word-clouds-considered-harmful/ Saturday, December 8, 12

Slide 33

Slide 33 text

@pydanny Word Cloud Saturday, December 8, 12

Slide 34

Slide 34 text

@pydanny Many Eyes Geo Analysis Saturday, December 8, 12

Slide 35

Slide 35 text

@pydanny Example III • I’m the CTO of • We want to share information about people moving. Saturday, December 8, 12

Slide 36

Slide 36 text

@pydanny Prep the data • Export to CSV • Open with Excel Saturday, December 8, 12

Slide 37

Slide 37 text

@pydanny Upload the Data Saturday, December 8, 12

Slide 38

Slide 38 text

@pydanny Choose Visualization Saturday, December 8, 12

Slide 39

Slide 39 text

@pydanny Destinations Saturday, December 8, 12

Slide 40

Slide 40 text

@pydanny Google Charts Saturday, December 8, 12

Slide 41

Slide 41 text

@pydanny Google Charts Boot Camp https://developers.google.com/chart/ Saturday, December 8, 12

Slide 42

Slide 42 text

@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

Slide 43

Slide 43 text

@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

Slide 44

Slide 44 text

@pydanny D3.js Saturday, December 8, 12

Slide 45

Slide 45 text

@pydanny D3.js example I http://nyti.ms/SN5mfh Four Ways to Slice Obama’s Budget Proposal Saturday, December 8, 12

Slide 46

Slide 46 text

@pydanny D3.js example II http://www.isbarackobamathepresident.com/ Saturday, December 8, 12

Slide 47

Slide 47 text

@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

Slide 48

Slide 48 text

@pydanny D3.js • You will need a developer • Very steep learning curve Cons Saturday, December 8, 12

Slide 49

Slide 49 text

@pydanny Warning code ahead! Saturday, December 8, 12

Slide 50

Slide 50 text

@pydanny JQuery-like selectors d3.selectAll("p").style("color", "white"); Saturday, December 8, 12

Slide 51

Slide 51 text

@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

Slide 52

Slide 52 text

@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

Slide 53

Slide 53 text

@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

Slide 54

Slide 54 text

@pydanny Entering Data var 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 data Saturday, December 8, 12

Slide 55

Slide 55 text

@pydanny Exiting Data var 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 workspace Saturday, December 8, 12

Slide 56

Slide 56 text

@pydanny Transitions d3.select("body").transition() .style("background-color", "black"); Saturday, December 8, 12

Slide 57

Slide 57 text

@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

Slide 58

Slide 58 text

@pydanny Requires Javascript skill var 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

Slide 59

Slide 59 text

@pydanny Thank you! Saturday, December 8, 12