What are the cutting edge data visualization tools out there right now?

February 16, 2013 11:42 AM

I am handy with HTML, CSS and a little Javascript. I also have a lot of experience with Wordpress theme development. What is the best path for me to become an ace data visualizer on the web?

When I was in university, I got really familiar with building Wordpress sites, HTML, CSS and Javascript. I haven't really kept up with programming for a number of years but historically found myself fairly comfortable with new languages.

I've since become an economist, and part of what I am trying to do is develop a more flexible toolkit for presenting data and text. I like the infographic style and would love to be able to produce articles on the web using that format with relative ease. Ideally, I'd love to build this into existing Wordpress blogs too, but that's not necessarily something I'm married to.

What tools should I be using? Generally, I will be developing my data using Excel or SPSS, so something that is relatively easy to import data and produce stunning charts would be great. On my "god I wish it existed" list would be a tool that would be able to replicate bar charts with importable images - so, instead of a bar that goes to 100, I would love something that would stack, say, a car for every 10 in the dataset (so 10 cars for 100.)

What tools do you think I should be using? I am assuming some scripting will be necessary and I am comfortable with that, but the more out of the box, the better. I have never been good at graphic design so the less of that, the better, unless there's a great guide to get me up to speed.

posted by Rodrigo Lamaitre to computers & internet (10 answers total)

http://d3js.org/

It's a javascript library written chiefly by Mike Bostock of the NYTimes - if you've ever seen any of the cool interactive visualizations the Times has featured and said "Hey, this is a really neat little widget! I wonder how they did that." the answer is D3.

Just scroll around this page for examples, each one includes the javascript code:
http://bl.ocks.org/mbostock
posted by spatula at 11:55 AM on February 16 [17 favorites]

There are so many libraries and frameworks available for someone like you!

jQuery is pretty much mandatory as a library for creating cross-browser JavaScript code. There are tons of graphs/charts addons for jQuery.

There's more specific stuff like Google Chart Tools that allows you to create slick charts using JavaScript. Highcharts is an alternative. Raphaël is a more general library for working with vector graphics and obvously you can create all sorts of amazing visuals.

Somewhere between these frameworks and libraries you have stuff like Stellar.js that makes it easy to create gorgeous parallax effects.
posted by Foci for Analysis at 11:59 AM on February 16 [2 favorites]

Seconding D3, it's really powerful. The examples and tutorials are great but it's got a bit of a learning curve. Stick with it.
posted by Nelson at 1:31 PM on February 16 [1 favorite]

Highcharts is easy to jump into - they have tons of JSFiddles in their documentation and there is good community support over on StackOverflow. That being said, I am bookmarking D3JS to look into for visualizations that go beyond normal charts and graphs.
posted by Wossname at 1:48 PM on February 16

I wonder if it would help you to grind through the Processing tutorials and spend some time looking at sophisticated usage of the same.

And maybe work through Graphic Design - The New Basics.

I don't know if you'd necessarily be using Processing all the time as part of your workflow, but this might be analogous to a grunt programmer learning C to get close to the machine before doing all their work in a high level language.
posted by sebastienbailard at 3:46 PM on February 16

D3, as other have said.

Also, Raphael.

jQuery plugins are generally junk.
posted by deathpanels at 11:03 PM on February 16

Sci2 may be of interest. Via Indiana University, where the developers describe it as "a modular toolset specifically designed for the study of science. It supports the temporal, geospatial, topical, and network analysis and visualization of scholarly datasets at the micro (individual), meso (local), and macro (global) levels." It's extendable and you can use it in other subject areas (with any appropriate data).
posted by lathrop at 12:48 PM on February 17

The other tool to examine is R. See R Statistical Computing for Semi-Dummies? for a lot of great links. R is a wonderful tool for data mining and manipulation and can generate gorgeous graphics. It also has libraries that will let you hook in to other tools, like Google Motion Charts, and I believe R genius Hadley Wickham is working on tying it into D3.
posted by wdenton at 6:59 PM on February 19 [1 favorite]

rickshaw is built on top of d3, and is much easier to use for simpler charts ( line,bar,scatter... )
while d3 is great, it is kind of 'bare metal' as a library. ( See this line chart tutorial of d3 vs the code snippet about line charts on the rickshaw homepage.)

Of course if you want to do some real fancy stuff you'll want to use d3.

Also, check the reddit/r/dataisbeautiful FAQ for some other good options.
posted by Edible Energy at 6:44 PM on February 21 [1 favorite]

For quick time series charts I recommend dygraphs.
posted by JoeXIII007 at 7:20 PM on February 22