D3 Examples - radar chart with smallest area on top

radar chart with smallest area on top

this version tries out radarChart.js with a new dataset and makes some improvements.

+ parameter-ize the axisName and value fields:

var radarChartOptions = { w: width, h: height, margin: margin, maxValue: 1, wrapWidth: 135, levels: 5, roundStrokes: true, color: color, axisName: "statement", value: "percentCorrect" };

+ subtract Math.PI/2 from angleSlice*i when drawing the radial axis lines so that they line up with the axis label text and the points (it seems this is only a problem your dataset has a number of elements that is not divisible by four)

+ sort the data for the areas from largest to smallest by average value (an approximation of actual blob area) so that that the smallest area is drawn last and therefore appears on top

//Calculate the average value for each area data.forEach(function(d){ d[value + "Average"] = d3.mean(d.values, function(e){ return e[value] }); }) //Sort data = data.sort(function(a, b){ var a = a[value + "Average"], b = b[value + "Average"]; return b - a; })

and a further iteration on the bl.ock Radar Chart Redesign created by @nbremer

xxxxxxxxxx
 
<!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='https://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>
            ////////////////////////////////////////////////////////////// 
            //////////////////////// 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);
                    
            ////////////////////////////////////////////////////////////// 
            //////////////////// Draw the Chart ////////////////////////// 
            ////////////////////////////////////////////////////////////// 
​
            var color = d3.scale.ordinal()
                .range(["#EDC951","#CC333F","#00A0B0"]);
                
            var radarChartOptions = {
              w: width,
              h: height,
              margin: margin,
              maxValue: 1,
              wrapWidth: 135,
              levels: 5,
              roundStrokes: true,
              color: color,
              axisName: "statement",
              value: "percentCorrect"
            };
​
            //Load the data and Call function to draw the Radar chart
            d3.json("data.json", function(error, data){
                RadarChart(".radarChart", data, radarChartOptions);
            });
            
        </script>
    </body>
</html>
    