Glow Effect: the firefly technique

Jonni Walker
No items found.

Jul 28, 2020

Glow Effect: the firefly technique

Jonni Walker
No items found.

Jul 28, 2020

The “glow effect” is a cartographic technique, pioneered by John M. Nelson, and is often referred to as the firefly technique. Studio makes it easy to create this technique, so I wanted to show off a few tricks and tips for making your data glow.

Image for post

The glow effect can be applied to any data type. I recently applied the glowing effect to depict Brown Pelican flight paths on the south coast of the US.

I also used this effect to map all major under water communication cables, you may notice that the line thicknesses are data driven! And of course you can have data driven circle sizes too.

Here is a step by step of how I use Studio to make this data glow

I am absolutely fascinated by bioluminescence in nature and had wanted to create a data visualisation for a long time (here it is below using Mapbox Studio). I found some appropriate data sets and had a sudden flash of inspiration. What better cartographic technique to use than the firefly effect!

The principal behind this technique is a really simple one but can be more effective when applied in the correct context. In this example I am using three point layers, increasing in size, blur and opacity, below are the steps on how I did this in Studio:

Step 1

I have uploaded my data to Studio and styled the data as a circle. Here you can see all those white circles in the South East of Australia.

Image for post

Step 2

I have called this layer “Glowy things 1”. This will help to show how the layering works (explained below). I am going to style this layer by giving them a size of 10 pixels, a lovely bright, neon green for the colour, a blur of 3 and an opacity level of 0.4.

Image for post

Step 3

I will now duplicate that layer and name it “Glowy things 2”. This time I will give the circles a radius of 5 pixels, a brighter neon green colour, keep the blur at level 3 and the opacity at 0.4

Image for post

Step 4

Here comes my favourite trick! and where the magic happens. Duplicate the layer again and name it, “Glowy things 3”. Give the circle a radius of 1, a colour of white, zero blur and opacity 1. This will now give our circles a very bright, vivid white centre point.

Image for post

You can also duplicate more layers to really emphasise the glow, with further layers of size, greater blur and a lower opacity. Give it a try and experiment with how glowy you can make something look using this technique.

Image for post

Line Styling

Exactly the same technique can be used for styling your lines. Create varying line thicknesses, at low opacities and give them some blur, and then create a thin white with no blur and opacity 1. Always remember to bring the thin, white line to the top in the layer hierarchy as explained above.

I would love to see how you might use these techniques, share your glow. #BuiltWithMapbox

No items found.

Related articles