Radar Chart

CS 465: Information Visualization - Spring 2016

Hanna Nowicki and Carter Merenstein

Description

Radar charts (also known as spider charts, polar charts, web charts, or star plots)
are a way to visualize multivariate data. They are used to plot one or more groups of values
over multiple common variables. They do this by giving an axis for each variable, and these
axes are arranged radially around a central point and spaced equally. The data from a
single observation are plotted along each axis and connected to form a polygon. Multiple
observations can be placed in a single chart by displaying multiple polygons, overlaying
them and reducing the opacity of each polygon.
An example of the type of data that can be easily displayed by radar charts would
be the properties of a car, where the variables shown on the individual axes could be
speed, mileage, price, etc., or baseball player statistics, where the variables shown could
be batting average or number of homeruns.
Each axis shares the same tick marks and scale, but the way the range of variable
values maps to this scale can vary between the displayed variables. For example, if one
variable is speed, which might be measured in miles/hour, and another is efficiency, which
might be measured in miles/gallon, these measures need to be converted to a scale of
units shared between the axis. Grid lines connect the the axes and are used as guideline to
make the chart more easily readable.

Implementation in D3
What are they good for?

Radar charts are especially good for visualizing comparisons of quality data. Many
attributes can be easily compared each along their own axis, and overall differences are
apparent by the size and shape of the polygons. In the example above, it is easy to see
that the green gymnast did the best overall, and did especially well on the landing. Another
advantage of the radar chart is that many variables can be represented next to each other
while still giving each variable the same resolution. Looking at the implementation again,
we could have added many more score categories without making it any harder to see a
gymnast's score along a particular axis.
Radar charts are the most effective when they are comparing one thing's
performance to a standard or a group's performance. For example, if one has a radar chart
that displays data about the average student's ability in various school subjects, one could
easily overlay another polygon showing a particular student's data in order to quickly see
how that student compares to an average student in each category.

Problems

The comparison of observations on a radar chart can become confusing once there
are more than a couple webs on the chart, or if there are too many variables, and therefore
too many axes, crowding the data. This problem can be fixed by lowering the opacity of
the polygons, but as more polygons are layered on top of each other, this could make
distinguishing colors and individual polygons difficult.
Though there are multiple axes that have gridlines connecting them for reference,
issues arise when viewers try to compare values across different axes. The variables on the
separate axes are usually nominally independent, and these variables could represent very
different measuring scales. When these scales are very different, it wouldn't seem helpful to
compare values across these axes. However, the way that the radar chart is displayed
could potentially lead viewers to want to make these comparisons, which could be
misleading if not intended. Even when we do want to make these connections, like when
we have time series data, comparing data points around a circle is more visually more
difficult to do than comparing data points on a single straight axis. The gridlines do help
with this, but are also adding a lot of non-data ink to the visualization, which could
complicate the visuals.
Each axis of a radar chart shares a common scale, which means that the range of
values of each variable needs to be mapped to this shared scale in a different way. The
way that this mapping occurs is not clear in many cases, and can even be misleading. For
example, in a radar chart displaying the properties of a car, 'speed' may be measured in
miles/hour, while the units of a property like 'comfort' are not explicitly defined. The
conversion from these measurements to the units of the shared scale is also unclear, and
viewers can be left to wonder how '100' on the shared scale maps to the number of
miles/hour, or units of comfort.
Another problems is that, looking at a radar chart, viewers could potentially think
that the area of the polygons is the most important thing to consider. However, the area
and shape of the polygons can change greatly depending on how the axes are positioned
around the circle. Though there is no ordering to a radar chart, since the variables are
usually nominal and there is no explictly stated start and end to a circle, ordering is
important in a way because it has such a great effect on the way the shapes appear. For
example, if there is a radar chart with 4 axes, and the top and right axes display a value of
1, and the bottom and left axes display a value of 0, this would result in a colored triangle.
However, if you switch the ordering of the axes so that the top and bottom axes now
display 1's and the right and left axes display 0's, the shape created will just be a line.
Comparing these 2 graphs quickly, one might think that these 2 charts are showing
different datasets, when they are not. The area of a shape in a radar chart also increases by
a square of the values, as opposed to linearly, which could lead viewers to think that small
changes are more significant than they might actually be.
Alternatives to radar charts are bar charts and parallel coordinate charts.

Presentation Materials

Presentation Slides
D3 Implementation

Other Example Implementations of Radar Charts

D3 Radar Chart
CSV D3 Radar Chart Github
 Example of Radar Chart

Resources

1. http://www.datavizcatalogue.com/methods/radar_chart.html: The Data Visualization

2. http://blog.scottlogic.com/2011/09/23/a-critique-of-radar-charts.html: A Critique of
Radar Charts. Gives pros and cons of using radar charts to display data.

3. http://bl.ocks.org/nbremer/6506614: D3 Radar Chart Example Code

4. http://www.one45.com/wordpress/assets/Best-practices-competency-spider-
graphs-radar-plots.pdf: How to Visually Represent Competency: Spider Graphs and
Radar Plots. This page gives some pros and cons of radar charts, but is more on the
pro side. It presents information as to why radar charts are helpful tools for
assessing competency in trainees and students.

5. https://en.wikipedia.org/wiki/Radar_chart: Radar Chart Wikipedia Page

6. http://www.advsofteng.com/images/multiradar_g.png: Picture of Radar Chart