ndvi line chart

by abenrob

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<div ng-app="MyApp">
    <div class="chartbox" ng-controller="MyController">
         <div 
            vcichart 
            chart-width="cWidth"
            chart-height="cHeight"
            chart-data="ndvi"
        ></div>
    </div>
</div>

CSS

.chartbox {
    width: 300px;
    height: 200px;
}
svg text {
    fill: #777;
    font-size: 10px;
    font-family: sans-serif;
    font-weight: 200;
}
.axis path,
.axis line {
  fill: none;
  stroke: #777;
  shape-rendering: crispEdges;
}
.x.axis path {
  //display: none;
}
.line {
    fill: none;
    stroke-width: 1.5;
}
.sourceline {
    stroke: #000;
}
.averageline {
    stroke: steelblue;
}

JavaScript

var myApp = angular.module('MyApp', []);
myApp.directive('vcichart', function () {
        
		var link = function (scope, elem, attrs) {
            
            var shell = d3.select(elem[0].parentNode)[0][0];
            shHeight = shell.clientHeight;
            shWidth = shell.clientWidth;
            var margin = {top: 20, right: 20, bottom: 30, left: 40},
                width = (scope.chartWidth || shWidth) - margin.left - margin.right,
                height = (scope.chartHeight || shHeight) - margin.top - margin.bottom;
            
            var x = d3.scale.ordinal()
                .rangeRoundPoints([0, width]);
            
            var y = d3.scale.linear()
                .range([height, 0]);
            
            var xAxis = d3.svg.axis()
                .scale(x)
                .orient("bottom");
            
            var yAxis = d3.svg.axis()
                .scale(y)
                .orient("left");
            
            var srcline = d3.svg.line()
                .interpolate("monotone")
                .defined(function(d) { return d.src_stat != null; })
                .x(function(d) { return x(d.decadal) })
                .y(function(d) { return y(d.src_stat) });
            var avgline = d3.svg.line()
                .interpolate("monotone")
                .x(function(d) { return x(d.decadal);})
                .y(function(d) {return y(d.avg_stat);});
            
            var svg = d3.select(elem[0]).append("svg")
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)
                .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

            
            function makeChart(rawdata){
                data = rawdata.sort(function(a, b){
                    return a.decadal < b.decadal ? -1 : 1;
                });
                
                // clear out old if exists
              ...