D3 Examples - radar chart with an interactive legend

radar chart with an interactive legend

this version adds a legend!

to enable the legend symbol to interact with the areas, when you call RadarChart(), specify the field radarChart.js should use to assign an areaName to each area.

you can also specify the legend position as a parameter, where x and y are pixel coordinates offset from an origin at the top left of the parent svg.

var legendPosition = {x: 25, y: 25} var radarChartOptions { areaName: "device", legendPosition: legendPosition // ... };

to get the interaction to work, we add a data-driven class to each area that we can later select in the cellover() function that is called when you mouse over the legend symbol.

blobWrapper .append("path") .attr("class", function(d) { return "radarArea" + " " + d[0][areaName].replace(/\s+/g, '') //Remove spaces from the areaName string to make one valid class name }) // ...

the legend is created with the delightful d3-legend component from susielu

a further iteration on the bl.ock Radar Chart Redesign created by nbremer, which is described nicely in this blog post

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>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/1.3.0/d3-legend.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;
            }
            
            .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},
                legendPosition = {x: 25, y: 25},
                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,
              legendPosition: legendPosition,
              maxValue: 0.5,
              wrapWidth: 60,
              levels: 5,
              roundStrokes: true,
              color: color,
              axisName: "reason",
              areaName: "device",
              value: "value"
            };
​
            //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>
    