Trying to use D3.js to create a simple line graph with a moving average using previous and next data points. View on Blocks at http://bl.ocks.org/jcnesci/7439277

<!DOCTYPE html>
<html>
  <meta charset="utf-8">
  <head>
    <style>
      body {
        font: 10px sans-serif;
      }

.graph_container {
        position: relative;
        margin: 0 auto;
        width: 960px;
      }
      
      path.average {
          stroke: darkviolet;
          stroke-width: 1px;
          fill: none;
      }

.axis path,
      .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
      }

.area {
        fill: black;
      }

#graph_container_1 .area {
        fill: royalblue;
        opacity: 0.2;
      }

#graph_container_2 .area {
        fill: crimson;
        opacity: 0.2;
      }

#graph_container_3 .area {
        fill: gainsboro;
      }
    </style>
  </head>
  <body>

<div id="graph_container_1" class="graph_container"><p>Traffic Graph w/ Moving Average</p></div>
   
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <script type="text/javascript" charset="utf-8">
    
    // Vars for graph size.
    var margin = {top: 20, right: 20, bottom: 30, left: 50},
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;
    // Our Date parsing format.
    var parseDate = d3.time.format("%m,%e,%H,%M").parse;
    // Setup X and Y scales.
    var x = d3.time.scale()
        .range([0, width]);
    var y = d3.scale.linear()
        .range([height, 0]);
    // Setup X and Y axis, using the scales.
    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom");
    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left");
    // Setup SVG area fill displayed under a line of data.
    var area = d3.svg.area()
        .x(function(d) { return x(d.key); })
        .y0(height)
        .y1(function(d) { return y(d.value); });
    
    // Create SVG element for the Traffic graph.
    var graph1 = d3.select("#graph_container_1").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 + ")");

d3.json("date.json", function(error, data) {
      
      // Setup each row of data by formatting the Date for X, and by converting to a number for Y.
      data = data.rows;
      data.forEach(function(d) {
        d.key = parseDate(String(d.key));
        d.value = +d.value;
      });

x.domain(d3.extent(data, function(d) { return d.key; }));
      y.domain([0, d3.max(data, function(d) { return d.value; })]);

// Setup the moving average calculation.
      // Currently is a hacky way of doing it by manually storing and using the previous 3 values for averaging.
      // Looking for another way to address previous values so we can make the averaging window much larger (like 15 previous values).
      var prevPrevVal = 0;
      var prevVal = 0;
      var curVal = 0
      var movingAverageLine = d3.svg.line()
      .x(function(d,i) { return x(d.key); })
      .y(function(d,i) {
          if (i == 0) {
              prevPrevVal  = y(d.value);
              prevVal = y(d.value);
              curVal =  y(d.value);
          } else if (i == 1) {
              prevPrevVal = prevVal;
              prevVal = curVal;
              curVal = (prevVal + y(d.value)) / 2.0;
          } else {
              prevPrevVal = prevVal;
              prevVal = curVal;
              curVal = (prevPrevVal + prevVal + y(d.value)) / 3.0;
          }
          return curVal;
      })
      .interpolate("basis");
      
      // Draw the moving average version of the data, as a line.
      graph1.append("path")
        .attr("class", "average")
        .attr("d", movingAverageLine(data));

// Draw the raw data as an area.
      graph1.append("path")
          .datum(data)
          .attr("class", "area")
          .attr("d", area);

// Draw the X-axis of the graph.
      graph1.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + height + ")")
          .call(xAxis);

// Draw the Y-axis of the graph.
      graph1.append("g")
          .attr("class", "y axis")
          .call(yAxis)
        .append("text")
          .attr("transform", "rotate(-90)")
          .attr("y", 6)
          .attr("dy", ".71em")
          .style("text-anchor", "end")
          .text("Value");
    });
    
  </script>
  
  </body>
</html>

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

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