Make a Radar Chart: Data Prep, Customization & More!

What is a Radar Chart?

A radar chart, sometimes called a spider chart or star chart, is a way to show lots of different data points all at once. Think of it like a web where each strand coming from the center represents something you’re measuring. The further out on that strand a point is, the higher the value.

Radar charts can be useful for:

Seeing strengths and weaknesses: They make it easy to spot where something is doing well and where it needs improvement.
Competitive analysis: You can compare different things using the same criteria to see who has the edge.
Tracking performance: By comparing radar charts over time, you can track progress.
Finding outliers: Anything that looks unusual will jump out at you.

This guide will show you how to make a radar chart using Flourish and Google Sheets. We’ll cover how to input your data, customize the look, and even add cool features like popups.

Data Preparation and Formatting for Radar Charts

Before you can create a radar chart, you’ll need to get your data in order. The way your data is structured and formatted will impact how well the chart represents that data, how easy it is to read, and how customizable it is.

Understanding Data Structure

Here are the key components you’ll need:

Labels: Descriptive names for each item or category you’re comparing.
Variables/Attributes: The criteria you’re using for the comparison (these will be represented as the “spokes” of the radar chart).
Values: Numerical data points that show how each item performs on each variable.

Well-structured data is essential for accuracy, easy interpretation, and customization. If your data is a mess, your chart will be a mess too!

Data Input Formats in Flourish

Flourish offers a few different ways to input your data:

Array of arrays: Your data is a list of lists, with the first list containing the column headers. You’ll need a “bindings object” to tell Flourish which columns correspond to which chart properties.
Array of objects with arbitrary keys: Your data is a list of dictionaries, where each dictionary represents a data point. Again, you’ll need a bindings object to link the data keys to the template properties.
Array of objects with template-defined keys: Your data follows specific key names that the Flourish template expects (like `name`, `values`, and `filter`). This is the easiest method, as you won’t need a bindings object if your data is correctly formatted.

Data Input in Google Sheets

Google Sheets is another option for data input. You’ll arrange your data in rows and columns, with the first row containing the category labels for your legend and subsequent rows representing the data points for each variable.

Google Sheets is simple, accessible, and offers an intuitive way to enter and manipulate data, making radar chart creation easier for everyone.

How to make a radar chart

Several apps and platforms let you quickly and easily generate a radar chart from your data. Here’s how to do it in a couple of popular applications.

Creating a radar chart in Flourish

Flourish is a popular data visualization tool that makes it simple to create interactive radar charts.

Select the template. Choose the “Radar Chart” template from the Flourish template gallery. (This template is version 6, @flourish/radar.)
Upload your data. Upload your prepared data in a supported format. If needed, use the bindings object to ensure the data is correctly mapped.
Check the initial chart. Flourish will automatically generate a chart based on the data and default settings. Review the chart to ensure your data is displayed correctly.

Creating a radar chart in Google Sheets

Google Sheets offers a built-in radar chart option for visualizing your data.

Select the data range. Select the cells containing your data, including the labels and values.
Insert the chart. In the Google Sheets menu, go to “Insert” and select “Chart.”
Choose the chart type. From the chart type options, select “Radar chart.”
Check the initial chart. Google Sheets will create a basic radar chart based on the selected data.

Customizing Radar Chart Appearance: Shapes, Colors, and Gridlines

Once you’ve got the basic radar chart in place, you can tweak its appearance to make it easier to read and better looking. Here’s how to adjust shapes, colors, and gridlines.

Shapes and Styling

Radar charts don’t have to be star-shaped. You can also:

Use star mode, which is the classic radar chart shape, with points radiating from the center.
Use ring mode, which creates concentric circles representing data values.

You can also play with the thickness and transparency of the lines representing your data. Experiment until you find a look that’s clear and easy to understand.

The fill opacity is the transparency of the area inside the lines. Lower opacity values can help you see overlapping areas more clearly.

If you’re using star mode, the inner radius is the size of the center. A radius of zero creates a traditional star shape. Setting the inner radius to 100% turns your chart into a radial bar chart.

Color Palette and Binning

Color is an important part of data visualization. You can use color to:

Assign colors to categories, to make it easier to see which category is which. You can choose a pre-defined palette or create your own.
Represent numeric values with color gradients. You can use a sequential palette (light to dark) for ordered data or diverging palettes for data with positive and negative values.
Group numeric values into bins and assign a color to each bin. This is useful for visualizing data distributions.

Gridlines and Axes

You can customize the radial axis lines, including:

Visibility (show/hide)
Color
Width

You can also adjust the number of ticks and the minimum/maximum values on the axis.

Finally, you can customize the appearance of the gridlines (color, width, style) and the axis labels (font size, color, weight). You can also add group labels to categorize metrics.

Enhancing Interactivity: Popups and Panels

Radar charts are great for displaying multivariate data, but what if you want to provide even more information to your audience? That’s where popups and panels come in.

Popups

Popups appear when users hover their cursor over a data point or click on it. They’re a great way to display detailed information about the selected item or variable.

You can customize popups using HTML code (specifically the `popup_custom_header` and `popup_custom_main` properties). This allows you to control the popup’s width, font size, text color, background color, and pretty much any other visual aspect you can think of.

Want to show dynamic data within the popup? No problem! Just use the `{{column_name}}` syntax to pull data directly from specific columns in your dataset. For example, if you had a column called “SalesFigures,” you’d use `{{SalesFigures}}` to display the sales figures in the popup.

Panels

Panels are another way to provide contextual information, but instead of appearing on hover or click, they’re typically displayed alongside the chart or as an overlay. They’re useful for providing supplementary information related to the entire chart or selected data points.

You can control the position of the panel using the `panel_position` property (e.g., “side” or “overlay”). And, just like popups, you can customize the content of the panel using HTML (using the `panel_custom_header` and `panel_custom_main` properties).

By providing deeper insights and context, panels can significantly enhance the overall user experience and make your radar chart even more informative and engaging.

Advanced Customization: Faceting, Controls, and Layout

Once you’ve mastered the basics of creating radar charts, it’s time to explore some advanced customization options. These features allow you to create more sophisticated and interactive visualizations.

Faceting (Grid of Charts)

Faceting lets you generate multiple radar charts, arranged in a grid. Each chart represents a different subset of your data, offering a multifaceted view of your information.

Creating Multiple Charts: Instead of a single chart, faceting lets you create a grid, with each chart representing a different slice of your data.
Custom Grid Layout: You can control the look of the grid by specifying the number of columns (facets.columns), the minimum width of each chart (facets.min_width), and the spacing between charts (facets.gutter_w, facets.gutter_h). For highly customized layouts, you can use facets.custom_positions to place charts in specific locations within the grid.
Titles and Animations: Add titles to each chart in the grid using facets.titles for clarity. You can also control the animation that plays when switching between different facets using facets.animation.

Interactive Controls

Make your radar charts even more useful by adding interactive controls that allow users to explore the data in different ways.

Filter Controls: Add controls that let users filter the data displayed in the chart. Use different control types, like button groups, dropdowns, or sliders, by setting the filter_control.control_type.
Facet Controls: Let users choose which facets are displayed in the grid using facet_control_show. You can customize the appearance and behavior of these controls using various style settings.

Layout Customization

Fine-tune the overall look and feel of your radar charts to match your brand or aesthetic preferences.

Font and Color Schemes: Change the overall font (layout.body_font) and color scheme (layout.font_color, layout.background_color) to suit your style.
Header and Footer: Modify the content of the header and footer, including titles, subtitles, logos, and source information, to provide context and attribution.
Responsiveness: Ensure your charts look great on any device by adjusting the layout and font sizes for different screen sizes.

Making radar charts accessible

If you’re going to publish your radar chart, you need to ensure that people with disabilities can understand it. Here’s how to make your Flourish radar chart more accessible.

Screen reader compatibility: Add text that screen readers can use to interpret the data. Use layout.screenreader_text_primary and layout.screenreader_label.
Alternative text: Add descriptive “alt text” to each chart element, so users with visual impairments can understand the context.
Color contrast: Use high-contrast colors so the chart is readable for people with low vision.

Final Thoughts

Radar charts are a great way to visualize data with many different variables and compare different items across those variables. To make sure your radar chart is clear and useful, it’s important to prepare your data carefully, customize the chart to fit your needs, and make it interactive so people can explore the data on their own.

Platforms like Flourish and Google Sheets offer a lot of different features to make and customize radar charts. Here are some best practices to keep in mind:

Keep the chart simple and easy to read. Don’t try to show too many variables at once.
Use labels that are easy to understand for the axes and data points.
Pick colors and shapes that help people see the important patterns in the data.
Think about who you’re making the chart for and design it in a way that will make sense to them.

Don’t be afraid to try different customization options to find what works best for your data. Explore advanced features like popups, panels, and faceting to make the chart even more interactive. And always get feedback from users to make your radar charts even better.