Intro to Data Visualizations

@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


@pydanny

Helping tomorrow!

I’ll be there to help, so ask away!

Or email me at [email protected]


mailto:[email protected]

mailto:[email protected]

@pydanny

Tools covered

•Many Eyes

•Google Charts

•D3.js

No coding

Some coding

Need a developer


@pydanny

Many Eyesbit.ly/many-eyes


@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:


@pydanny

Many Eyes

• Closed source - IBM can shut it down.

• All data posted is freely available.

• Uses Java applets to present data.

Cons:


@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!


@pydanny

Many Eyes


@pydanny

Signing Up I

Click ‘login’


@pydanny

Signing Up II

Click ‘register’


@pydanny

Signup III

Email and Captcha


@pydanny

Follow emailed instructions

Talk to me afterwards if you have any problems.


@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.


@pydanny

Example I

• I run a site called

• I want to know how many of each pet type is registered.


@pydanny

Example I Data Prep

• I exported the data from to CSV.

• Opened the CSV with Excel


@pydanny

Uploading Data I

Copy/paste from your

spreadsheet


@pydanny

Uploading Data II

Copy/pasted from Excel

Many Eyes interpretation

of my data


@pydanny

Upload saved!

Visualize!


@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


@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


@pydanny

Bar Chart


@pydanny

Bubble Chart


@pydanny

Pie Chart


@pydanny

Easy Conclusions

• Dogs are clearly the most popular pet

• Cats come second

• Birds, Fish, Rabbits are roughly the same


@pydanny

Many EyesText Analysis


@pydanny

Example II

• I built a site called

• I want to do some text analysis.


@pydanny

Scraping Text

copy/pastewith explicit permission of

site and author

http://bit.ly/WPfEdeSaturday, December 8, 12

http://lacurrents.com/articles/just-tell-me-is-californias-economy-improving-or-not/

http://lacurrents.com/articles/just-tell-me-is-californias-economy-improving-or-not/

@pydanny

Upload the Data


@pydanny

Word Tree

Click for better view

Warning: Dependent on java applets


@pydanny

Tag Cloud

http://www.niemanlab.org/2011/10/word-clouds-considered-harmful/




@pydanny

Word Cloud


@pydanny

Many EyesGeo Analysis


@pydanny

Example III

• I’m the CTO of

• We want to share information about people moving.


@pydanny

Prep the data

• Export to CSV

• Open with Excel


@pydanny

Upload the Data


@pydanny

Choose Visualization


@pydanny

Destinations


@pydanny

Google Charts


@pydanny

Google Charts Boot Camp

https://developers.google.com/chart/




@pydanny

Google Charts

• Free for many use cases

• Customizable skins and themes

• Relatively easy to use

• Really good documentation

• Bootcamp coming up!

Pros


@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


@pydanny

D3.js


@pydanny

D3.js example I

http://nyti.ms/SN5mfhFour Ways to Slice Obama’s Budget Proposal


http://nyti.ms/SN5mfh

http://nyti.ms/SN5mfh

@pydanny

D3.js example II

http://www.isbarackobamathepresident.com/Saturday, December 8, 12

http://www.isbarackobamathepresident.com/

http://www.isbarackobamathepresident.com/

@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


@pydanny

D3.js

• You will need a developer

• Very steep learning curve

Cons


@pydanny

Warningcode ahead!


@pydanny

JQuery-like selectors

d3.selectAll("p").style("color", "white");


@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";});


@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


@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");


@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


@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.


@pydanny

Thank you!


News & Politics

Intro to Data Visualizations