d3.csv('yahoo.csv')
  .row(function(d) {
    d.date = new Date(d.Timestamp * 1000);
    return d;
  })
  .get(function(error, rows) { renderChart(rows); });
 
var yAxisWidth = 40,
    xAxisHeight = 20;
 
var dateFormat = d3.time.format('%a %H:%M%p');
 
function renderChart(data) {
  
  var movingAverage = fc.indicator.algorithm.exponentialMovingAverage()
        .value(function(d) { return d.close; })
        .windowSize(20);

  movingAverage(data);
  
  var chart = fc.chart.linearTimeSeries()
        .xDomain(fc.util.extent(data, 'date'))
        .yDomain(fc.util.extent(data, ['open', 'close']))
        .xTickFormat(dateFormat)
        .yTicks(5)
        .yNice(5)
        .yOrient('right')
        .yTickSize(yAxisWidth, 0)
        .xTickSize(xAxisHeight)
        .xTicks(3);
 
  var area = fc.series.area()
        .y0Value(chart.yDomain()[0])
        .yValue(function(d) { return d.open; });
 
  var line = fc.series.line()
        .yValue(function(d) { return d.open; });
  
  var emaLine = fc.series.line()
        .yValue(function(d) { return d.exponentialMovingAverage; })
        .decorate(function(g) {
          g.classed('ema', true);
        });
 
  var gridlines = fc.annotation.gridline()
        .yTicks(5)
        .xTicks(0);
 
  var multi = fc.series.multi()
        .series([gridlines, area, emaLine, line]);
        
  chart.plotArea(multi);
 
  d3.select('#time-series')
        .datum(data)
        .call(chart);
        
  d3.selectAll('.y-axis text')
      .style('text-anchor', 'end')
      .attr('transform', 'translate(-3, -8)');
 
  d3.selectAll('.x-axis text')
      .attr('dy', undefined)
      .style({'text-anchor': 'start', 'dominant-baseline': 'central'})
      .attr('transform', 'translate(3, -' + (xAxisHeight / 2 + 3) + ' )');
}