A bit more than 2 years ago I wrote a small blog about making the d3.js radar chart look a little better. I know that opinions are diverse about the usefulness of these types of charts. But I can’t deny that I personally have a love for circular charts. I even keep a Pinterest board specifically for circular data visualizations.
Since that chart in the blog from over 2 years ago I haven’t created another radar chart, until a small project came by right before the start of the summer. And apparently, it was about time for another redesign.
The original, very first radar chart code came from alangrafu. For the first “redesign” I only adjusted small things for better esthetics
So I went back to the code from my first radar chart blog to set-up a new radar chart. One good thing, after 2 years of doing more d3.js & JavaScript I finally understood what each line did (๑•̀ㅂ•́)ง✧
Redesigning the radar chart
I slowly started to change things to the original code. Mostly because I wanted a different look, but also to simplify the code, and to use different functions or different SVG elements. In the end I ended up with a new radarChart function that probably only contains 10% of the original code. Visually it’s quite a different design now.
I’ve written a separate blog on how to create the glow effect
The biggest visual changes are a circular grid in the background, adding the option to choose smooth connecting lines and adding an SVG glow filter around the stroke (I just liked the look).
Some ideas are still the same. The mouse over interactivity that highlights one shape and dims all others, the small tooltip that appears when you hover over a circle to see the exact percentage, and the way the function gets called and how you supply the possible options.
However, some of these options have changed. The ones currently available (shown together with their default values) are:
//Possible options for the RadarChart function
w: 600, //Width of the circle
h: 600, //Height of the circle
margin: {top: 20, right: 20, bottom: 20, left: 20}, //The margins of the SVG
levels: 3, //How many levels or inner circles should be drawn
maxValue: 0, //What is the value that the biggest circle will represent
labelFactor: 1.25, //How much farther than the radius of the outer circle should the labels be placed
wrapWidth: 60, //The number of pixels after which a label needs to be given a new line
opacityArea: 0.35, //The opacity of the area of the blob
dotRadius: 4, //The size of the colored circles of each blog
opacityCircles: 0.1, //The opacity of the circles of each blob
strokeWidth: 2, //The width of the stroke around each blob
roundStrokes: false, //If true the area and stroke will follow a round path (cardinal-closed)
color: d3.scale.category10() //Color function
You can set the options that you want and call the function in radarChart.js with the following code (which are the options I used for the images in this blog)
var color = d3.scale.ordinal().range(["#EDC951","#CC333F","#00A0B0"]);
var radarChartOptions = {
w: width,
h: height,
margin: margin,
maxValue: 0.5,
levels: 5,
roundStrokes: true,
color: color
};
//Call function to draw the Radar chart
//RadarChart(
// "id or class of to which the new SVG needs to be appended",
// the dataset,
// the options (optional))
RadarChart(".radarChart", data, radarChartOptions);
The Code
One of the things that I hope the new radarChart function offers is better readability of the function code itself. That you can more easily understand what is happening. That way, if you want to make adjustments that are not part of the current options, you are able to adjust the code of the radarChart function without to much difficulty.
You can find the interactive version of the radar chart images above here and the code for the new radarChart.js function here. You’ll still have to make your own legend though
Note The data in this one represents reasons current users of the iPhone, Samsung or Nokia smartphone find important in choosing their next phone in the Netherlands, taken from the last year’s Global Mobile Consumer Survey (2014) performed yearly by Deloitte.