Convolution: smoothing noisy data

1d convolution

<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>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js