Radial Arrow Ring

Click on a star to rate it!

Join 5 others who rated this 5/5!

No votes so far! Be the first to rate this post.

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

The “Tapered” Radial Arrow Ring: Visualizing World Electricity Generation

Introduction

In data visualization, the transition between categories is often an afterthought. Standard radial charts typically use simple divisions that cause segments to “stop” abruptly, leading to a cluttered or unfinished look.

By pivoting to Fixed-Step Math—rather than standard radial divisions—I’ve engineered a highly legible, infographic-style custom radial arrow chart. This approach provides total control over the geometry of every mark. Instead of a jarring halt, each segment (Coal, Gas, Nuclear, and Renewables) concludes with a polished, tapered tail. This “visual punctuation” doesn’t just look professional; it creates a clear, intuitive separation between data points, turning a standard ring into a sophisticated storytelling tool.

Tableau Public: World electricity generation Anim


1. Data Preparation

Before diving into the math, we must reshape the raw data to support a radial structure.

Category Mapping

I analyzed and aggregated the raw data into high-level groups to ensure the ring remained readable and focused.

Original SeriesMapped Dashboard Category
CoalCoal
Gas, Other FossilGas & Fossil
NuclearNuclear
Hydro, Wind, Solar, Bioenergy, Other RenewablesRenewables
Total GenerationTotal Generation

The Data Model

To create the “density” needed for the arrows, I imported a specialized Path & Position table and joined it with the grouped data using a 1=1 join in physical Layer. This generates the necessary marks for Tableau to draw.

PathPosition
01
3601
01.2
3601.2

2. The Architecture: Coordinate Geometry

The foundation of this chart lies in trigonometric identities. We are essentially translating a linear percentage into a \( (x, y) \) coordinate on a 2D plane.

The Coordinate Formulas

  • X Coordinate: SIN(RADIANS( ([Start Angle] * 360) + ( ([Index] / WINDOW_MAX([Index])) * ( ([TC Values] * 360) – [Gap Parameter] ) ) + ( [TC point ] * 5 ) )) * [TC Position]
  • Y Coordinate: COS(RADIANS( ([Start Angle] * 360) + ( ([Index] / WINDOW_MAX([Index])) * ( ([TC Values] * 360) – [Gap Parameter] ) ) + ( [TC point ] * 5 ) )) * [TC Position]

Note: Use a Bin on your Path field to create enough marks to form a continuous ring.


3. Breaking Down the Logic

A. [TC Values] & [TC Position]

These capture the “magnitude” and “placement” of each category.

  • [TC Values]: FLOAT(WINDOW_MAX(MAX([Percent]))) — Identifies the size of the category (e.g., 25%) and ensures every arrow in that segment stays consistent.
  • [TC Position]: FLOAT(WINDOW_MAX(MAX([Position]))) — Determines the radius. This allows us to stack concentric rings (e.g., Position 1.0 vs 1.2).

B. [Start Angle]

RUNNING_SUM([TC Values]) - [TC Values]

This is the Anchor Point. It calculates the cumulative total of previous segments so “Gas” starts exactly where “Coal” ends.

C. [TC point] (The Staggering Offset)

IIF([TC Position]=1.2, 1, 0)

By checking the radius, we apply a small 5-degree shift to specific rings. This prevents the start of concentric segments from overlapping perfectly, adding visual depth.

D. The “Step Engine”

([Index] / WINDOW_MAX([Index])) * (([TC Values] * 360) – [Gap Parameter])

This distributes the arrows evenly across the segment’s allotted slice of the circle, while the Gap Parameter ensures a clean break between categories.


4. The Artistry: Styling & Visual Polish

Once the geometry is set, we use conditional styling to transform a mathematical plot into a professional infographic.

I. The “Color Cap” Logic

To provide clear visual punctuation, we “hijack” the final mark of every segment.

  • Formula: IF ([Index] * 1) > (([TC Values] * 360) – 1) THEN “Black” ELSE ATTR([Series Grouped]) END
  • Visual Impact: This creates a definitive “stop” for the eye, signaling the end of a data category.

II. The “Comet Tail” Size Taper

We use a mathematical decay to “fade” the size of the final arrows.

  • Formula: MAX(0.2, MIN(1.0, (([TC Values] * 360) – ([Index] * [Fixed Step])) / ([Fixed Step] * 4)))
  • The Result: A smooth, organic finish where the last four arrows gradually shrink, implying motion and flow.

5. Precision Labeling: The Overlay Method

Labeling radial charts is a challenge. To solve this, we use the Sheet Overlay method.

The Midpoint Anchor

We create a second sheet with the exact same coordinate logic but filter it down to a single point:

  • Formula: INDEX() = INT(SIZE()/2)This finds the mathematical midpoint of every arc.

Why This Method Wins

  1. Total Control: Format text independently of the arrows.
  2. Perfect Alignment: Labels are mathematically synced to the ring; they move automatically when data updates.
  3. Transparency: By floating the label sheet over the ring with a transparent background, you create a seamless “HUD” (Heads-Up Display) look.

Final Takeaway

The result is more than just a chart; it is a functional design system. This tapered radial ring proves that with a bit of trigonometry and clever table calculations, you can transform raw data into a compelling, professional-grade narrative that is as beautiful as it is accurate.

3 thoughts on “Radial Arrow Ring”

  1. This is a very elegant and well-explained approach to data visualization. I especially appreciate how you identified the problem with abrupt radial segments and offered a thoughtful geometric solution. The tapered tails add a polished, professional feel and truly improve readability. Using Fixed-Step Math to control the design shows both technical depth and strong visual intuition. Overall, a creative and sophisticated upgrade to standard radial charts.

    1
  2. This is a masterclass in custom Tableau viz. The radial arrow design is super clean, and the animation adds a professional layer that you don’t see in standard dashboards. Great job on the blog post!

    1

Leave a Comment

Scroll to Top