D3 Examples - reusable updating radarChart

reusable updating radarChart

Coding philosophy inspired by Rob Moore

I figured out enter/exit/update for nested objects by studying Lee Mendelowitz's block and reviewing Mike's comments

Features:

Separate layer for hover objects which need to remain on top of chart

Separate layer for tooltip which needs to be uppermost layer

Events are configurable as options such that external functions can be seamlessly integrated

e.g. external tooltips can be configured for mouseover events

Accessors:

by default accessors with no parameters return current values

chart.duration(transition-time) // duration of transitions

chart.options(object) // many options don't have accessors

chart.width(width)

chart.height(height)

chart.margins(object)

chart.data(data) // set data

chart.update() // update chart

chart.maxValue(value) // maxValue of axis values

chart.levels(value) // number of ring levels

chart.opacity(value) // opacity of unselected areas

chart.borderWidth(value) // width of border surrounding areas

chart.rounded(true/false) // select rounded areas

chart.events(object) -- chart.events({'legend': {'mouseover': null}})

chart.color(d3.scale)

chart.colors(object) -- chart.colors({'axis1': 'color1', 'axis2': 'color2'})

operations on data held in chart instance

chart.pop()

chart.push(row) -or- chart.push([row, row])

chart.shift()

chart.unshift(row) -or- chart.unshift([row, row])

chart.slice(begin, end)

operations performed on data prior to display

chart.invert(axis) -or- chart.invert([axis, axis]) // index or "axis label"

chart.ranges({'axis': [min, max]})

chart.filterAxes('axis') -or- chart.filterAxes(['axis', 'axis'])

chart.filterAreas('key') -or- chart.filterAreas(['key1', 'key2'])

convenience

chart.keys() // return a list of data keys

chart.axes() // return labels of all axes

chart.nodes() // return svg object

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <title>D3.js Updating 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;
            }
            
            .legend {
                font-family: 'Raleway', sans-serif;
                fill: #333333;
            }
            
            .tooltip {
                fill: #333333;
            }
        </style>
    
    </head>
    <body>
        <div id="radarChart"></div>
      <script src="radarChart.js"></script>
​
        <script>
            var color = d3.scale.ordinal()
                .range(["#EDC951","#CC333F","#00A0B0"]);
                
            var radarChartOptions = {
           width: 500,
           height: 500,
              color: color
            };
​
         radarChart = RadarChart()
​
         d3.select('#radarChart')
           .call(radarChart);
​
         radarChart.options(radarChartOptions).update();
​
        </script>
​
      <script src="radarDemo.js"></script>
    </body>
</html>
​
    

reusable updating radarChart

reusable updating radarChart

Design based on original by NadiehBremer at Visual Cinnamon

Coding philosophy inspired by Rob Moore

See this block in production with Live Data

Find the Latest Code on GitHub

I figured out enter/exit/update for nested objects by studying Lee Mendelowitz's block and reviewing Mike's comments

Features:

Accessors:

by default accessors with no parameters return current values

operations on data held in chart instance

operations performed on data prior to display

convenience