Introducing beeswarms 🐝, violin plots 🎻 and WebGL charts ⚡️
The latest version of our popular Scatter template adds both features and firepower
Sometimes it feels like our Scatter template can do everything. Bubble chart? Yes. Box plot? Absolutely. Dot plot? Sure. Knit a new pair of socks for grandma and pick up something for dinner? Well, I’m not certain it can’t do those things.
In fact, here at Flourish HQ we have a longstanding joke. Sometime between discussing ideas for a new template and beginning work on said template someone will almost always – and only partially in jest – suggest that we should just add the functionality of the new template to Scatter instead. (Hilarious, I know.)
All of this goes to say that, even before today, our Scatter template was multifunctional. And today we’re formally launching three new features – beeswarms, violin plots and WebGL mode. To give them all the attention they deserve, let’s go through each in turn, but first click play on the quick demo story above to see how nicely the chart modes work together with animations.
1. Beeswarms
Beeswarm plots are great when you want to show both the overall distribution of a variable and the individual data points. Unlike basic scatter plots, which display the relationship between two quantitative variables, beeswarms show the distribution of a single numeric metric across one or more categories.
For instance, the example above looks at the median divorce rate of different professions, organized by sector. Each dot is a profession and each row is a sector. The further to the right a dot is, the higher the divorce rate in that profession. Instead of proximate dots overlapping like they might in a dot plot, in a beeswarm, the dots “swarm” together around the axis.
To get started with beeswarms:
- Upload a spreadsheet to our Scatter template
- Make sure you have one categorical and one numeric variable to plot
- Find the “Box, violin and beeswarm plots” setting and turn on beeswarms
- Note that dot sizing is ignored on beeswarm plots.
2. Violins
Like beeswarms, violin plots do a good job of showing both the overall distribution of a dataset and the position of each individual point. But, instead of the the dots swarming together, the distribution is drawn around the dots, often in a sort of “violin” shape.
The example above is exactly the same data as the first, but uses violins instead of beeswarms to show the distribution. This example shows all of the dots along the axis, with proximate dots overlapping. However, you can also turn on the beeswarms feature at the same time to create a beeswarm-violin hybrid.
To get started with violins:
- Upload a spreadsheet to our Scatter template
- Make sure you have one categorical and one numeric variable to plot
- Find the “Box, violin and beeswarm plots” setting and turn on violins
3. WebGL mode
Earlier versions of our Scatter template were great at plotting up to a couple of thousands of points. However, if a dataset was larger than that, the visualization often struggled to load quickly. To fix this problem, we’ve added a second mode, which renders your visualization in WebGL, the powerful web technology used in 3d graphics such as computer games.
The scatter plot above shows when 80,000+ historic buildings in Washington D.C. were first built and when they were first seriously renovated. Using the original SVG rendering mode, this visualization would be unrealistic to view online, except perhaps on the most powerful computers. In WebGL mode, however, all of the points are displayed with ease, and can even animate in a story.
To get started with a WebGL mode:
- Open our Scatter template
- Find the “Dot styles” settings and change “Renderer” to “WebGL (beta)”
- Upload your spreadsheet. If it’s a big sheet, be sure to go into WebGL mode first!
Think some of our other templates need updating?
To suggest new features for existing templates or for anything else, you can always get in touch via hello@flourish.studio.