Wednesday, June 5, 2013

Data Visualization


Theory

Although you could just wing it, knowing some of the why's and why not's of data visualization will help put your creations an inch or two above the rest.

I highly highly recommend picking up Edward Tufte's The Visual Display of Quantitative Information. After you read it you'll be able to make jokes about inside jokes about pie charts and be everyone's best friend. On a first read-through it might not make too much sense, but once you start working on projects light bulbs will start going off.

Practice

These days the major thing to learn in the world of data visualization is D3. It's a big hunk of JavaScript code that can help with everything from drawing maps to making graphs.

If you want to learn D3 (which you now should), the best place to start is Mike Bostock's Let's Make A Map. The end result is a pretty boring map of the UK, but it steps you through the hows and the whys of every single piece of code. When I first started with D3 I could have saved myself a lot of headaches by reading it closely.

Once you get your feet wet, [http://bost.ocks.org/mike/selection/](How Selections Work) is great for
clarifying some of the concepts behind how D3 deals with data display.
There's also a tutorials page on github, but the shortest and most efficient path to making cool visualizations is just plain copying. How to make great visualizations, in 3 steps:

1) Visit http://bl.ocks.org/mbostock 2) Scroll around until you find a couple examples of the kind of visualization you want to make 3) Copy the code, then hack away at it until it does want you want
Since you've already got some coding background you might be all set. JavaScript can be an insane beast at times, but if you start simple and from existing code you should get the hang of it without too much work.

A Brief Introduction To Coding For The Web

OK, so maybe you do need to learn a little HTML/CSS/JavaScript first. But let me stress the little - it's easy to get bogged down in the details, and the skills you need to edit a visualization to do what you want aren't exactly the same as when learning JS from scratch.

Fundamentals: HTML, CSS and Javascript. HTML is the information on a page, CSS is what makes it look nice. JavaScript it what makes it move around or be interactive. JS is the toughest, while HTML and CSS are easy (the basics, at least).

Go ahead and learn HTML and CSS from Codacademy first. I disagree with the way that every single place on the Internet teaches this stuff, but so it goes.

Check out these recommendations or these recommendations for JavaScript. If you don't feel like reading through them I'll just blindly point you toward Codecademy - JavaScript track, jQuery track.
Sidenote: jQuery is a big hunk of JavaScript that makes common web programming tasks easier.

But really, honestly, truly, you should read the links that aren't Codacademy.

What do I make visualizations about?

Any time you hear something interesting or read an interesting article or just think, "could I make a visualization out of this?"

Other resources

Pretend you're a developer for a news organization. Read up on Source, Data for Radicals, and a million other things I'm neglecting. If you want to get real crazy subscribe to the NICAR email list to see how people who do "computer-assisted reporting" think.

But honestly, just do it! That singles map was the very very first visualization I ever made, and 5 years later it's still getting plenty of traffic. Throw a bunch of nonsense up on a site, submit it to reddit, and eventually you're bound to have something work out.

No comments:

Post a Comment