Spiral Strip

Abstract

A visual graphic called Spiral Strip is presented consisting of color-coded segments arranged in a spiral. The width and length of each individual segment can be different, which can be used to convey additional information (besides the color coding). Although the primary motivation for developing the new graphic was related to climatic data, it can also be used with other types of data. Several examples based on climatic, population-size, and historical data are used to show the graphic’s visual appearance and main properties. The examples also demonstrate how the meaning of the graphic can be easy to grasp and intuitively understood by a casual observer. An easy-to-use Python code package for drawing the Spiral Strips was published in a public repository.

1. Introduction

In the field of climate change, there is a great need to provide effective visual material that shows the changes in the environment that are already happening or will be happening, which would be easy to grasp and intuitively understood by the majority of the general public. One excellent example of such material is the warming stripes infographic (sometimes also referred to as climate stripes, climate timelines, or stripe graphics) designed and published by University of Reading climate scientist Ed Hawkings in 2019 [1]. The warming stripe features a very minimalistic rectangular design consisting of narrow color-coded vertical segments (stripes) arranged horizontally from left to right showing a temporal sequence of temperatures. The colder temperatures are represented by blue shades, while red shades represent warmer temperatures. This typically results in a nonmonotonic color transition from blue to red, clearly showing the warming trend of Earth’s climate and the inherent variability of the climate system. The meaning of the graphic is very easy to grasp and can be intuitively understood by a casual observer. The author later created a website, showyourstipes.info (accessed on 1 May 2022) where stripe images can be generated for many regions around the globe. The images have been downloaded more than a million times, have been widely shared online, and are used to decorate ties, cufflinks, and cars [1].

Here, we present a new type of visual graphic we call a Spiral Strip. Its design is loosely based on the warming stripe, but instead of a horizontal geometry, the color-coded segments are arranged in an Archimedean spiral [2]. With spiral geometry, the length of individual segment can be larger compared to the warming stripe, facilitating displaying a longer series, and providing more textual and numerical information along each segment. The new graphic is more square, whereas the warming stripe typically has a larger horizontal dimension than the vertical. The spiral can also start some way off the center, leaving the central region empty, so a title or supporting text can be added in the middle. The width and length of each segment can be different, which can be used to convey additional information (in addition to the one shown by the color-coding).

There have been multiple previous attempts to use spiral geometry to visualize data. One of the earliest examples can be found in [3], where a line-type graph in spiral geometry was used to visualize a time series data.

The authors in [4] used a 3D spiral for calendar visualization, while in [5], the authors tried various approaches with spiral visualization, including displaying data in various forms in 3D. In [6] the authors tested various spiral-geometry-based approaches to visualize time series data, with a special focus on enhancing the identification of periodic patterns. They tested various approaches, such as changing the visual appearance of the spiral, drawing multiple spirals, and displaying them all together or sequentially in animation, using interaction techniques, or displaying it in 3D as a helix. The authors in [7] presented a tool for fixed-width spiral track visualization based on a two-tone pseudocoloring approach. Quite recently, the authors in [8] presented a spiral visualization tool called spiralize, which is available as a R package. The tool supports the visualization of multiple fixed-width tracks running along the spiral, where each track serves as an independent plotting region, thereby allowing for building very complex graphics.

Our focus was the development of a graphic that would not be too complex and could thus be intuitively understood by a casual observer. Our aim was also to publish a freely available Python software package that would be easy to use by the users to draw their own spiral strip images. While some other tools, such as the spiralize package, already exist, they do not offer the complete set of functionalities we were trying to implement. For example, they are based on fixed-width strips, while we wanted to implement strips with variable width to potentially convey additional information. Moreover, all existing approaches seem to rely solely on polar geometry to define the shapes representing the individual segments, that is, the two straight boundaries at the start and finish of each segment are defined to be parallel with the r axis of the polar coordinate system. However, since the Archimedean spiral curve is not perpendicular to the r axis, the segments can look deformed and skewed, and the result is less visually appealing. This is especially noticeable near the center, where the deformation is most apparent, or when the segments are narrow (when the width of individual segments is significantly larger than their length). The relatively large deformation near the center is probably why the segments in such graphics tend to not start at the center but some way off, leaving the middle region empty. Here, we took a different approach by defining a custom coordinate system where one axis is always parallel to the spiral curve, while the other axis is always perpendicular. We could then use this coordinate system to define the shapes of segments that were less deformed and looked more acceptable, especially near the center.

Section 2 explains the details of the design of the new graphic, and Section 3 shows some examples highlighting its properties. Lastly, Section 4 provides the conclusions.

2. Methodology

2.1. Spiral Strip Design

We start by defining the spiral with

$$r=a+b{\phi }^{\prime }/2\pi ,$$

(1)

where r represents the distance from the center of the polar coordinate system. ${\phi }^{\prime }$ is a variable with values between zero, representing the start of the spiral, and some maximal value, representing the spiral endpoint. The expression in Equation (1) represents an Archimedean spiral, since r increases linearly with ${\phi }^{\prime }$. An increase in ${\phi }^{\prime }$ for $2\pi$ represents one spiral loop. a and b are two parameters, with a representing the distance of the spiral starting point from the center, and b the radial distance between consecutive loops of the spiral (Figure 1a).

In the Cartesian coordinate system, the spiral curve can be expressed as

$$\begin{array}{ccc}\hfill x& =& rcos\left({\phi }^{\prime }+{\phi }_0\right),\hfill \end{array}$$

(2)

$$\begin{array}{ccc}\hfill y& =& rsin\left({\phi }^{\prime }+{\phi }_0\right),\hfill \end{array}$$

(3)

with ${\phi }_0$ being an additional parameter representing the angle between the x axis and line that links the center, and the spiral staring point (Figure 1a).

A small change in ${\phi }^{\prime }$, which we denote as $\mathrm{d}{\phi }^{\prime }$, causes small changes in the x and y coordinates. These changes can be expressed from Equations (2) and (3) with the use of total derivatives, which yields

$$\begin{array}{c}\hfill \mathrm{d}x=\frac{bcos\left({\phi }^{\prime }+{\phi }_0\right)-\left(2\pi a+b{\phi }^{\prime }\right)sin\left({\phi }^{\prime }+{\phi }_0\right)}{2\pi }\mathrm{d}{\phi }^{\prime },\end{array}$$

(4)

$$\begin{array}{c}\hfill \mathrm{d}y=\frac{bsin\left({\phi }^{\prime }+{\phi }_0\right)+\left(2\pi a+b{\phi }^{\prime }\right)cos\left({\phi }^{\prime }+{\phi }_0\right)}{2\pi }\mathrm{d}{\phi }^{\prime }.\end{array}$$

(5)

The length of a small spiral segment $\mathrm{d}l$ that corresponds to $\mathrm{d}{\phi }^{\prime }$ can be expressed as

$$\mathrm{d}l=\sqrt{\mathrm{d}{x}^2+\mathrm{d}{y}^2}=\mathrm{d}{\phi }^{\prime }\sqrt{a^2+\frac{ab{\phi }^{\prime }}{\pi }+\frac{b^2\left({\phi }^{\prime 2}+1\right)}{4{\pi }^2}}$$

(6)

This equation can be reversed to obtain the change in ${\phi }^{\prime }$ if one would move a short distance along the spiral (represented by $\mathrm{d}l$)

$$\mathrm{d}{\phi }^{\prime }=\mathrm{d}l{\left(a^2+\frac{ab{\phi }^{\prime }}{\pi }+\frac{b^2\left({\phi }^{\prime 2}+1\right)}{4{\pi }^2}\right)}^{-\frac{1}{2}}$$

(7)

The polar coordinate system can be used to define the geometric shapes of individual segments. In this case, the two straight borders of each segment can be parallel with the r axis of the polar coordinate system, while the two other curved borders can be along Archimedean spirals. However, the visual inspection of such spiral strips highlighted some problems—the segments can look deformed, especially near the center of the spiral, and the result is less visually appealing. This prompted us to define a new coordinate system where one axis is always parallel to the spiral curve while the other is always perpendicular. The segments looked less deformed in the new coordinate system, and the result was more visually appealing. A comparison of results from both coordinate systems is available in the Supplementary Materials.

The custom coordinate system can be represented by a set of two basis vectors that change along the spiral. The basis vector that points along the spiral curve (${\mathbf{e}}_l$) can be expressed as

$$\begin{array}{c}\hfill {\mathbf{e}}_l=\frac{1}{\mathrm{d}l}\left(\begin{array}{c}\mathrm{d}x\\ \mathrm{d}y\end{array}\right)=\left(\begin{array}{c}\frac{bcos\left({\phi }^{\prime }+{\phi }_0\right)-\left(2\pi a+b{\phi }^{\prime }\right)sin\left({\phi }^{\prime }+{\phi }_0\right)}{2\pi \sqrt{a^2+\frac{ab{\phi }^{\prime }}{\pi }+\frac{b^2\left({\phi }^{\prime 2}+1\right)}{4{\pi }^2}}}\\ \frac{bsin\left({\phi }^{\prime }+{\phi }_0\right)+\left(2\pi a+b{\phi }^{\prime }\right)cos\left({\phi }^{\prime }+{\phi }_0\right)}{2\pi \sqrt{a^2+\frac{ab{\phi }^{\prime }}{\pi }+\frac{b^2\left({\phi }^{\prime 2}+1\right)}{4{\pi }^2}}}\end{array}\right)\end{array}$$

The basis vector that points perpendicularly to the spiral curve (${\mathbf{e}}_p$) can be expressed as

$$\begin{array}{c}\hfill {\mathbf{e}}_p=\frac{1}{\mathrm{d}l}\left(\begin{array}{c}\mathrm{d}y\\ -\mathrm{d}x\end{array}\right)=\left(\begin{array}{c}\frac{bsin\left({\phi }^{\prime }+{\phi }_0\right)+\left(2\pi a+b{\phi }^{\prime }\right)cos\left({\phi }^{\prime }+{\phi }_0\right)}{2\pi \sqrt{a^2+\frac{ab{\phi }^{\prime }}{\pi }+\frac{b^2\left({\phi }^{\prime 2}+1\right)}{4{\pi }^2}}}\\ -\frac{bcos\left({\phi }^{\prime }+{\phi }_0\right)-\left(2\pi a+b{\phi }^{\prime }\right)sin\left({\phi }^{\prime }+{\phi }_0\right)}{2\pi \sqrt{a^2+\frac{ab{\phi }^{\prime }}{\pi }+\frac{b^2\left({\phi }^{\prime 2}+1\right)}{4{\pi }^2}}}\end{array}\right)\end{array}$$

Figure 1b shows the resulting shape of individual segments that are arranged along the spiral. The width and length of the segments are denoted by w and l. For simplicity, all segments shown in Figure 1b had the same width and length, but the width and length of each segment can also be different (this is demonstrated by some of the examples shown in the next section).

The values of parameters a and b can be expressed with the use of segment width w as $a=r_0+\frac{w}{2}$ and $b=w+s$. $r_0$ is the approximate distance of the first element from the center, while s represents the space (the width of the gap region) between the segments in two consequent loops (for details, please see the enlarged inset region in Figure 1b).

We used vector $\mathbf{m}=(x,y)$ to denote a point on the spiral, with x and y defined by Equations (2) and (3), respectively. For each $\mathbf{m}$, we can define two additional vectors that point to two points on the opposite sides of the spiral:

$$\begin{array}{c}\hfill \mathbf{p}=\mathbf{m}+\frac{w}{2}{\mathbf{e}}_p,\end{array}$$

(8)

$$\begin{array}{c}\hfill \mathbf{q}=\mathbf{m}-\frac{w}{2}{\mathbf{e}}_p.\end{array}$$

(9)

The locations of points $\mathbf{m},\mathbf{p}$, and $\mathbf{q}$ at the start of the spiral are shown in the enlarged inset region in Figure 1b (they are denoted as ${\mathbf{m}}_1,{\mathbf{p}}_1$ and ${\mathbf{q}}_1$). The distance between p and q is always equal to the width of the spiral segment, and the line that connects the two points is always perpendicular to the curve.

Each spiral segment is defined as a multipoint polygon defined by a sequence of p and q points. The drawing procedure begins at the spiral start point (which corresponds to ${\phi }^{\prime }=0$). First, the corresponding values of $x,y$ and ${\mathbf{e}}_p$ are calculated using Equations (2), (3), and (8) assuming ${\phi }^{\prime }=0$. With these, the locations of corresponding p and q points are calculated via Equations (8) and (9).

Next, we move in small steps along the spiral curve. We denoted the length of each step as $\Delta l$. The step size needs to be small enough; otherwise, the borders of the segments might not look smooth (e.g., at least 100 steps should be performed for each spiral loop). At each step, the new value of ${\phi }^{\prime }$ is calculated with the use of Equation (7) as

$${\phi }_{\mathrm{new}}^{\prime }={\phi }_{\mathrm{old}}^{\prime }+\Delta l{\left(a^2+\frac{ab{\phi }_{\mathrm{old}}^{\prime }}{\pi }+\frac{b^2\left({{\phi }^{\prime }}_{\mathrm{old}}^2+1\right)}{4{\pi }^2}\right)}^{-\frac{1}{2}}.$$

(10)

At each step, a new set of p and q points are calculated in the same way as before, but using ${\phi }_{\mathrm{new}}^{\prime }$ instead of ${\phi }^{\prime }=0$. Once the length of the traveled path reaches the prescribed length of the segment (l), the list of all p and q points corresponding to this segment is used to draw a filled polygon with the prescribed color. This process is then repeated for all next segments.

The end result is a spiral strip consisting of segments with prescribed widths and lengths, with the segment borders guaranteed to be either parallel or perpendicular to the spiral curve.

2.2. Spiral Strip Python Package

We published a Python package that implements the procedure described in the previous section. The package is freely available in the Github repository (for details, please refer to the data availability statement at the end of the article). The package uses the widely available NumPy and Matplotlib python libraries to produce images in a vector (e.g., pdf, eps) or raster (e.g., png, gif, jpg) format. The package is easy to use, and has many options for customizing the graphic and some additional functionalities not mentioned in the previous section (e.g., the possibility of displaying textual or numerical annotations near each segment and adding gaps between consecutive segments). The package also includes the code and data for all the examples shown in the next section.

3. Results

Here, we show some examples of the new graphic. All the examples were drawn using the Spiral Strip Python package described in Section 2.2. The source code and the data for all examples are available in the package.

Figure 2 shows the first four examples that are based on the temperature data from Ljubljana, Slovenia. They all show a hundred-year sequence of average yearly 2-m temperatures in Ljubljana in the period of 1917–2017. The yearly averages were calculated from the monthly average temperature data in the same period, which the Slovenian Environment Agency kindly provided.

Figure 2a shows a rather thin spiral strip that makes approximately five and a half loops around the center from start to finish. The most recent year in the dataset (2017) is positioned at the start of the spiral near the center, while the first year (1917) is positioned at the other end of spiral. The spiral strip was drawn using the following parameter values: $r_0=10$, ${\phi }_0={45}^{\circ }$, $w=20$, $l=40$ and $s=15$.

Matplotlib’s coolwarm color map, which includes a transition from blue to red, was used to define the segment colors. Similar to the warming stripes, the colder years are thus represented in more bluish colors and the warmer in more reddish. The coldest year was 1940, when the average temperature was only 8.4 °C, and the warmest year was 2014, with a temperature of 12.6 °C. Like the warming stripes, there is a color transition from the bluish colors at the outskirts of the spiral toward more reddish colors near the center, thus clearly showing the warming trend of Earth’s climate and the inherent variability of the climate system. As long as the observer knows that the colors reflect the temperatures, and that the time increases towards the middle, the meaning of the graphic is very easy to grasp and can be intuitively understood.

Figure 2b is identical to Figure 2a, with the exception that labels were added near each segment indicating the year. The orientation of the text is along vector ${\mathbf{e}}_l$. In order to keep the spiral strip the main focus of the graphic, the label font size is small, and the colors of the labels are identical to the colors of the corresponding polygons. An alternative option could be to display the yearly temperature values instead of the years, display both, or intermittently display the year and the temperature.

Figure 2c shows a strip with wider and shorter segments. Compared to the strips shown in Figure 2a, the segment width was increased from $w=20$ to 30 and the length reduced from $l=40$ to 10, with the rest of the parameters being the same. Due to the shorter segments, the spiral strip makes only two full loops around the center from start to finish. Similar to Figure 2b, the labels show the years in small font and are color-coded identically to the polygons in order for the spiral strip to remain the main focus of the graphic.

Figure 2d is similar to Figure 2a, but with the spiral strip starting some way off the center. The only parameter that changed compared to Figure 2a is $r_0$, which was increased from 10 to 120. Since the spiral does not start near the center, the middle region is empty, allowing for adding a title. The title Ljubljana temperature was manually added to the image after it had been produced. The title clarifies for the casual observer what is shown on the graphic.

The last two examples are not related to climate. Figure 3 shows the increase in global population in the period of 1900–2021, with each segment representing one year. The image is based on the freely available population data published at ourworldindata.org (https://ourworldindata.org/world-population-growth (accessed on 30 January 2022 )). Their data are based on two sources, the UN World Population Prospects [9] and the Gapminder [10].

The population information is displayed by the color (again using the coolwarm colormap) and width of the segments. The following parameter values were used to draw the spiral strip: $r_0=10$, ${\phi }_0={45}^{\circ }$, $l=4.5$ and $s=0$. The width of each segment was different and proportional to the population size. It is defined as $w=\frac{pop}{po{p}_{\max }}·60$, where $pop$ is the population size for the corresponding year, while $po{p}_{\max }$ is the largest value of population in the series. The labels intermittently depict the year and population size, with the years shown in gray, while the population size uses a larger font and is colored identically to the polygons. The title Humans was manually added to the image after it had been produced.

The increasing width, along with the clear color transition from blue to red, clearly shows the increasing trend of the population on our planet, as the population increased from 1.7 to 7.9 billion between 1900 and 2021. The meaning of the graphic is easy to grasp and can be intuitively understood by a casual observer.

The last example shows the seven deadliest wars in human history (Figure 4). Information about the death toll and duration of the wars was taken from the Wikipedia page “List of wars by death toll” [11]. Only the data from the seven wars with the largest death toll were used. If the death toll for a particular war was given as a range, the middle value between the upper and lower estimates was used.

The wars are sorted according to the death toll in descending order. The following parameter values were used to draw the spiral strip: $r_0=10$, ${\phi }_0=0^{\circ }$ and $s=0$. The length of each segment is proportional to the duration of the corresponding war: $l=35·duration$ where $duration$ is expressed in years. The width of each segment is determined by the war’s duration and death toll: $w=10·\frac{deaths}{duration}$ where $deaths$ are expressed in millions. The area size of each segment can be approximated by multiplying w with l. Since $w·l=10·\frac{deaths}{duration}35·duration=350·deaths$ it follows that the area size of each segments is approximately proportional to the death toll. As the length of the segment is proportional to the duration and its area size to the death toll, it is easy to compare the duration and death toll of different wars visually. The segment colors alternate between red and blue to make the segments more distinct. Since the segments were not part of a temporal sequence, a white gap was added between consecutive segments (the length of the gap is 20) to make the segments more distinct. Once the spiral strip had been drawn, the title and the annotations were manually added to the image.

Once the observer is aware that the length of each spiral segment is proportional to the war’s duration, and its area size to its death toll, the meaning of the graphic is easy to grasp. The tremendous death toll of World War II is very apparent, with its segment being much larger in terms of area than the segments of other wars are. The long duration of the Chinese Civil War also stands out, with the other segments being significantly shorter.

4. Conclusions

A visual graphic called Spiral Strip was presented that consists of color-coded segments arranged in a spiral. The width and length of each segment can be different, which can be used to convey additional information. A customized coordinate system was used to define the shapes of individual segments, which in turn look less deformed near the center.

Although the primary motivation for developing the new graphic was related to climatic data, it can also be used with other types of data. The graphic’s visual appearance and main properties were demonstrated in several examples based on climate, population size, and historical data. These show that, as long as the observer is aware of some minimal prior information, the meaning of the graphic is easy to grasp and can be intuitively understood. An easy-to-use Python code package for drawing the Spiral Strips is freely available for download in a public repository.