Time Series (fixed gaps)

by iros

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<div id="linechart">
</div>

CSS

#linechart svg {
  border: 1px solid #ddd;
  padding: 10px;
}
path.line {
  fill: none;
  stroke: #444;
  stroke-width: 1px;
}

path.area {
  fill: #e7e7e7;
}

line.yearline {
  stroke: #aaa;
  stroke-width: 0.5px;
  stroke-dasharray: 2, 2;
}

JavaScript

// create some dummy data at random intervals
var data = [
  {
    time: "2011/11/01",
    observation: 12
  },
  {
    time: "2011/12/01",
    observation: 100
  },
  {
    time: "2012/01/01",
    observation: 320
  },
  {
    time: "2012/02/01",
    observation: 0
  },
  {
    time: "2012/03/01",
    observation: 0
  },
  {
    time: "2012/04/01",
    observation: 0
  },
  {
    time: "2012/05/01",
    observation: 0
  },    
  {
    time: "2012/06/01",
    observation: 7
  }
];

var y_domain = d3.extent(data, function(d) {
    return d.observation;
});
  
var x_domain = d3.extent(data, function(d) {
   return new Date(d.time); 
});
  
// set up some chart dimensions
var width = 530, 
    height = 210;

// ---- make d3 chart ----
// make x and y scales
var x_scale = d3.time.scale()
  .domain([x_domain[0], x_domain[1]])
  .range([0, width]);

var y_scale = d3.scale.linear()
  .domain([y_domain[0], y_domain[1]])
  .range([height, 0]);

// make area and line functions
var area = d3.svg.area()
  .interpolate("monotone")
  .x(function(d) { 
    return x_scale(new Date(d.time)); 
  })
  .y0(height)
  .y1(function(d) { 
    return y_scale(d.observation); 
  });

var line = d3.svg.line()
  .interpolate("monotone")
  .x(function(d) { 
    return x_scale(new Date(d.time)); 
  })
  .y(function(d) { 
    return y_scale(d.observation); 
  });


// create actual chart svg container
var chart = d3.select("#linechart")
  .append("svg")
  .attr("height", height + "px")
  .attr("width", width + "px");

// set the data
chart.data(data);

// create the area under the chart
chart.append("path")
  .attr("d", area(data))
  .attr("class", "area");

// create the line itself
chart.append("path")
  .attr("d", line(data))
  .attr("class", "line");

// add lines to indicate where the years we have are located
_.each(data, function(datum) {
  chart.append("line")
    .attr("class", "yearline")
    .attr("x1", x_scale(new Date(datum.time)))
    .attr("x2", x_scale(new Date(datum.time)))
   ...