D3 Examples - Radar Chart Redesign

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(774, window.innerWidth - 10) - margin.left - margin.right,
                height = Math.min(width, window.innerHeight - margin.top - margin.bottom - 12);
                    
            ////////////////////////////////////////////////////////////// 
            ////////////////////////// Data ////////////////////////////// 
            ////////////////////////////////////////////////////////////// 
​
            var data = [
                      [//1950
                        {axis:"1950",value:1},
            {axis:"1960",value:0.769161},
                        {axis:"1970",value:0.687258},
                        {axis:"1980",value:0.667324},
                        {axis:"1990",value:0.662835},
                        {axis:"2000",value:0.664755},
                        {axis:"2010",value:0.590636}
                      ],[//1960
                        {axis:"1950",value:0.769161},
                        {axis:"1960",value:1},
                        {axis:"1970",value:0.836085},
                        {axis:"1980",value:0.827238},
                        {axis:"1990",value:0.814353},
                        {axis:"2000",value:0.812220},
                        {axis:"2010",value:0.741143}
                      ],[//1970
                        {axis:"1950",value:0.687258},
                        {axis:"1960",value:0.836085},
                        {axis:"1970",value:1},
                        {axis:"1980",value:0.884648},
                        {axis:"1990",value:0.87992},
                        {axis:"2000",value:0.878049},
                        {axis:"2010",value:0.800105}
                      ],[//1980
                        {axis:"1950",value:0.667324},
                        {axis:"1960",value:0.827238},
                        {axis:"1970",value:0.884648},
                        {axis:"1980",value:1},
                        {axis:"1990",value:0.901517},
                        {axis:"2000",value:0.886284},
                        {axis:"2010",value:0.814045}
             ],[//1990
                        {axis:"1950",value:0.662835},
                        {axis:"1960",value:0.814353},
                        {axis:"1970",value:0.87992},
                        {axis:"1980",value:0.901517},
                        {axis:"1990",value:1},
                        {axis:"2000",value:0.907011},
                        {axis:"2010",value:0.838506}
             ],[//2000
                        {axis:"1950",value:0.664755},
                        {axis:"1960",value:0.664755},
                        {axis:"1970",value:0.878049},
                        {axis:"1980",value:0.886284},
                        {axis:"1990",value:0.907011},
                        {axis:"2000",value:1},
                        {axis:"2010",value:0.855032}
             ],[//2010
                        {axis:"1950",value:0.590636},
                        {axis:"1960",value:0.741143},
                        {axis:"1970",value:0.800105},
                        {axis:"1980",value:0.814045},
                        {axis:"1990",value:0.838506},
                        {axis:"2000",value:0.855032},
                        {axis:"2010",value:1}]
                    ];
            ////////////////////////////////////////////////////////////// 
            //////////////////// Draw the Chart ////////////////////////// 
            ////////////////////////////////////////////////////////////// 
​
            var color = d3.scale.ordinal()
                .range(["#f3dd94","#da6c75","#00e5f9", "#ecb3ff", "#ffbf80", "#7fff81","#f9f500"]);
                
            var radarChartOptions = {
              w: width,
              h: height,
              margin: margin,
              maxValue: 1,
        minValue: 0.6,
              levels: 5,
              roundStrokes: true,
        opacityCircles: 0.01,
        opacityArea: 0.01,
              color: color
            };
            //Call function to draw the Radar chart
            RadarChart(".radarChart", data, radarChartOptions);
        </script>
    </body>
</html>
    