├── example ├── demo.png └── index.html ├── README.md ├── src ├── radar-chart-min.js └── radar-chart.js └── LICENSE /example/demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/diasks2/radar-chart-d3/master/example/demo.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | radar-chart-d3 2 | ============== 3 | 4 | Simple radar chart in D3.js 5 | 6 | Example 7 | ======= 8 | 9 | http://graves.cl/radar-chart-d3 10 | -------------------------------------------------------------------------------- /src/radar-chart-min.js: -------------------------------------------------------------------------------- 1 | var RadarChart={draw:function(e,t,n){var r={radius:5,w:600,h:600,factor:1,factorLegend:.85,levels:3,maxValue:0,radians:2*Math.PI,opacityArea:.5,color:d3.scale.category10()};if("undefined"!==typeof n){for(var i in n){if("undefined"!==typeof n[i]){r[i]=n[i]}}}r.maxValue=Math.max(r.maxValue,d3.max(t,function(e){return d3.max(e.map(function(e){return e.value}))}));var s=t[0].map(function(e,t){return e.axis});var o=s.length;var u=r.factor*Math.min(r.w/2,r.h/2);d3.select(e).select("svg").remove();var a=d3.select(e).append("svg").attr("width",r.w).attr("height",r.h).append("g");var f;for(var l=0;l 2 | 3 | 4 | 5 | 6 | Demo Radar chart D3 7 | 10 | 11 | 12 |
13 |

Example of radar chart

14 |

https://github.com/alangrafu/radar-chart-d3

15 |
16 |
17 | Code: 18 | 
 19 | d = [
 20 |      [
 21 |            {axis: "strength", value: 13}, 
 22 |            {axis: "intelligence", value: 1}, 
 23 |            {axis: "charisma", value: 8},  
 24 |            {axis: "dexterity", value: 4},  
 25 |            {axis: "luck", value: 9}
 26 |           ],[
 27 |            {axis: "strength", value: 3}, 
 28 |            {axis: "intelligence", value: 15}, 
 29 |            {axis: "charisma", value: 4}, 
 30 |            {axis: "dexterity", value: 1},  
 31 |            {axis: "luck", value: 15}
 32 |           ],[
 33 |            {axis: "strength", value: 5}, 
 34 |            {axis: "intelligence", value: 1}, 
 35 |            {axis: "charisma", value: 16}, 
 36 |            {axis: "dexterity", value: 10},  
 37 |            {axis: "luck", value: 5}
 38 |      ]
 39 | ];
 40 | 
 41 | RadarChart.draw("#chart", d);
 42 | 
 43 |
44 |
45 |
46 | 47 |
48 |

Dynamically-generated chart

49 | 50 |
51 | 52 |
53 | 54 | 55 | 100 |
101 | 102 |

Radar chart using random colors (reload to see different colors)

103 |
104 |
105 | Code: 106 | 
107 |     
108 | d = [
109 |           [
110 |            {axis: "var1", value: 31}, 
111 |            {axis: "var2", value: 31}, 
112 |            {axis: "var3", value: 23}, 
113 |            {axis: "var4", value: 2}, 
114 |            {axis: "var5", value: 18}, 
115 |            {axis: "var6", value: 3}, 
116 |            {axis: "var7", value: 43}, 
117 |           ],[
118 |            {axis: "var1", value: 29}, 
119 |            {axis: "var2", value: 3}, 
120 |            {axis: "var3", value: 3}, 
121 |            {axis: "var4", value: 22}, 
122 |            {axis: "var5", value: 38}, 
123 |            {axis: "var6", value: 13}, 
124 |            {axis: "var7", value: 3},
125 |           ]
126 |         ];
127 | 
128 | var mycfg = {
129 |   color: function(){
130 |   c = ['red', 'yellow', 'pink', 'green', 'blue', 'olive', 'aqua', 'cadetblue', 'crimson'];
131 |   m = c.length - 1;
132 |   x = parseInt(Math.random()*100);
133 |   return c[x%m]; //Get a random color
134 | }
135 | }
136 | RadarChart.draw("#chart3", d, mycfg);
137 |   
138 |
139 |
140 |
141 | 172 | 173 | 174 | -------------------------------------------------------------------------------- /src/radar-chart.js: -------------------------------------------------------------------------------- 1 | var RadarChart = { 2 | draw: function(id, d, options){ 3 | var cfg = { 4 | radius: 5, 5 | w: 600, 6 | h: 600, 7 | factor: .95, 8 | factorLegend: 1, 9 | levels: 3, 10 | maxValue: 0, 11 | radians: 2 * Math.PI, 12 | opacityArea: 0.5, 13 | color: d3.scale.category10(), 14 | fontSize: 10 15 | }; 16 | if('undefined' !== typeof options){ 17 | for(var i in options){ 18 | if('undefined' !== typeof options[i]){ 19 | cfg[i] = options[i]; 20 | } 21 | } 22 | } 23 | cfg.maxValue = Math.max(cfg.maxValue, d3.max(d, function(i){return d3.max(i.map(function(o){return o.value;}))})); 24 | var allAxis = (d[0].map(function(i, j){return i.axis})); 25 | var total = allAxis.length; 26 | var radius = cfg.factor*Math.min(cfg.w/2, cfg.h/2); 27 | d3.select(id).select("svg").remove(); 28 | var g = d3.select(id).append("svg").attr("width", cfg.w).attr("height", cfg.h).append("g"); 29 | 30 | var tooltip; 31 | function getPosition(i, range, factor, func){ 32 | factor = typeof factor !== 'undefined' ? factor : 1; 33 | return range * (1 - factor * func(i * cfg.radians / total)); 34 | } 35 | function getHorizontalPosition(i, range, factor){ 36 | return getPosition(i, range, factor, Math.sin); 37 | } 38 | function getVerticalPosition(i, range, factor){ 39 | return getPosition(i, range, factor, Math.cos); 40 | } 41 | 42 | for(var j=0; j 0.6) ? "end" : "middle"); 70 | }) 71 | .attr("transform", function(d, i){ 72 | var p = getVerticalPosition(i, cfg.h / 2); 73 | return p < cfg.fontSize ? "translate(0, " + (cfg.fontSize - p) + ")" : ""; 74 | }) 75 | .attr("x", function(d, i){return getHorizontalPosition(i, cfg.w / 2, cfg.factorLegend);}) 76 | .attr("y", function(d, i){return getVerticalPosition(i, cfg.h / 2, cfg.factorLegend);}); 77 | 78 | 79 | d.forEach(function(y, x){ 80 | dataValues = []; 81 | g.selectAll(".nodes") 82 | .data(y, function(j, i){ 83 | dataValues.push([ 84 | getHorizontalPosition(i, cfg.w/2, (parseFloat(Math.max(j.value, 0))/cfg.maxValue)*cfg.factor), 85 | getVerticalPosition(i, cfg.h/2, (parseFloat(Math.max(j.value, 0))/cfg.maxValue)*cfg.factor) 86 | ]); 87 | }); 88 | dataValues.push(dataValues[0]); 89 | g.selectAll(".area") 90 | .data([dataValues]) 91 | .enter() 92 | .append("polygon") 93 | .attr("class", "radar-chart-serie"+series) 94 | .style("stroke-width", "2px") 95 | .style("stroke", cfg.color(series)) 96 | .attr("points",function(d) { 97 | var str=""; 98 | for(var pti=0;pti