“RAW: The missing link between spreadsheets and vector graphics”
If you’ve ever tried to create vector-based data graphics from spreadsheet data, using Adobe Illustrator for example, you’ve probably experienced the frustration of creating anything more sophisticated than a bar chart or line graph. Earlier this month I came across the following tweet from Density Design in my Twitter feed:
The tweet refers to a new data viz tool from Density Design, called RAW. I’ve been meaning to check it out since then but it hadn’t been a priority. This weekend I read a couple of blog posts about it. GigaOm’s Derrick Harris reviewed the tool and tried it out with some sports data, in his blog post, New tool lets you visualize just about anything in 5 minutes (maybe less). And Density Design published a short video tutorial to show it in use.
So, since it was a dismal, cloudy weekend and baseball playoffs are in full swing, I thought I’d follow Derrick Harris’ lead and try it out with some sports data. Derrick’s data of choice was quarterback passer ratings. I opted to go with baseball and some pitching data for my experiment.
When I created my big baseball infographic earlier this year I used a lot of scatter plots to show correlations. I wanted to include some bubble charts but was frustrated with Illustrator’s inability to create them. Since bubble charts are one of the standard graphs included with RAW, I decided to create a bubble chart to see how well it worked. For the data, I chose to use pitching data from the 2013 regular season. The data includes: pitcher’s ERA, winning percentage and salary of each pitcher.
I copied stats from ESPN.com and pasted the data into a spreadsheet and then dove a little deeper into their data to find the salary for each of the first 40 pitchers. From there, it couldn’t be any easier to get your data into RAW – just copy from your spreadsheet and paste into RAW.
The next step is to choose your graph type and then map your data to the chart type by just dragging and dropping.
This part is also super easy and it’s just as easy to experiment with different mappings and see the results previewed lower in the page.
The next step is to format your visualization by changing colors, width, height, etc. I thought it might be fitting to change the colors of the bubbles to correspond to the baseball team’s colors. Easily done by finding the hex codes for team colors on this site.
Once you’re satisfied you can download your visualization as a .png, .svg, or json file or you can copy and paste the embed code to embed it on a web page. (Note, if you’re a WordPress user there is an issue with using the embed code that I’ll get to later).
Here’s the original PNG file generated by RAW.
That needed some cleaning up and editing so I downloaded the .svg file and opened that in Illustrator. The original .png file cuts off the bubbles at the edges of the graph but it was very easy to just increase the size of my art board in Illustrator and resolve that issue. I also adjusted the axes, added axis labels, tweaked the colors of the text and adjusted the size of some of the smallest bubbles (bubble size represents player salary in this visualization) since the lowest paid pitchers’s salaries are just mere dots that could barely be seen. (Yes, players like Jose Fernandez and Matt Harvey, with two of the lowest ERAs in baseball (a low ERA is a good thing for those non-baseball fans reading this) earned only 1/50th of what Cliff Lee earned in 2013.)
I could obviously have done a lot more to clean this up and improve it but my goal here was to experiment with the tool, not to spend time in Illustrator to improve the visualization. Since all of the graphics are vector-based the editing potential is unlimited.
Overall I’m pretty pleased with how easy RAW is to use and I think it has some great potential to be a really useful data visualization tool for designers. RAW is still being developed so it should only get better. I’m looking forward to trying it out on some more serious data viz projects in the future.
Note about Using Embed Code in WordPress
If you copy the embed code and paste into WordPress in Text view and save it, it will display fine. But, if you toggle back to the Visual tab, doing so will mess up the embed code. I think this is just a glitch with WordPress’ editor, as I’ve seen this issue with other embed code in older versions of WordPress. The simple solution is to not toggle back to the Visual tab when you paste in the embed code. The problem with that is remembering to not go back and edit that post if you’re not in the Text mode. Probably a good idea to have a copy of that embed code saved elsewhere on your computer just in case you forget.