| height: 600 | |
| license: mit | |
| acknowledgement: Please add "Nadieh Bremer | Visual Cinnamon" to your credit when re-using this code, thank you! |
A new design for a radar chart in D3.js. You can read more about in on the blog I wrote "A different look for the D3 radar chart"
An older version of a radar chart that I adjusted two years ago when I was just starting to learn D3.js can be found here
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/ > | |
| <title>Smoothed D3.js Radar Chart</title> | |
| <!-- Google fonts --> | |
| <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'> | |
| <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'> | |
| <!-- D3.js --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script> | |
| <style> | |
| body { | |
| font-family: 'Open Sans', sans-serif; | |
| font-size: 11px; | |
| font-weight: 300; | |
| fill: #242424; | |
| text-align: center; | |
| text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff; | |
| cursor: default; | |
| } | |
| .legend { | |
| font-family: 'Raleway', sans-serif; | |
| fill: #333333; | |
| } | |
| .tooltip { | |
| fill: #333333; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="radarChart"></div> | |
| <script src="radarChart.js"></script> | |
| <script> | |
| /* Radar chart design created by Nadieh Bremer - VisualCinnamon.com */ | |
| ////////////////////////////////////////////////////////////// | |
| //////////////////////// Set-Up ////////////////////////////// | |
| ////////////////////////////////////////////////////////////// | |
| var margin = {top: 100, right: 100, bottom: 100, left: 100}, | |
| width = Math.min(700, window.innerWidth - 10) - margin.left - margin.right, | |
| height = Math.min(width, window.innerHeight - margin.top - margin.bottom - 20); | |
| ////////////////////////////////////////////////////////////// | |
| ////////////////////////// Data ////////////////////////////// | |
| ////////////////////////////////////////////////////////////// | |
| var data = [ | |
| [//iPhone | |
| {axis:"Battery Life",value:0.22}, | |
| {axis:"Brand",value:0.28}, | |
| {axis:"Contract Cost",value:0.29}, | |
| {axis:"Design And Quality",value:0.17}, | |
| {axis:"Have Internet Connectivity",value:0.22}, | |
| {axis:"Large Screen",value:0.02}, | |
| {axis:"Price Of Device",value:0.21}, | |
| {axis:"To Be A Smartphone",value:0.50} | |
| ],[//Samsung | |
| {axis:"Battery Life",value:0.27}, | |
| {axis:"Brand",value:0.16}, | |
| {axis:"Contract Cost",value:0.35}, | |
| {axis:"Design And Quality",value:0.13}, | |
| {axis:"Have Internet Connectivity",value:0.20}, | |
| {axis:"Large Screen",value:0.13}, | |
| {axis:"Price Of Device",value:0.35}, | |
| {axis:"To Be A Smartphone",value:0.38} | |
| ],[//Nokia Smartphone | |
| {axis:"Battery Life",value:0.26}, | |
| {axis:"Brand",value:0.10}, | |
| {axis:"Contract Cost",value:0.30}, | |
| {axis:"Design And Quality",value:0.14}, | |
| {axis:"Have Internet Connectivity",value:0.22}, | |
| {axis:"Large Screen",value:0.04}, | |
| {axis:"Price Of Device",value:0.41}, | |
| {axis:"To Be A Smartphone",value:0.30} | |
| ] | |
| ]; | |
| ////////////////////////////////////////////////////////////// | |
| //////////////////// Draw the Chart ////////////////////////// | |
| ////////////////////////////////////////////////////////////// | |
| 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(".radarChart", data, radarChartOptions); | |
| </script> | |
| </body> | |
| </html> |
MIT License
Copyright (c) 2024 Nadieh Bremer | Visual Cinnamon
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
| ///////////////////////////////////////////////////////// | |
| /////////////// The Radar Chart Function //////////////// | |
| /////////////// Written by Nadieh Bremer //////////////// | |
| ////////////////// VisualCinnamon.com /////////////////// | |
| /////////// Inspired by the code of alangrafu /////////// | |
| ///////////////////////////////////////////////////////// | |
| function RadarChart(id, data, options) { | |
| var cfg = { | |
| 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 there 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 | |
| }; | |
| //Put all of the options into a variable called cfg | |
| if('undefined' !== typeof options){ | |
| for(var i in options){ | |
| if('undefined' !== typeof options[i]){ cfg[i] = options[i]; } | |
| }//for i | |
| }//if | |
| //If the supplied maxValue is smaller than the actual one, replace by the max in the data | |
| var maxValue = Math.max(cfg.maxValue, d3.max(data, function(i){return d3.max(i.map(function(o){return o.value;}))})); | |
| var allAxis = (data[0].map(function(i, j){return i.axis})), //Names of each axis | |
| total = allAxis.length, //The number of different axes | |
| radius = Math.min(cfg.w/2, cfg.h/2), //Radius of the outermost circle | |
| Format = d3.format('%'), //Percentage formatting | |
| angleSlice = Math.PI * 2 / total; //The width in radians of each "slice" | |
| //Scale for the radius | |
| var rScale = d3.scale.linear() | |
| .range([0, radius]) | |
| .domain([0, maxValue]); | |
| ///////////////////////////////////////////////////////// | |
| //////////// Create the container SVG and g ///////////// | |
| ///////////////////////////////////////////////////////// | |
| //Remove whatever chart with the same id/class was present before | |
| d3.select(id).select("svg").remove(); | |
| //Initiate the radar chart SVG | |
| var svg = d3.select(id).append("svg") | |
| .attr("width", cfg.w + cfg.margin.left + cfg.margin.right) | |
| .attr("height", cfg.h + cfg.margin.top + cfg.margin.bottom) | |
| .attr("class", "radar"+id); | |
| //Append a g element | |
| var g = svg.append("g") | |
| .attr("transform", "translate(" + (cfg.w/2 + cfg.margin.left) + "," + (cfg.h/2 + cfg.margin.top) + ")"); | |
| ///////////////////////////////////////////////////////// | |
| ////////// Glow filter for some extra pizzazz /////////// | |
| ///////////////////////////////////////////////////////// | |
| //Filter for the outside glow | |
| var filter = g.append('defs').append('filter').attr('id','glow'), | |
| feGaussianBlur = filter.append('feGaussianBlur').attr('stdDeviation','2.5').attr('result','coloredBlur'), | |
| feMerge = filter.append('feMerge'), | |
| feMergeNode_1 = feMerge.append('feMergeNode').attr('in','coloredBlur'), | |
| feMergeNode_2 = feMerge.append('feMergeNode').attr('in','SourceGraphic'); | |
| ///////////////////////////////////////////////////////// | |
| /////////////// Draw the Circular grid ////////////////// | |
| ///////////////////////////////////////////////////////// | |
| //Wrapper for the grid & axes | |
| var axisGrid = g.append("g").attr("class", "axisWrapper"); | |
| //Draw the background circles | |
| axisGrid.selectAll(".levels") | |
| .data(d3.range(1,(cfg.levels+1)).reverse()) | |
| .enter() | |
| .append("circle") | |
| .attr("class", "gridCircle") | |
| .attr("r", function(d, i){return radius/cfg.levels*d;}) | |
| .style("fill", "#CDCDCD") | |
| .style("stroke", "#CDCDCD") | |
| .style("fill-opacity", cfg.opacityCircles) | |
| .style("filter" , "url(#glow)"); | |
| //Text indicating at what % each level is | |
| axisGrid.selectAll(".axisLabel") | |
| .data(d3.range(1,(cfg.levels+1)).reverse()) | |
| .enter().append("text") | |
| .attr("class", "axisLabel") | |
| .attr("x", 4) | |
| .attr("y", function(d){return -d*radius/cfg.levels;}) | |
| .attr("dy", "0.4em") | |
| .style("font-size", "10px") | |
| .attr("fill", "#737373") | |
| .text(function(d,i) { return Format(maxValue * d/cfg.levels); }); | |
| ///////////////////////////////////////////////////////// | |
| //////////////////// Draw the axes ////////////////////// | |
| ///////////////////////////////////////////////////////// | |
| //Create the straight lines radiating outward from the center | |
| var axis = axisGrid.selectAll(".axis") | |
| .data(allAxis) | |
| .enter() | |
| .append("g") | |
| .attr("class", "axis"); | |
| //Append the lines | |
| axis.append("line") | |
| .attr("x1", 0) | |
| .attr("y1", 0) | |
| .attr("x2", function(d, i){ return rScale(maxValue*1.1) * Math.cos(angleSlice*i - Math.PI/2); }) | |
| .attr("y2", function(d, i){ return rScale(maxValue*1.1) * Math.sin(angleSlice*i - Math.PI/2); }) | |
| .attr("class", "line") | |
| .style("stroke", "white") | |
| .style("stroke-width", "2px"); | |
| //Append the labels at each axis | |
| axis.append("text") | |
| .attr("class", "legend") | |
| .style("font-size", "11px") | |
| .attr("text-anchor", "middle") | |
| .attr("dy", "0.35em") | |
| .attr("x", function(d, i){ return rScale(maxValue * cfg.labelFactor) * Math.cos(angleSlice*i - Math.PI/2); }) | |
| .attr("y", function(d, i){ return rScale(maxValue * cfg.labelFactor) * Math.sin(angleSlice*i - Math.PI/2); }) | |
| .text(function(d){return d}) | |
| .call(wrap, cfg.wrapWidth); | |
| ///////////////////////////////////////////////////////// | |
| ///////////// Draw the radar chart blobs //////////////// | |
| ///////////////////////////////////////////////////////// | |
| //The radial line function | |
| var radarLine = d3.svg.line.radial() | |
| .interpolate("linear-closed") | |
| .radius(function(d) { return rScale(d.value); }) | |
| .angle(function(d,i) { return i*angleSlice; }); | |
| if(cfg.roundStrokes) { | |
| radarLine.interpolate("cardinal-closed"); | |
| } | |
| //Create a wrapper for the blobs | |
| var blobWrapper = g.selectAll(".radarWrapper") | |
| .data(data) | |
| .enter().append("g") | |
| .attr("class", "radarWrapper"); | |
| //Append the backgrounds | |
| blobWrapper | |
| .append("path") | |
| .attr("class", "radarArea") | |
| .attr("d", function(d,i) { return radarLine(d); }) | |
| .style("fill", function(d,i) { return cfg.color(i); }) | |
| .style("fill-opacity", cfg.opacityArea) | |
| .on('mouseover', function (d,i){ | |
| //Dim all blobs | |
| d3.selectAll(".radarArea") | |
| .transition().duration(200) | |
| .style("fill-opacity", 0.1); | |
| //Bring back the hovered over blob | |
| d3.select(this) | |
| .transition().duration(200) | |
| .style("fill-opacity", 0.7); | |
| }) | |
| .on('mouseout', function(){ | |
| //Bring back all blobs | |
| d3.selectAll(".radarArea") | |
| .transition().duration(200) | |
| .style("fill-opacity", cfg.opacityArea); | |
| }); | |
| //Create the outlines | |
| blobWrapper.append("path") | |
| .attr("class", "radarStroke") | |
| .attr("d", function(d,i) { return radarLine(d); }) | |
| .style("stroke-width", cfg.strokeWidth + "px") | |
| .style("stroke", function(d,i) { return cfg.color(i); }) | |
| .style("fill", "none") | |
| .style("filter" , "url(#glow)"); | |
| //Append the circles | |
| blobWrapper.selectAll(".radarCircle") | |
| .data(function(d,i) { return d; }) | |
| .enter().append("circle") | |
| .attr("class", "radarCircle") | |
| .attr("r", cfg.dotRadius) | |
| .attr("cx", function(d,i){ return rScale(d.value) * Math.cos(angleSlice*i - Math.PI/2); }) | |
| .attr("cy", function(d,i){ return rScale(d.value) * Math.sin(angleSlice*i - Math.PI/2); }) | |
| .style("fill", function(d,i,j) { return cfg.color(j); }) | |
| .style("fill-opacity", 0.8); | |
| ///////////////////////////////////////////////////////// | |
| //////// Append invisible circles for tooltip /////////// | |
| ///////////////////////////////////////////////////////// | |
| //Wrapper for the invisible circles on top | |
| var blobCircleWrapper = g.selectAll(".radarCircleWrapper") | |
| .data(data) | |
| .enter().append("g") | |
| .attr("class", "radarCircleWrapper"); | |
| //Append a set of invisible circles on top for the mouseover pop-up | |
| blobCircleWrapper.selectAll(".radarInvisibleCircle") | |
| .data(function(d,i) { return d; }) | |
| .enter().append("circle") | |
| .attr("class", "radarInvisibleCircle") | |
| .attr("r", cfg.dotRadius*1.5) | |
| .attr("cx", function(d,i){ return rScale(d.value) * Math.cos(angleSlice*i - Math.PI/2); }) | |
| .attr("cy", function(d,i){ return rScale(d.value) * Math.sin(angleSlice*i - Math.PI/2); }) | |
| .style("fill", "none") | |
| .style("pointer-events", "all") | |
| .on("mouseover", function(d,i) { | |
| newX = parseFloat(d3.select(this).attr('cx')) - 10; | |
| newY = parseFloat(d3.select(this).attr('cy')) - 10; | |
| tooltip | |
| .attr('x', newX) | |
| .attr('y', newY) | |
| .text(Format(d.value)) | |
| .transition().duration(200) | |
| .style('opacity', 1); | |
| }) | |
| .on("mouseout", function(){ | |
| tooltip.transition().duration(200) | |
| .style("opacity", 0); | |
| }); | |
| //Set up the small tooltip for when you hover over a circle | |
| var tooltip = g.append("text") | |
| .attr("class", "tooltip") | |
| .style("opacity", 0); | |
| ///////////////////////////////////////////////////////// | |
| /////////////////// Helper Function ///////////////////// | |
| ///////////////////////////////////////////////////////// | |
| //Taken from http://bl.ocks.org/mbostock/7555321 | |
| //Wraps SVG text | |
| function wrap(text, width) { | |
| text.each(function() { | |
| var text = d3.select(this), | |
| words = text.text().split(/\s+/).reverse(), | |
| word, | |
| line = [], | |
| lineNumber = 0, | |
| lineHeight = 1.4, // ems | |
| y = text.attr("y"), | |
| x = text.attr("x"), | |
| dy = parseFloat(text.attr("dy")), | |
| tspan = text.text(null).append("tspan").attr("x", x).attr("y", y).attr("dy", dy + "em"); | |
| while (word = words.pop()) { | |
| line.push(word); | |
| tspan.text(line.join(" ")); | |
| if (tspan.node().getComputedTextLength() > width) { | |
| line.pop(); | |
| tspan.text(line.join(" ")); | |
| line = [word]; | |
| tspan = text.append("tspan").attr("x", x).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word); | |
| } | |
| } | |
| }); | |
| }//wrap | |
| }//RadarChart |
This is awesome! I started poking this today to practice styling d3, just wanted to share a little fix for something I ran into.
I wanted to remove the stroke as config'd in strokeWidth entirely, but that broke the great hover opacity effect. Instead of hackily removing the stroke from blobWrapper which was the first solution I found, I figured an if statement would be better. Had some trouble with vanilla JS logic at first trying to put the style inside of the if statement, but after some trial and error got this if inside of the style:
.style("stroke", function(d, i) {
if (cfg.strokeWidth === 0) {return;}
else {return cfg.color(i);}
})
complete blobWrapper
blobWrapper.append("path")
.attr("class", "radarStroke")
.attr("d", function(d,i) { return radarLine(d); })
.style("stroke-width", cfg.strokeWidth + "px")
// add if statement for stroke=0
.style("stroke", function(d, i) {
if (cfg.strokeWidth === 0) {return;}
else {return cfg.color(i);}
})
.style("fill", "none")
.style("filter" , "url(#glow)");
super simple and affords a bit more control! Just wanted to share in case this helps anyone else in the future. Thanks for a great block!
There are some parts of this that are out of date with the current version of D3 (v4). Here are the changes that I made to get this working:
color: d3.scale.category10() becomes color: d3.scaleOrdinal(d3.schemeCategory10)var rScale = d3.scale.linear() becomes var rScale = d3.scaleLinear()var radarLine = d3.svg.line.radial().interpolate("linear-closed") becomes var radarLine = d3.lineRadial().curve(d3.curveBasisClosed)radarLine.interpolate("cardinal-closed") becomes radarLine.curve(d3.curveCardinalClosed)There are some minor quirks to fix (I'll add a note here once I figure out the fix to those), but those are the breaking changes made from D3 v3 to v4.
This gist is awesome, thanks for sharing. I refactored it for my own use, more for a polar graph where my data has a given value for a bearing. I was curious if anyone had any ideas regarding:
In my code, instead of subtracting Pi/2 I used sin for X and cos for Y, like so:
.attr('x', function (d, i) {
return rScale(maxValue * cfg.labelFactor) * Math.sin(angleSlice * i);
})
.attr('y', function (d, i) {
return -(rScale(maxValue * cfg.labelFactor) * Math.cos(angleSlice * i));
})
.attr('cx', function (d) {
return rScale(d.value) * Math.sin(toRadians(d.bearing));
})
.attr('cy', function (d) {
return rScale(d.value) * -Math.cos(toRadians(d.bearing));
})Here is what my chart looks like. Thanks again - this gist really helped me get going.
Any tips on allowing this to use a slider to control the data?
I can use it whit angular 8 ? if yes how translate all this code to new version acceptable in angular 8 , i'm trying build a webcomponent and call them on angular app but that's not work
I can use it whit angular 8 ? if yes how translate all this code to new version acceptable in angular 8 , i'm trying build a webcomponent and call them on angular app but that's not work
can you reproduce your code and put a lint here ?
A slight change to Line 226 from .text(Format(d.value)) to .text(Format(i.value)) might be needed to get the correct values to show up on mouseover, instead of NaN%
I notice this one leaves out a legend telling what each color is for