We recently posted this screenshot of a rankflow chart made with our JavaScript charting library on Twitter, and it got a lot of “favorites.”

What the heck is a rankflow chart? When do you use it? How do you make one? Why were they so popular on Twitter? So many questions! For the answers and a brief discussion about the San Diego craft beer scene, read on.

What are rankflow charts?

Rankflow charts are what we call the type of dataviz that compares how items rank across categories. They are similar to Sankey diagrams, bump charts, or slopegraphs, but they are different and much easier to use.

When to use them

Utilize rankflow charts when you need to compare entities with set, unique ranks in different categories.

Rankflow chart examples

These charts can be an efficient way to visualize the selection process for a product or service provider. You could also use this chart type to compare performance among departments.

Our team’s beverage of choice at happy hour is beer. Here is a rankflow chart example that we used internally to visualize a comparison some of our favorite local San Diego microbrews.

In order to make this chart, we listed beers from San Diego breweries that each had a different rating on Beer Advocate. Then we reviewed the alcohol content for each. We found pricing for a bottle of each beer.

The final column shows an informal, aggregate rating by our staff.  Green Flash Imperial IPA came out on top when you averaged the beer rankings across each category.

We would like to add a rating for the IBUs of each beer, which is a scale that measures bitterness. But that information proved to be more difficult to track.

Rankflow charts are incredibly easy to build. Each rank is listed in the order the scale-x labels are provided, and overall ranking is listed as a single integer. Pro tip: Make sure each entity is in your JSON in the corresponding overall rank order. If they aren’t, the tooltip will display the correct ranking, but they will appear out of order on the left.

"scale-x":{  
"labels":["BA Rating (Descending)", "Price per Bottle (Ascending)", "ABV (Descending)", "Popularity Among Zingers"],  
"values":["BA Rating", "Price per Bottle", "ABV", "Popularity"]  
},`  
`  
"series":[  
{  
"text":"Green Flash  
Imperial IPA",  
"ranks":[6,1,4,1],  
"rank":1  
},  
{  
"text":"Alesmith  
Speedway Stout",  
"ranks":[1,9,1,5],  
"rank":2  
},  
{  
"text":"Stone  
IPA",  
"ranks":[4,6,8,3],  
"rank":3  
},  
{  
"text":"Alpine Brewing  
Pure Hoppiness Double IPA",  
"ranks":[2,5,7,8],  
"rank":4  
}  

Once again, we used Adobe Kuler to generate the palette. A chart palette is easily set with an array of hex codes, as shown below.

"color-type": "palette",  
"palette":["#590B02", "#F29E02", "#db7805", "#8b2805", "#BE5905", "#35090A", "#BF8842", "#8D2902", "#810C12", "#BB4A02", "#5A2401", "#CA8B02"]  
},  

This is one chart type that seems unique to ZingChart-- we haven’t seen it in other JavaScript charting libraries. Do you use the rankflow chart for comparisons? Tell us what you call it and how you use it in the comments below. Or, share your favorite craft brew and we will give it a try :-)