kariyayo/radarChart.html

## radarChart.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<script>
var radarChart = function(){
  var w = 200,
      h = 200,
      padding = 20,
      svg = d3.select('body')
              .append('svg')
              .attr('width', w)
              .attr('height', h),
      dataset = [
        [5, 5, 2, 5, 8, 2, 3],
        [2, 1, 5, 2, 5, 6, 7]
      ],
      paramCount = dataset[0].length,
      max = d3.max(d3.merge(dataset)),
      rScale = d3.scale.linear()
                 .domain([0, max])
                 .range([0, w/2 - padding]),
      grid = (function(){
        var result = [];
        for(var i=1; i<=max; i++){
          var arr = [];
          for (var j=0; j<paramCount; j++){
            arr.push(i);
          }
          result.push(arr);
        }
        return result;
      })(),
      label  = (function(){
        var result = [];
        for(var i=0; i<paramCount; i++){
          result.push(max + 1);
        }
        return result;
      })(),
      line = d3.svg.line()
               .x(function(d, i){ return rScale(d) * Math.cos(2 * Math.PI / paramCount * i - (Math.PI / 2)) + w/2; })
               .y(function(d, i){ return rScale(d) * Math.sin(2 * Math.PI / paramCount * i - (Math.PI / 2)) + w/2; })
               .interpolate('linear');
  svg.selectAll('path')
     .data(dataset)
     .enter()
     .append('path')
     .attr('d', function(d){
       return line(d)+"z";
     })
     .attr("stroke", function(d, i){ return d3.scale.category10().range()[i]; })
     .attr("stroke-width", 2)
     .attr('fill', 'none');
  svg.selectAll("path.grid")
     .data(grid)
     .enter()
     .append("path")
     .attr("d", function(d,i){
       return line(d)+"z";
     })
     .attr("stroke", "black")
     .attr("stroke-dasharray", "2")
     .attr('fill', 'none');
  svg.selectAll("text")
     .data(label)
     .enter()
     .append('text')
     .text(function(d, i){ return i+1; })
     .attr("text-anchor", "middle")
     .attr("dominant-baseline", "middle")
     .attr('x', function(d, i){ return rScale(d) * Math.cos(2 * Math.PI / paramCount * i - (Math.PI / 2)) + w/2; })
     .attr('y', function(d, i){ return rScale(d) * Math.sin(2 * Math.PI / paramCount * i - (Math.PI / 2)) + w/2; })
     .attr("font-size", "15px");
};
radarChart();
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	</head>
	<body>
	<script>
	var radarChart = function(){
	var w = 200,
	h = 200,
	padding = 20,
	svg = d3.select('body')
	.append('svg')
	.attr('width', w)
	.attr('height', h),
	dataset = [
	[5, 5, 2, 5, 8, 2, 3],
	[2, 1, 5, 2, 5, 6, 7]
	],
	paramCount = dataset[0].length,
	max = d3.max(d3.merge(dataset)),
	rScale = d3.scale.linear()
	.domain([0, max])
	.range([0, w/2 - padding]),
	grid = (function(){
	var result = [];
	for(var i=1; i<=max; i++){
	var arr = [];
	for (var j=0; j<paramCount; j++){
	arr.push(i);
	}
	result.push(arr);
	}
	return result;
	})(),
	label = (function(){
	var result = [];
	for(var i=0; i<paramCount; i++){
	result.push(max + 1);
	}
	return result;
	})(),
	line = d3.svg.line()
	.x(function(d, i){ return rScale(d) * Math.cos(2 * Math.PI / paramCount * i - (Math.PI / 2)) + w/2; })
	.y(function(d, i){ return rScale(d) * Math.sin(2 * Math.PI / paramCount * i - (Math.PI / 2)) + w/2; })
	.interpolate('linear');
	svg.selectAll('path')
	.data(dataset)
	.enter()
	.append('path')
	.attr('d', function(d){
	return line(d)+"z";
	})
	.attr("stroke", function(d, i){ return d3.scale.category10().range()[i]; })
	.attr("stroke-width", 2)
	.attr('fill', 'none');
	svg.selectAll("path.grid")
	.data(grid)
	.enter()
	.append("path")
	.attr("d", function(d,i){
	return line(d)+"z";
	})
	.attr("stroke", "black")
	.attr("stroke-dasharray", "2")
	.attr('fill', 'none');
	svg.selectAll("text")
	.data(label)
	.enter()
	.append('text')
	.text(function(d, i){ return i+1; })
	.attr("text-anchor", "middle")
	.attr("dominant-baseline", "middle")
	.attr('x', function(d, i){ return rScale(d) * Math.cos(2 * Math.PI / paramCount * i - (Math.PI / 2)) + w/2; })
	.attr('y', function(d, i){ return rScale(d) * Math.sin(2 * Math.PI / paramCount * i - (Math.PI / 2)) + w/2; })
	.attr("font-size", "15px");
	};
	radarChart();
	</script>
	</body>
	</html>