| height: 600 | |
| license: mit |
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
forked from nbremer's block: Radar Chart SCB
| <!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> | |
| .radarChart { | |
| 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 { | |
| fill: #333333; | |
| } | |
| .gridCircle { | |
| stroke: #CDCDCD; | |
| fill: none; | |
| } | |
| .axis .line { | |
| stroke: #CDCDCD;; | |
| } | |
| .charts { | |
| display: flex; | |
| } | |
| .axisLabel { | |
| display:none; | |
| } | |
| .legend { | |
| font-family: arial; | |
| font-weight: bold; | |
| color: #222; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="charts"> | |
| <div class="radarChart1"></div> | |
| <div class="radarChart2"></div> | |
| </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 = 500 - margin.left - margin.right, | |
| height = 500 - margin.top - margin.bottom - 20; | |
| ////////////////////////////////////////////////////////////// | |
| ////////////////////////// Data ////////////////////////////// | |
| ////////////////////////////////////////////////////////////// | |
| const a = 100; | |
| var data = [ | |
| [ | |
| {axis:"Visualization design",value:100/a}, | |
| {axis:"Storytelling",value:80/a}, | |
| {axis:"Tools",value:100/a}, | |
| {axis:"Data Analysis",value:60/a}, | |
| {axis:"Data Cleaning",value:40/a}, | |
| ], | |
| [ | |
| {axis:"Front-end",value:100/a}, | |
| {axis:"User Experience",value:80/a}, | |
| {axis:"Architecture",value:80/a}, | |
| {axis:"Testing/Debugging",value:80/a}, | |
| {axis:"Back-end",value:80/a}, | |
| ], | |
| ]; | |
| ////////////////////////////////////////////////////////////// | |
| //////////////////// Draw the Chart ////////////////////////// | |
| ////////////////////////////////////////////////////////////// | |
| var color1 = d3.scale.ordinal() | |
| .range(["#EDC951"]); | |
| var radarChartOptions1 = { | |
| w: width, | |
| h: height, | |
| margin: margin, | |
| maxValue: 1, | |
| levels: 5, | |
| roundStrokes: true, | |
| color: color1, | |
| labelFactor: 1.5 | |
| }; | |
| var color2 = d3.scale.ordinal() | |
| .range(["#CC333F"]); | |
| var radarChartOptions2 = { | |
| w: width, | |
| h: height, | |
| margin: margin, | |
| maxValue: 1, | |
| levels: 4, | |
| roundStrokes: true, | |
| color: color2, | |
| labelFactor: 1.5 | |
| }; | |
| //Call function to draw the Radar chart | |
| RadarChart(".radarChart1", [data[0]], radarChartOptions1); | |
| RadarChart(".radarChart2", [data[1]], radarChartOptions2); | |
| </script> | |
| </body> | |
| </html> |
| ///////////////////////////////////////////////////////// | |
| /////////////// 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.2, //The opacity of the area of the blob | |
| dotRadius: 8, //The size of the colored circles of each blog | |
| 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;}) | |
| //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") | |
| .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") | |
| function yLabelPosition(d, i){ return rScale(maxValue * cfg.labelFactor) * Math.sin(angleSlice*i - Math.PI/2) }; | |
| //Append the labels at each axis | |
| axis.append("text") | |
| .attr("class", "legend") | |
| .attr("text-anchor", "middle") | |
| .attr("dy", (d, i) => yLabelPosition(d,i) < (cfg.h/2) ? "0em" : '-2em') | |
| .attr("x", function(d, i){ return rScale(maxValue * cfg.labelFactor) * Math.cos(angleSlice*i - Math.PI/2); }) | |
| .attr("y", yLabelPosition ) | |
| .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) | |
| //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); | |
| ///////////////////////////////////////////////////////// | |
| /////////////////// 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 |
