D3 Examples - Convolution: smoothing noisy data

xxxxxxxxxx
 
<html>
<head>
  <title>1D convolution filter</title>
    <style type="text/css">
    body{
        font-family: sans-serif;
    }
    svg{
        //border: 1px solid #eee;
    }
    .chart-line{
        fill:none;
        stroke-width:1px;
    }
​
    .raw{
        stroke:#aaa;
    }
​
    .smoothed{
        stroke:#93f;
    }
​
    .axis path {
      display: none;
    }
​
    .axis line {
      shape-rendering: crispEdges;
      stroke: #777;
      stroke-dasharray: 1,5;
    }
​
    .axis .minor line {
      stroke: #eee;
      stroke-dasharray: 2,2;
    }
    </style>
</head>
<body>
<h1>global temperature anomaly data annual</h1>
<div id='chart'></div>
<div class='key'>
</div>
</body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript">
var margin = {
    left:30,
    right:30,
    top:30,
    bottom:30
}
​
d3.csv('global.csv',function(temperatureData){
    var width = 700;
    var height = 500;
    var kernel = normaliseKernel( [0.1, 0.2, 0.3, 0.2, 0.1] );// gaussian smoothing
    var raw = temperatureData.map(function(d){
        return parseFloat(d.annual_mean);
    });
​
    var smoothed = convolute(temperatureData, kernel, function(datum){
        return parseFloat(datum.annual_mean);
    });
​
    var y = d3.scale.linear()
        .domain( d3.extent( raw ) )
        .range( [height-margin.top, margin.bottom] );
​
    var x = d3.scale.linear()
        .domain( [0, raw.length] )
        .range( [margin.left, width-margin.right] );
​
    var line = d3.svg.line()
        .x(function(d,i) { return x(i); })
        .y(function(d,i) { return y(d); });
​
    var svg = d3.select('#chart').append('svg').attr('height', height).attr('width', width).append('g')
            
​
    svg.append('path')
        .datum(raw)
        .attr("class", "chart-line raw")
        .attr("d", line);
​
    svg.append('path')
        .datum(smoothed)
        .attr("class", "chart-line smoothed")
        .attr("d", line);
​
    var ticks = d3.extent( raw );
    ticks.push(0)
    ticks = ticks.sort();
​
    var yAxis = d3.svg.axis()
        .scale(y)
        .tickSize(width - (margin.left+margin.right))
        .tickValues( ticks )
        .orient("right");
​
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate("+margin.left+",0)")
        .call(yAxis);
​
})
​
​
function convolute(data, kernel, accessor){
    var kernel_center = Math.floor(kernel.length/2);
    var left_size = kernel_center;
    var right_size = kernel.length - (kernel_center-1);
    if(accessor == undefined){
        accessor = function(datum){
            return datum;
        }
    }
​
    function constrain(i,range){
        if(i<range[0]){
            i=0;
        }
        if(i>range[1]){
            i=range[1];
        }
        return i;
    }
​
    var convoluted_data = data.map(function(d,i){
        var s = 0;
        for(var k=0; k < kernel.length; k++){
            var index = constrain( ( i + (k-kernel_center) ), [0, data.length-1] ); 
            s += kernel[k] * accessor(data[index]);
        }
        return s;
    });
​
​
    return convoluted_data;
}
​
​
​
function normaliseKernel(a){
    function arraySum(a){
        var s = 0;
        for (var i =0;i<a.length;i++){
            s += a[i];
        }
        return s;
    }
​
    var sum_a = arraySum(a);
    var scale_factor = sum_a / 1;
    a = a.map(function(d){
        return d / scale_factor;
    })
    return a;
}
​
​
​
</script>
</html>
    