EmbraceLife · August 12, 2016 12:24
diff --git a/.block b/.block
 license: gpl-3.0
diff --git a/README.md b/README.md
diff --git a/aapl.csv b/aapl.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 	<head>
 		<meta charset="utf-8">
 		<title>D3.chart Boilerplate Example</title>
    <link rel=stylesheet href="style.css" type="text/css" media=screen>
    <script src='http://d3js.org/d3.v4.min.js' charset="utf-8"></script>
 <!--     <script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js' charset="utf-8"></script> -->

 	</head>
 	<body>
 <!-- 		<script src="script.js"></script> -->
    <script>
      /* global d3, _ */

 // (function() {
  var margin = {top: 30, right: 20, bottom: 100, left: 50},
    margin2  = {top: 210, right: 20, bottom: 20, left: 50},
    width    = 764 - margin.left - margin.right,
    height   = 483 - margin.top - margin.bottom -60, 
    height2  = 283 - margin2.top - margin2.bottom;

  var parseDate = d3.timeParse('%d/%m/%Y'), 
    bisectDate = d3.bisector(function(d) { return d.date; }).left; 
   
 

   
  var x = d3.scaleTime().range([0, width]), 
    x2  = d3.scaleTime().range([0, width]),
    y   = d3.scaleLinear().range([height, 0]),
    y1  = d3.scaleLinear().range([height, 0]),
    y2  = d3.scaleLinear().range([height2, 0]),
    y3  = d3.scaleLinear().range([60, 0]);
 
  var xAxis = d3.axisBottom(x),
    xAxis2  = d3.axisBottom(x2),
    yAxis   = d3.axisLeft(y);

  var priceLine = d3.line()
  // check out line.curve and curve factor or curves 
    .curve(d3.curveMonotoneX)
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.price); });

  var avgLine = d3.line()
    .curve(d3.curveMonotoneX) 
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.average); });

  var area2 = d3.area()
    .curve(d3.curveMonotoneX)
    .x(function(d) { return x2(d.date); })
    .y0(height2)
    .y1(function(d) { return y2(d.price); });

  var svg = d3.select('body').append('svg')
    .attr('class', 'chart')
    .attr('width', width + margin.left + margin.right)
    .attr('height', height + margin.top + margin.bottom + 60);

  svg.append('defs').append('clipPath')
     .attr('id', 'clip')
  .append('rect')
    .attr('width', width)
    .attr('height', height); 
 
  var make_y_axis = function () {
    return d3.axisLeft(y)
      .ticks(3);
  };

  var focus = svg.append('g')
    .attr('class', 'focus')
    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

  var barsGroup = svg.append('g')
    .attr('class', 'volume')
    .attr('clip-path', 'url(#clip)') // added clip-path css
    .attr('transform', 'translate(' + margin.left + ',' + (margin.top + 60 + 20 + 150) + ')');

  var context = svg.append('g')
    .attr('class', 'context')
    .attr('transform', 'translate(' + margin2.left + ',' + (margin2.top + 60 + 150) + ')');

  var legend = svg.append('g')
    .attr('class', 'chart__legend')
    .attr('width', width)
    .attr('height', 30)
    .attr('transform', 'translate(' + margin2.left + ', 10)');

  legend.append('text')
    .attr('class', 'chart__symbol')
    .text('NASDAQ: AAPL')

  var rangeSelection =  legend
    .append('g')
    .attr('class', 'chart__range-selection')
    .attr('transform', 'translate(110, 0)');

   d3.csv('aapl.csv', type, function(err, data) {
 //     var brush = d3.svg.brush() 
 //       .x(x2)
 //       .on('brush', brushed);

    var brush = d3.brushX() 

    .extent([[0, 0], [width, height2]])
    .on("brush", brushed);
 //     console.log(brush.extent()());
    
    var xRange = d3.extent(data.map(function(d) { return d.date; }));
 // console.log(xRange)
    
    x.domain(xRange);
    y.domain(d3.extent(data.map(function(d) { return d.price; })));
    y3.domain(d3.extent(data.map(function(d) { return d.volume; })));
    x2.domain(x.domain());
    y2.domain(y.domain());

    var min = d3.min(data.map(function(d) { return d.price; }));
    var max = d3.max(data.map(function(d) { return d.price; }));

    var range = legend.append('text')
      .text((new Date(xRange[0])).toDateString() + ' - ' + (new Date(xRange[1]).toDateString()))
      .style('text-anchor', 'end')
      .attr('transform', 'translate(' + width + ', 0)');

    focus.append('g')
        .attr('class', 'chart__grid')
        .call(make_y_axis()
 //         .tickSizeInner(-width)
 //         .tickSizeOuter(-width)
         .tickSize(-width)
        .tickFormat(''));
     
 
    var averageChart = focus.append('path')
        .datum(data)
        .attr('class', 'chart__line chart__average--focus line')
        .attr('d', avgLine);

    var priceChart = focus.append('path')
        .datum(data)
        .attr('class', 'chart__line chart__price--focus line')
        .attr('d', priceLine);

    focus.append('g')
        .attr('class', 'x axis') 
        .attr('transform', 'translate(0 ,' + height + ')')
        .call(xAxis);

    focus.append('g')
        .attr('class', 'y axis')
        .attr('transform', 'translate(12, 0)')
        .call(yAxis);

 // volume bars, no x-axis for bars
    var focusGraph = barsGroup.selectAll('rect')
        .data(data)
      .enter().append('rect')
        .attr('class', 'chart__bars')
        .attr('x', function(d, i) { return x(d.date); })
        .attr('y', function(d) { return 155 - y3(d.volume); })
        .attr('width', 1)
        .attr('height', function(d) { return y3(d.volume); });

    var helper = focus.append('g')
      .attr('class', 'chart__helper')
      .style('text-anchor', 'end')
      .attr('transform', 'translate(' + width + ', 0)');

    var helperText = helper.append('text')

    var priceTooltip = focus.append('g')
      .attr('class', 'chart__tooltip--price')
      .append('circle')
      .style('display', "none") 
      .attr('r', 2.5);

    var averageTooltip = focus.append('g')
      .attr('class', 'chart__tooltip--average')
      .append('circle')
      .style('display', "none")
      .attr('r', 2.5);

    var mouseArea = svg.append('g')
      .attr('class', 'chart__mouse')
      .append('rect')
      .attr('class', 'chart__overlay')
      .attr('width', width)
      .attr('height', height)
      .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
      .on('mouseover', function() {
        helper.style('display', null);
        priceTooltip.style('display', null);
        averageTooltip.style('display', null);
      })     
      .on('mouseout', function() {
        helper.style('display', 'none');
        priceTooltip.style('display', "none");
        averageTooltip.style('display', 'none');
      })
      .on('mousemove', mousemove);

    context.append('path')
        .datum(data)
        .attr('class', 'chart__area area')
        .attr('d', area2);

    context.append('g')
        .attr('class', 'x axis chart__axis--context')
        .attr('y', 0)
        .attr('transform', 'translate(0,' + (height2 - 22) + ')')
        .call(xAxis2);

    context.append('g')
        .attr('class', 'x-brush')
        .call(brush)
    .call(brush.move, x2.range())
      .selectAll('rect') 
        .attr('y', -6) 
        .attr('height', height2 + 7);



    
    function mousemove() {
 //       convert mouse (x,y)'s x to date
      var x0 = x.invert(d3.mouse(this)[0]);
 //       console.log(d3.mouse(this)[0])
 //       console.log("x0 is ", x0)
      
      var i = bisectDate(data, x0, 1);
 // var i = bisectDate(data, data[2].date, 1); 
 //       console.log(i);
      
      var d0 = data[i - 1];
      var d1 = data[i];

 // if mouse is at the first date, let d be d0; if mouse is beyond the first date, let d be d1
      var d = x0 - d0.date > d1.date - x0 ? d1 : d0;
      
 //       console.log(d.date);
      helperText.text((new Date(d.date)).toDateString() + ' - Price: ' + d.price + ' Avg: ' + d.average);
      
      priceTooltip.attr('transform', 'translate(' + x(d.date) + ',' + y(d.price) + ')');
      
      averageTooltip.attr('transform', 'translate(' + x(d.date) + ',' + y(d.average) + ')'); 
    }

 	
    
    function brushed() {
      


 //       if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") return;       


 var  s = d3.event.selection || x2.range();  
        
      x.domain(s.map(x2.invert, x2));    

          
      
      
      
 //  console.log(d3.extent(data, function(d){return d.date})); // total width date range
      
 //  console.log(x.domain());// brushed area dates
      
        y.domain([
          
          d3.min(data.map(function(d) { return (d.date >= x.domain()[0] && d.date <= x.domain()[1]) ? d.price : min; })), // min here is minimum price of data
          
          d3.max(data.map(function(d) { return (d.date >= x.domain()[0] && d.date <= x.domain()[1]) ? d.price : max; }))  // max here is maximum price of data
        ]);
     
      
      
        range.text((new Date(x.domain()[0])).toDateString() + ' - ' + (new Date(x.domain()[1])).toDateString())
        
 //   focusGraph has many rects, binding data, but x is updated with new domain
 //  therefore, x(d.date) will only reflect brushed dataset         
        focusGraph.attr('x', function(d, i) { return x(d.date); });

        var days = Math.ceil((x.domain()[1] - x.domain()[0]) / (24 * 3600 * 1000))
        
 //   if zoom in on period of less 40 days, set barwidth to be (40-days)*5/6
 //   if zoom in n period over 40 days, set barwidth to be 5px
        focusGraph.attr('width', (40 > days) ? (40 - days) * 5 / 6 : 5)
 //       }

      priceChart.attr('d', priceLine);
      averageChart.attr('d', avgLine);
      focus.select('.x.axis').call(xAxis);
      focus.select('.y.axis').call(yAxis);
      

      					
  
    }

    
    
    var dateRange = ['1w', '1m', '3m', '6m', '1y', '5y'], 
        rangeName;//added
    
    for (var i = 0, l = dateRange.length; i < l; i ++) {
      
      var v = dateRange[i];
      rangeSelection
        .append('text')
        .attr('class', 'chart__range-selection')
        .text(v)
        .attr('transform', 'translate(' + (18 * i) + ', 0)')
        .on('click', function(d) {
        rangeName = this.textContent
        focusOnRange(rangeName); 
 //             console.log("rangeName is ", rangeName);
 //         console.log("rangeName is string?", typeof rangeName)
        // select the string on range
      });

    }

    function focusOnRange(rangeName) {
      
      var today = new Date(data[data.length - 1].date)
      var ext = new Date(data[data.length - 1].date)

      if (rangeName === '1m')
        ext.setMonth(ext.getMonth() - 1)

      if (rangeName === '1w')
        ext.setDate(ext.getDate() - 7)

      if (rangeName === '3m')
        ext.setMonth(ext.getMonth() - 3)

      if (rangeName === '6m')
        ext.setMonth(ext.getMonth() - 6)

      if (rangeName === '1y') 
        ext.setFullYear(ext.getFullYear() - 1)

      if (rangeName === '5y')
        ext.setFullYear(ext.getFullYear() - 5)

      x.domain([ext, today]);
 //       console.log(x.domain()); 
   
 //       x2.domain(x.domain());
      context.select(".x-brush").call(brush.move, [x2(x.domain()[0]), x2(x.domain()[1])]);
      
    }

   
     
  })// end Data


   
  function type(d) { 
    return {
      date    : parseDate(d.Date),
      price   : +d.Close,
      average : +d.Average,
      volume : +d.Volume, // scale volume smaller 
    }
  }
 // }());
    </script>
 	</body>
 </html>
diff --git a/script.js b/script.js
 /* global d3, _ */

 // (function() {
  var margin = {top: 30, right: 20, bottom: 100, left: 50},
    margin2  = {top: 210, right: 20, bottom: 20, left: 50},
    width    = 764 - margin.left - margin.right,
    height   = 483 - margin.top - margin.bottom -60, 
    height2  = 283 - margin2.top - margin2.bottom;

  var parseDate = d3.timeParse('%d/%m/%Y'), 
    bisectDate = d3.bisector(function(d) { return d.date; }).left; 
   
 

   
  var x = d3.scaleTime().range([0, width]), 
    x2  = d3.scaleTime().range([0, width]),
    y   = d3.scaleLinear().range([height, 0]),
    y1  = d3.scaleLinear().range([height, 0]),
    y2  = d3.scaleLinear().range([height2, 0]),
    y3  = d3.scaleLinear().range([60, 0]);
 
  var xAxis = d3.axisBottom(x),
    xAxis2  = d3.axisBottom(x2),
    yAxis   = d3.axisLeft(y);

  var priceLine = d3.line()
  // check out line.curve and curve factor or curves 
    .curve(d3.curveMonotoneX)
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.price); });

  var avgLine = d3.line()
    .curve(d3.curveMonotoneX) 
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.average); });

  var area2 = d3.area()
    .curve(d3.curveMonotoneX)
    .x(function(d) { return x2(d.date); })
    .y0(height2)
    .y1(function(d) { return y2(d.price); });

  var svg = d3.select('body').append('svg')
    .attr('class', 'chart')
    .attr('width', width + margin.left + margin.right)
    .attr('height', height + margin.top + margin.bottom + 60);

  svg.append('defs').append('clipPath')
     .attr('id', 'clip')
  .append('rect')
    .attr('width', width)
    .attr('height', height); 
 
  var make_y_axis = function () {
    return d3.axisLeft(y)
      .ticks(3);
  };

  var focus = svg.append('g')
    .attr('class', 'focus')
    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

  var barsGroup = svg.append('g')
    .attr('class', 'volume')
    .attr('clip-path', 'url(#clip)') // added clip-path css
    .attr('transform', 'translate(' + margin.left + ',' + (margin.top + 60 + 20 + 150) + ')');

  var context = svg.append('g')
    .attr('class', 'context')
    .attr('transform', 'translate(' + margin2.left + ',' + (margin2.top + 60 + 150) + ')');

  var legend = svg.append('g')
    .attr('class', 'chart__legend')
    .attr('width', width)
    .attr('height', 30)
    .attr('transform', 'translate(' + margin2.left + ', 10)');

  legend.append('text')
    .attr('class', 'chart__symbol')
    .text('NASDAQ: AAPL')

  var rangeSelection =  legend
    .append('g')
    .attr('class', 'chart__range-selection')
    .attr('transform', 'translate(110, 0)');

   d3.csv('aapl.csv', type, function(err, data) {
 //     var brush = d3.svg.brush() 
 //       .x(x2)
 //       .on('brush', brushed);

    var brush = d3.brushX() 

    .extent([[0, 0], [width, height2]])
    .on("brush", brushed);
 //     console.log(brush.extent()());
    
    var xRange = d3.extent(data.map(function(d) { return d.date; }));
 // console.log(xRange)
    
    x.domain(xRange);
    y.domain(d3.extent(data.map(function(d) { return d.price; })));
    y3.domain(d3.extent(data.map(function(d) { return d.volume; })));
    x2.domain(x.domain());
    y2.domain(y.domain());

    var min = d3.min(data.map(function(d) { return d.price; }));
    var max = d3.max(data.map(function(d) { return d.price; }));

    var range = legend.append('text')
      .text((new Date(xRange[0])).toDateString() + ' - ' + (new Date(xRange[1]).toDateString()))
      .style('text-anchor', 'end')
      .attr('transform', 'translate(' + width + ', 0)');

    focus.append('g')
        .attr('class', 'y chart__grid')
        .call(make_y_axis()
 //         .tickSizeInner(-width)
 //         .tickSizeOuter(-width)
         .tickSize(-width)
        .tickFormat(''));
     
 
    var averageChart = focus.append('path')
        .datum(data)
        .attr('class', 'chart__line chart__average--focus line')
        .attr('d', avgLine);

    var priceChart = focus.append('path')
        .datum(data)
        .attr('class', 'chart__line chart__price--focus line')
        .attr('d', priceLine);

    focus.append('g')
        .attr('class', 'x axis') 
        .attr('transform', 'translate(0 ,' + height + ')')
        .call(xAxis);

    focus.append('g')
        .attr('class', 'y axis')
        .attr('transform', 'translate(12, 0)')
        .call(yAxis);

 // volume bars, no x-axis for bars
    var focusGraph = barsGroup.selectAll('rect')
        .data(data)
      .enter().append('rect')
        .attr('class', 'chart__bars')
        .attr('x', function(d, i) { return x(d.date); })
        .attr('y', function(d) { return 155 - y3(d.volume); })
        .attr('width', 1)
        .attr('height', function(d) { return y3(d.volume); });

    var helper = focus.append('g')
      .attr('class', 'chart__helper')
      .style('text-anchor', 'end')
      .attr('transform', 'translate(' + width + ', 0)');

    var helperText = helper.append('text')

    var priceTooltip = focus.append('g')
      .attr('class', 'chart__tooltip--price')
      .append('circle')
      .style('display', "none") 
      .attr('r', 2.5);

    var averageTooltip = focus.append('g')
      .attr('class', 'chart__tooltip--average')
      .append('circle')
      .style('display', "none")
      .attr('r', 2.5);

    var mouseArea = svg.append('g')
      .attr('class', 'chart__mouse')
      .append('rect')
      .attr('class', 'chart__overlay')
      .attr('width', width)
      .attr('height', height)
      .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
      .on('mouseover', function() {
        helper.style('display', null);
        priceTooltip.style('display', null);
        averageTooltip.style('display', null);
      })     
      .on('mouseout', function() {
        helper.style('display', 'none');
        priceTooltip.style('display', "none");
        averageTooltip.style('display', 'none');
      })
      .on('mousemove', mousemove);

    context.append('path')
        .datum(data)
        .attr('class', 'chart__area area')
        .attr('d', area2);

    context.append('g')
        .attr('class', 'x axis chart__axis--context')
        .attr('y', 0)
        .attr('transform', 'translate(0,' + (height2 - 22) + ')')
        .call(xAxis2);

    context.append('g')
        .attr('class', 'x-brush')
        .call(brush)
    .call(brush.move, x2.range())
      .selectAll('rect') 
        .attr('y', -6) 
        .attr('height', height2 + 7);



    
    function mousemove() {
 //       convert mouse (x,y)'s x to date
      var x0 = x.invert(d3.mouse(this)[0]);
 //       console.log(d3.mouse(this)[0])
 //       console.log("x0 is ", x0)
      
      var i = bisectDate(data, x0, 1);
 // var i = bisectDate(data, data[2].date, 1); 
 //       console.log(i);
      
      var d0 = data[i - 1];
      var d1 = data[i];

 // if mouse is at the first date, let d be d0; if mouse is beyond the first date, let d be d1
      var d = x0 - d0.date > d1.date - x0 ? d1 : d0;
      
 //       console.log(d.date);
      helperText.text((new Date(d.date)).toDateString() + ' - Price: ' + d.price + ' Avg: ' + d.average);
      
      priceTooltip.attr('transform', 'translate(' + x(d.date) + ',' + y(d.price) + ')');
      
      averageTooltip.attr('transform', 'translate(' + x(d.date) + ',' + y(d.average) + ')'); 
    }

 	
    
    function brushed() {
      


 //       if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") return;       


 var  s = d3.event.selection || x2.range();  
        
      x.domain(s.map(x2.invert, x2));    

          
      
      
      
 //  console.log(d3.extent(data, function(d){return d.date})); // total width date range
      
 //  console.log(x.domain());// brushed area dates
      
        y.domain([
          
          d3.min(data.map(function(d) { return (d.date >= x.domain()[0] && d.date <= x.domain()[1]) ? d.price : min; })), // min here is minimum price of data
          
          d3.max(data.map(function(d) { return (d.date >= x.domain()[0] && d.date <= x.domain()[1]) ? d.price : max; }))  // max here is maximum price of data
        ]);
     
      
      
        range.text((new Date(x.domain()[0])).toDateString() + ' - ' + (new Date(x.domain()[1])).toDateString())
        
 //   focusGraph has many rects, binding data, but x is updated with new domain
 //  therefore, x(d.date) will only reflect brushed dataset         
        focusGraph.attr('x', function(d, i) { return x(d.date); });

        var days = Math.ceil((x.domain()[1] - x.domain()[0]) / (24 * 3600 * 1000))
        
 //   if zoom in on period of less 40 days, set barwidth to be (40-days)*5/6
 //   if zoom in n period over 40 days, set barwidth to be 5px
        focusGraph.attr('width', (40 > days) ? (40 - days) * 5 / 6 : 5)
 //       }

      priceChart.attr('d', priceLine);
      averageChart.attr('d', avgLine);
      focus.select('.x.axis').call(xAxis);
      focus.select('.y.axis').call(yAxis);
      

      					
  
    }

    
    
    var dateRange = ['1w', '1m', '3m', '6m', '1y', '5y'], 
        rangeName;//added
    
    for (var i = 0, l = dateRange.length; i < l; i ++) {
      
      var v = dateRange[i];
      rangeSelection
        .append('text')
        .attr('class', 'chart__range-selection')
        .text(v)
        .attr('transform', 'translate(' + (18 * i) + ', 0)')
        .on('click', function(d) {
        rangeName = this.textContent
        focusOnRange(rangeName); 
 //             console.log("rangeName is ", rangeName);
 //         console.log("rangeName is string?", typeof rangeName)
        // select the string on range
      });

    }

    function focusOnRange(rangeName) {
      
      var today = new Date(data[data.length - 1].date)
      var ext = new Date(data[data.length - 1].date)

      if (rangeName === '1m')
        ext.setMonth(ext.getMonth() - 1)

      if (rangeName === '1w')
        ext.setDate(ext.getDate() - 7)

      if (rangeName === '3m')
        ext.setMonth(ext.getMonth() - 3)

      if (rangeName === '6m')
        ext.setMonth(ext.getMonth() - 6)

      if (rangeName === '1y') 
        ext.setFullYear(ext.getFullYear() - 1)

      if (rangeName === '5y')
        ext.setFullYear(ext.getFullYear() - 5)

      x.domain([ext, today]);
 //       console.log(x.domain()); 
   
 //       x2.domain(x.domain());
      context.select(".x-brush").call(brush.move, [x2(x.domain()[0]), x2(x.domain()[1])]);
      
    }

   
     
  })// end Data


   
  function type(d) { 
    return {
      date    : parseDate(d.Date),
      price   : +d.Close,
      average : +d.Average,
      volume : +d.Volume, // scale volume smaller 
    }
  }
 // }());
diff --git a/style.css b/style.css
 .chart__grid {
  fill: "green";
  opacity: 0.5;
  
 }
 svg {
  font: 10px sans-serif;
 }

 /* no apparent change */
 .area {
  fill: rgba(255,0,0,0.9);
  clip-path: url("#clip");
 }

 /* control axis-path and axis-line */
 .axis path,
 .axis line {
  fill: none; 
  stroke: #65b86e;
  shape-rendering: crispEdges;
 }

 /* .brush .extent {
  stroke: #e50000;
  fill-opacity: 0.125;
  shape-rendering: crispEdges;
 }
 */
 /*.chart is for svg
 svg's texts control
 */
 .chart text {
  fill: #ae7e94;
 }

 /* path created both price and avg-price 
 1. fill: none to get rid of area
 2. not sure meaning of clip-path: url("#clip");
 */
 .chart__line {
  fill: none;
  stroke-width: 2px;
  clip-path: url("#clip");
 }


 /* price line control */
 .chart__price--focus {
  stroke-width: 1.5px;
  stroke: #28b86b;
 }

 /* avg line control */
 .chart__average--focus {
  stroke-width: 5px;
  stroke: #ff0c00;
  opacity: 0.3;
 }

 /* same to focus panel */
 .chart__overlay {
  opacity: 0;
  pointer-events: all;
 }

 /* control brush context region*/
 .x brush {
  cursor: move;
  fill: none;
  pointer-events: all;
 }

 /* control price circle */
 .chart__tooltip--price {
  fill: none;
  stroke: #b70080;

 }

 /* control avg-price circle */
 .chart__tooltip--average {
  fill: none;
  stroke: #00feff;
 }

 /* Volume bar controls */
 .chart__bars {
  fill: #9adf9c;
  opacity: 1;
 }

 /* rangeName controls 1w, 1m 3m 6m, 5y */
 .chart__range-selection text {
  cursor: pointer;
  text-decoration: underline;
  fill: #b82869;
 }


 /* context x-axis text */
 .chart__axis--context text {
  fill: #ae7e89;
 }


 /* hide x-axis on context */
 .chart__axis--context path,
 .chart__axis--context line {
  display: none;
 }


 /* hide years of context x-axis */
 .chart__axis--context .tick:nth-child(odd) {
  display: none;
 }



 /* control context area (include bottom line) color */
 .chart__area {
  fill: #6cc9f8;
  stroke: #34ba39;
 }


 /* .extent {
  fill: #e2f0ff;
  fill: #3587bc;
  fill-opacity: 0.3;
 }
 */


 /* yes */ 
 .y.axis .tick text {
  text-anchor: start !important;
  fill: #965e8e;
 }

 /*  .y.axis .tick line {
  display: none;
 }  */
 .y.axis path {
  display: none;
 } 
diff --git a/style.styl b/style.styl
 .chart__grid
  stroke #e7eef4
  opacity 0.3

 svg
  font 10px sans-serif

 .area
  fill rgba(255,100,100,0.5)
  clip-path url("#clip")

 .axis path,
 .axis line
  fill none
  stroke #e7eef4
  shape-rendering crispEdges

 .brush .extent
  stroke #fff
  fill-opacity 0.125
  shape-rendering crispEdges


 /*New*/
 .chart
  text
    fill #7F8FAF
  &__line
    fill none
    stroke-width 1.2px
    clip-path url("#clip")
  &__price--focus
    stroke-width 2px
    stroke #2980b9
  &__average--focus
    stroke-width 2px
    stroke red
    opacity 0.3
  &__overlay
    opacity 0
    pointer-events: all
  &__tooltip--price
    fill none
    stroke red
  &__tooltip--average
    fill none
    stroke red
  &__bars
    fill #99C5DF
    opacity 1
  &__range-selection
    text
      cursor pointer
      text-decoration underline
      fill #2980B9


 .chart__axis--context
  text
    fill #7F8FAF
 .chart__axis--context .tick:nth-child(odd)
  display: none

 .chart__axis--context path,
 .chart__axis--context line
  display: none

 .chart__area
  fill: #E6F6FE
  stroke: #3587BC

 .extent
  fill: #E2F0FF
  fill: #3587BC
  fill-opacity: 0.3

 .y.axis
  .tick
    text
      text-anchor start !important
      fill #7F8FAF
    line
      display none
  path
    display none
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>D3.chart Boilerplate Example</title>
	<link rel=stylesheet href="style.css" type="text/css" media=screen>
	<script src='http://d3js.org/d3.v4.min.js' charset="utf-8"></script>
	<!-- <script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js' charset="utf-8"></script> -->

	</head>
	<body>
	<!-- <script src="script.js"></script> -->
	<script>
	/* global d3, _ */

	// (function() {
	var margin = {top: 30, right: 20, bottom: 100, left: 50},
	margin2 = {top: 210, right: 20, bottom: 20, left: 50},
	width = 764 - margin.left - margin.right,
	height = 483 - margin.top - margin.bottom -60,
	height2 = 283 - margin2.top - margin2.bottom;

	var parseDate = d3.timeParse('%d/%m/%Y'),
	bisectDate = d3.bisector(function(d) { return d.date; }).left;




	var x = d3.scaleTime().range([0, width]),
	x2 = d3.scaleTime().range([0, width]),
	y = d3.scaleLinear().range([height, 0]),
	y1 = d3.scaleLinear().range([height, 0]),
	y2 = d3.scaleLinear().range([height2, 0]),
	y3 = d3.scaleLinear().range([60, 0]);

	var xAxis = d3.axisBottom(x),
	xAxis2 = d3.axisBottom(x2),
	yAxis = d3.axisLeft(y);

	var priceLine = d3.line()
	// check out line.curve and curve factor or curves
	.curve(d3.curveMonotoneX)
	.x(function(d) { return x(d.date); })
	.y(function(d) { return y(d.price); });

	var avgLine = d3.line()
	.curve(d3.curveMonotoneX)
	.x(function(d) { return x(d.date); })
	.y(function(d) { return y(d.average); });

	var area2 = d3.area()
	.curve(d3.curveMonotoneX)
	.x(function(d) { return x2(d.date); })
	.y0(height2)
	.y1(function(d) { return y2(d.price); });

	var svg = d3.select('body').append('svg')
	.attr('class', 'chart')
	.attr('width', width + margin.left + margin.right)
	.attr('height', height + margin.top + margin.bottom + 60);

	svg.append('defs').append('clipPath')
	.attr('id', 'clip')
	.append('rect')
	.attr('width', width)
	.attr('height', height);

	var make_y_axis = function () {
	return d3.axisLeft(y)
	.ticks(3);
	};

	var focus = svg.append('g')
	.attr('class', 'focus')
	.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

	var barsGroup = svg.append('g')
	.attr('class', 'volume')
	.attr('clip-path', 'url(#clip)') // added clip-path css
	.attr('transform', 'translate(' + margin.left + ',' + (margin.top + 60 + 20 + 150) + ')');

	var context = svg.append('g')
	.attr('class', 'context')
	.attr('transform', 'translate(' + margin2.left + ',' + (margin2.top + 60 + 150) + ')');

	var legend = svg.append('g')
	.attr('class', 'chart__legend')
	.attr('width', width)
	.attr('height', 30)
	.attr('transform', 'translate(' + margin2.left + ', 10)');

	legend.append('text')
	.attr('class', 'chart__symbol')
	.text('NASDAQ: AAPL')

	var rangeSelection = legend
	.append('g')
	.attr('class', 'chart__range-selection')
	.attr('transform', 'translate(110, 0)');

	d3.csv('aapl.csv', type, function(err, data) {
	// var brush = d3.svg.brush()
	// .x(x2)
	// .on('brush', brushed);

	var brush = d3.brushX()

	.extent([[0, 0], [width, height2]])
	.on("brush", brushed);
	// console.log(brush.extent()());

	var xRange = d3.extent(data.map(function(d) { return d.date; }));
	// console.log(xRange)

	x.domain(xRange);
	y.domain(d3.extent(data.map(function(d) { return d.price; })));
	y3.domain(d3.extent(data.map(function(d) { return d.volume; })));
	x2.domain(x.domain());
	y2.domain(y.domain());

	var min = d3.min(data.map(function(d) { return d.price; }));
	var max = d3.max(data.map(function(d) { return d.price; }));

	var range = legend.append('text')
	.text((new Date(xRange[0])).toDateString() + ' - ' + (new Date(xRange[1]).toDateString()))
	.style('text-anchor', 'end')
	.attr('transform', 'translate(' + width + ', 0)');

	focus.append('g')
	.attr('class', 'chart__grid')
	.call(make_y_axis()
	// .tickSizeInner(-width)
	// .tickSizeOuter(-width)
	.tickSize(-width)
	.tickFormat(''));


	var averageChart = focus.append('path')
	.datum(data)
	.attr('class', 'chart__line chart__average--focus line')
	.attr('d', avgLine);

	var priceChart = focus.append('path')
	.datum(data)
	.attr('class', 'chart__line chart__price--focus line')
	.attr('d', priceLine);

	focus.append('g')
	.attr('class', 'x axis')
	.attr('transform', 'translate(0 ,' + height + ')')
	.call(xAxis);

	focus.append('g')
	.attr('class', 'y axis')
	.attr('transform', 'translate(12, 0)')
	.call(yAxis);

	// volume bars, no x-axis for bars
	var focusGraph = barsGroup.selectAll('rect')
	.data(data)
	.enter().append('rect')
	.attr('class', 'chart__bars')
	.attr('x', function(d, i) { return x(d.date); })
	.attr('y', function(d) { return 155 - y3(d.volume); })
	.attr('width', 1)
	.attr('height', function(d) { return y3(d.volume); });

	var helper = focus.append('g')
	.attr('class', 'chart__helper')
	.style('text-anchor', 'end')
	.attr('transform', 'translate(' + width + ', 0)');

	var helperText = helper.append('text')

	var priceTooltip = focus.append('g')
	.attr('class', 'chart__tooltip--price')
	.append('circle')
	.style('display', "none")
	.attr('r', 2.5);

	var averageTooltip = focus.append('g')
	.attr('class', 'chart__tooltip--average')
	.append('circle')
	.style('display', "none")
	.attr('r', 2.5);

	var mouseArea = svg.append('g')
	.attr('class', 'chart__mouse')
	.append('rect')
	.attr('class', 'chart__overlay')
	.attr('width', width)
	.attr('height', height)
	.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
	.on('mouseover', function() {
	helper.style('display', null);
	priceTooltip.style('display', null);
	averageTooltip.style('display', null);
	})
	.on('mouseout', function() {
	helper.style('display', 'none');
	priceTooltip.style('display', "none");
	averageTooltip.style('display', 'none');
	})
	.on('mousemove', mousemove);

	context.append('path')
	.datum(data)
	.attr('class', 'chart__area area')
	.attr('d', area2);

	context.append('g')
	.attr('class', 'x axis chart__axis--context')
	.attr('y', 0)
	.attr('transform', 'translate(0,' + (height2 - 22) + ')')
	.call(xAxis2);

	context.append('g')
	.attr('class', 'x-brush')
	.call(brush)
	.call(brush.move, x2.range())
	.selectAll('rect')
	.attr('y', -6)
	.attr('height', height2 + 7);




	function mousemove() {
	// convert mouse (x,y)'s x to date
	var x0 = x.invert(d3.mouse(this)[0]);
	// console.log(d3.mouse(this)[0])
	// console.log("x0 is ", x0)

	var i = bisectDate(data, x0, 1);
	// var i = bisectDate(data, data[2].date, 1);
	// console.log(i);

	var d0 = data[i - 1];
	var d1 = data[i];

	// if mouse is at the first date, let d be d0; if mouse is beyond the first date, let d be d1
	var d = x0 - d0.date > d1.date - x0 ? d1 : d0;

	// console.log(d.date);
	helperText.text((new Date(d.date)).toDateString() + ' - Price: ' + d.price + ' Avg: ' + d.average);

	priceTooltip.attr('transform', 'translate(' + x(d.date) + ',' + y(d.price) + ')');

	averageTooltip.attr('transform', 'translate(' + x(d.date) + ',' + y(d.average) + ')');
	}



	function brushed() {



	// if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") return;


	var s = d3.event.selection \|\| x2.range();

	x.domain(s.map(x2.invert, x2));





	// console.log(d3.extent(data, function(d){return d.date})); // total width date range

	// console.log(x.domain());// brushed area dates

	y.domain([

	d3.min(data.map(function(d) { return (d.date >= x.domain()[0] && d.date <= x.domain()[1]) ? d.price : min; })), // min here is minimum price of data

	d3.max(data.map(function(d) { return (d.date >= x.domain()[0] && d.date <= x.domain()[1]) ? d.price : max; })) // max here is maximum price of data
	]);



	range.text((new Date(x.domain()[0])).toDateString() + ' - ' + (new Date(x.domain()[1])).toDateString())

	// focusGraph has many rects, binding data, but x is updated with new domain
	// therefore, x(d.date) will only reflect brushed dataset
	focusGraph.attr('x', function(d, i) { return x(d.date); });

	var days = Math.ceil((x.domain()[1] - x.domain()[0]) / (24 * 3600 * 1000))

	// if zoom in on period of less 40 days, set barwidth to be (40-days)*5/6
	// if zoom in n period over 40 days, set barwidth to be 5px
	focusGraph.attr('width', (40 > days) ? (40 - days) * 5 / 6 : 5)
	// }

	priceChart.attr('d', priceLine);
	averageChart.attr('d', avgLine);
	focus.select('.x.axis').call(xAxis);
	focus.select('.y.axis').call(yAxis);




	}



	var dateRange = ['1w', '1m', '3m', '6m', '1y', '5y'],
	rangeName;//added

	for (var i = 0, l = dateRange.length; i < l; i ++) {

	var v = dateRange[i];
	rangeSelection
	.append('text')
	.attr('class', 'chart__range-selection')
	.text(v)
	.attr('transform', 'translate(' + (18 * i) + ', 0)')
	.on('click', function(d) {
	rangeName = this.textContent
	focusOnRange(rangeName);
	// console.log("rangeName is ", rangeName);
	// console.log("rangeName is string?", typeof rangeName)
	// select the string on range
	});

	}

	function focusOnRange(rangeName) {

	var today = new Date(data[data.length - 1].date)
	var ext = new Date(data[data.length - 1].date)

	if (rangeName === '1m')
	ext.setMonth(ext.getMonth() - 1)

	if (rangeName === '1w')
	ext.setDate(ext.getDate() - 7)

	if (rangeName === '3m')
	ext.setMonth(ext.getMonth() - 3)

	if (rangeName === '6m')
	ext.setMonth(ext.getMonth() - 6)

	if (rangeName === '1y')
	ext.setFullYear(ext.getFullYear() - 1)

	if (rangeName === '5y')
	ext.setFullYear(ext.getFullYear() - 5)

	x.domain([ext, today]);
	// console.log(x.domain());

	// x2.domain(x.domain());
	context.select(".x-brush").call(brush.move, [x2(x.domain()[0]), x2(x.domain()[1])]);

	}



	})// end Data



	function type(d) {
	return {
	date : parseDate(d.Date),
	price : +d.Close,
	average : +d.Average,
	volume : +d.Volume, // scale volume smaller
	}
	}
	// }());
	</script>
	</body>
	</html>
	.chart__grid {
	fill: "green";
	opacity: 0.5;

	}
	svg {
	font: 10px sans-serif;
	}

	/* no apparent change */
	.area {
	fill: rgba(255,0,0,0.9);
	clip-path: url("#clip");
	}

	/* control axis-path and axis-line */
	.axis path,
	.axis line {
	fill: none;
	stroke: #65b86e;
	shape-rendering: crispEdges;
	}

	/* .brush .extent {
	stroke: #e50000;
	fill-opacity: 0.125;
	shape-rendering: crispEdges;
	}
	*/
	/*.chart is for svg
	svg's texts control
	*/
	.chart text {
	fill: #ae7e94;
	}

	/* path created both price and avg-price
	1. fill: none to get rid of area
	2. not sure meaning of clip-path: url("#clip");
	*/
	.chart__line {
	fill: none;
	stroke-width: 2px;
	clip-path: url("#clip");
	}


	/* price line control */
	.chart__price--focus {
	stroke-width: 1.5px;
	stroke: #28b86b;
	}

	/* avg line control */
	.chart__average--focus {
	stroke-width: 5px;
	stroke: #ff0c00;
	opacity: 0.3;
	}

	/* same to focus panel */
	.chart__overlay {
	opacity: 0;
	pointer-events: all;
	}

	/* control brush context region*/
	.x brush {
	cursor: move;
	fill: none;
	pointer-events: all;
	}

	/* control price circle */
	.chart__tooltip--price {
	fill: none;
	stroke: #b70080;

	}

	/* control avg-price circle */
	.chart__tooltip--average {
	fill: none;
	stroke: #00feff;
	}

	/* Volume bar controls */
	.chart__bars {
	fill: #9adf9c;
	opacity: 1;
	}

	/* rangeName controls 1w, 1m 3m 6m, 5y */
	.chart__range-selection text {
	cursor: pointer;
	text-decoration: underline;
	fill: #b82869;
	}


	/* context x-axis text */
	.chart__axis--context text {
	fill: #ae7e89;
	}


	/* hide x-axis on context */
	.chart__axis--context path,
	.chart__axis--context line {
	display: none;
	}


	/* hide years of context x-axis */
	.chart__axis--context .tick:nth-child(odd) {
	display: none;
	}



	/* control context area (include bottom line) color */
	.chart__area {
	fill: #6cc9f8;
	stroke: #34ba39;
	}


	/* .extent {
	fill: #e2f0ff;
	fill: #3587bc;
	fill-opacity: 0.3;
	}
	*/


	/* yes */
	.y.axis .tick text {
	text-anchor: start !important;
	fill: #965e8e;
	}

	/* .y.axis .tick line {
	display: none;
	} */
	.y.axis path {
	display: none;
	}
	.chart__grid
	stroke #e7eef4
	opacity 0.3

	svg
	font 10px sans-serif

	.area
	fill rgba(255,100,100,0.5)
	clip-path url("#clip")

	.axis path,
	.axis line
	fill none
	stroke #e7eef4
	shape-rendering crispEdges

	.brush .extent
	stroke #fff
	fill-opacity 0.125
	shape-rendering crispEdges


	/New/
	.chart
	text
	fill #7F8FAF
	&__line
	fill none
	stroke-width 1.2px
	clip-path url("#clip")
	&__price--focus
	stroke-width 2px
	stroke #2980b9
	&__average--focus
	stroke-width 2px
	stroke red
	opacity 0.3
	&__overlay
	opacity 0
	pointer-events: all
	&__tooltip--price
	fill none
	stroke red
	&__tooltip--average
	fill none
	stroke red
	&__bars
	fill #99C5DF
	opacity 1
	&__range-selection
	text
	cursor pointer
	text-decoration underline
	fill #2980B9


	.chart__axis--context
	text
	fill #7F8FAF
	.chart__axis--context .tick:nth-child(odd)
	display: none

	.chart__axis--context path,
	.chart__axis--context line
	display: none

	.chart__area
	fill: #E6F6FE
	stroke: #3587BC

	.extent
	fill: #E2F0FF
	fill: #3587BC
	fill-opacity: 0.3

	.y.axis
	.tick
	text
	text-anchor start !important
	fill #7F8FAF
	line
	display none
	path
	display none