RAWGraphs is probably my favorite online tool for data visualization. Billed as “The missing link between spreadsheets and data visualization,” RAWGraphs makes it super easy to paste in your spreadsheet data and quickly and easily generate visual representations of your data using some interesting and engaging chart types. But, it does have its quirks.
One of the many chart types available within RAWGraphs is the parallel coordinates chart. They’re a “way of visualizing high-dimensional geometry and analyzing multivariate data. To show a set of points in an n-dimensional space, a backdrop is drawn consisting of n parallel lines, typically vertical and equally spaced.” I used a parallel coordinates chart to visually represent the top 20 U.S. cities for clean tech leadership in 2014 as ranked by Clean Edge, and I’m working on updating that using 2016 data.
There are a couple of quirks with RAWGraphs’ parallel coordinates charts. First, while it does generate the labels for the multiple axes, it doesn’t generate labels for the lines (more about this in another blog article). Second, the lines that it generates all have a stroke opacity of 40%, which, if you have a lot of lines, is probably a good thing, but it may not be what you want in all cases.
In the image below, I’ve increased the stroke of each line to better show the opacity of the lines.
What if you want a stroke opacity that’s different that 40%, say 100% or 80%? You could download the svg file that it allows you to generate, open it up in Adobe Illustrator and individually change each stroke’s opacity, but this can get tedious.
But, there’s a faster way. While you’re in RAW, if you look at the code in the text area field where you can grab the embed code, you’ll see that each line has a defined stroke opacity. The representation of each line looks something like this:
<path d=”M0,197.33999999999997L192.5,319.70000000000005L385,240.57999999999996L577.5,333.5L770,272.78″ style=”fill: none; stroke: rgb(160, 191, 105); stroke-opacity: 0.4;”></path>
That’s the way to define a line in SVG. Notice the part where it says: stroke-opacity: 0.4; Since SVG files can be easily manipulated not only in a graphics tool like Illustrator, but also in a text editor, it’s easy to open the downloaded SVG file in a text editor and do a batch find and replace to quickly change the stroke opacity of all of the lines you want to change. Here’s how.
First download the file in SVG format. Next, open the downloaded svg file with a text editor (I use Brackets). In the image below, I’ve opened the file in my text editor and then did a find and replace command (typically located in the Edit menu) to find the text “stroke-opacity: 0.4;” Then all I need to do is enter the new value I want to replace it with. If I wanted a stroke opacity of 80% I’d replace with “stroke-opacity: 0.8;” for example. Or if I want the stroke to be 100% opaque, I can just leave the Replace with… box blank and then when I hit the Batch… button, all of the “stroke-opacity: 0.4;” text will be deleted. Then I just have to save the file.
At that point, when opening it up in Illustrator you’ll find that all of the opacity values have changed.
As I mentioned earlier, I love the simplicity and ease of working with RAWGraphs but sometimes the little quirks can be a bit frustrating. Don’t let these little quirks turn you away from using it. Give it a try!