function areaChart() {
      var width = 960,
          height = 500,
          margin = 50,
          y = d3.scaleLinear(),
      		x = d3.scaleTime(),
          yAxis = d3.axisLeft().ticks(10),
          xAxis = d3.axisBottom().ticks(d3.timeYear.every(1)),
          area = d3.area(d3.curveCardinal);
  

  
      function chart(selection) {
      	  selection.each(function(data, i) {
            var svg = d3.select(this).append('svg')
            						.attr('width', width)
            						.attr('height', height);
            console.log(svg.enter())
            x.domain(d3.extent(data, function(d){return p2(d.time)}))
            	.rangeRound([margin, width - margin])
            
            console.log(x.domain())
                       
            y.domain(d3.extent(data, function(d) {return d.nottem}))
              .range([height - margin, margin])
          
            area.x(function(d){ return x(p2(d.time));})
       	     		.y0(height - margin)
              	.y1(function(d) {
            				return y(d.nottem);
            })
            
            var startArea = d3.area()
            		.x(function(d){ return x(p2(d.time));})
       	     		.y0(height - margin)
              	.y1(height - margin - 1)
            //get an array of color stops
            var grad = Array(4).fill(5)
            	.map(function(d, i) {return (i+1) * 20})

            //setup linear gradient prettiness
            //i really should have put this in the html...
            svg.append('defs')
            	.append('linearGradient')
            	.attr('id', 'gradient')
            	.attr('y1', 1)
            	.attr('y2', 0)
            	.attr('x1', 0)
            	.attr('x2', 0)
            	.selectAll('.stop')
            	.data(grad)
            	.enter()
            	.append('stop')
            	.attr('offset', function(d) {return d + '%'})
            	.attr('stop-color', function(d,i) {
              	return d3.interpolateCool(i/3)
            	})
            	.attr('stop-opacity', .8)
            
            var t = d3.transition()
            	.duration(200)
    					.ease(d3.easeLinear)
            
            
            //appending everything
            var areaPath = svg.append('g')
            		.append('path')
            		.datum(data)
            		.style('fill', 'url(#gradient)')
            		.attr('d', startArea)

            svg.append('g')
            	.call(xAxis.scale(x))
            		.attr('transform', `translate(0, ${height - margin})`)
            		.append('text')
            		.attr('class', 'label')
            		.attr('transform', `translate(${width - margin}, 30)`)
            		.text('YEAR')
         
            svg.append('g')
            	.call(yAxis.scale(y))
            	.attr('transform', `translate(${margin}, 0)`)
            		.append('text')
            		.attr('class', 'label')
              	.attr('dy', -30)
              	.attr('dx', -30)
            		.style('transform', 'rotate(-90deg)')
            		.html('Average Temperature (°F)')
            
            //load animation
						window.setTimeout(function() {
              areaPath.transition(t)
            		.attr('d', area)	
            }.bind(this), 1000) 
          })
      }
      
      /////////////////////////////////////////////////////////
      // get/setters
      chart.width = function(_) {
        if(!arguments.length) return width;
        width = _;
        return chart;
      }
      chart.height = function(_) {
        if(!arguments.length) return height;
        height = _;
        return chart;
      }
      chart.margin = function(_) {
        if(!arguments.length) return margin;
        margin = _;
        return chart;
      }
      return chart;
    }