RAW Graphs for prototyping visualisations

RAW Graphs is the latest version of the online data visualisation tool from DensityDesign.

I use this tool all the time to quickly try out different, more unusual visualisations, to show clients during the prototyping phase of a project.

It is great way to see how data might look before going to the effort of coding in D3.JS, although in many cases, the output from RAW Graphs will be good enough.  You can export the charts as an SVG file for further editing in Illustrator or InkScape, or as a PNG file.

For those of you familiar with D3.JS you may want to install a local version of RAW Graphs, using the instructions on their Github page. This allows you to customise the visualisations without needing to do further work in a graphics editor.

For example, I wanted to use the horizons map but wanted to change the default blue and red. While I could do this in InkScape, it was easier to change line 19 of the code in ../bower_components\d3-plugins-density\horizon.js which controls the lower and upper colour:

var color = d3.scale.linear()
.domain([-1, 0, 1])
.range(["#d62728", "#fff", "#1f77b4"]);

By replacing:

 .range(["#d62728", "#fff", "#1f77b4"])

with

.range(["#d01c8b", "#d3d3d3", "#4dac26"])

(purple and green, show below) meant that the colour scale was automatically applied to my visualisation.

Horizon chart showing trends in domestic tourist to New Zealand regions, made with RAW Graph

So with my local install of RAW Graphs, I have a great tool in my back pocket for quickly prototyping in D3.  

I recommend you give it a whirl next time you have some data to present.