Area Chart Reusable Pattern

.block

license: mit

README.md

Average temperature in of Nottingham, England 1920-39. I'm assuming it is °F as the data doesn't specify. Data from https://vincentarelbundock.github.io/Rdatasets/datasets.html

Making use of d3.area and playing around with colors.

Also, I didn't anticipate this to look so jagged so I will probably add a brush to it later.

Built with blockbuilder.org

areaChart.js

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;
    }

index.html

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="areaChart.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .label {
      fill: black;
      text-transform: uppercase;
      font-size: 13px;
    }
  </style>
</head>

<body>
  <script>
		var body = d3.select("body")
    	chart = areaChart(),
    	parseTime = d3.timeParse('%m, %Y'),
    	format = d3.timeFormat("%d-%b-%Y"),
    	p2 = d3.timeParse("%d-%b-%Y");
    
    chart.width(+window.innerWidth)
    	.height(+window.innerHeight)
    
    
		d3.csv('nottem.csv', function(d) {
      //get the data in the right format (i can't possibly be doing this right...)
      var time = d.time;
      year = time.slice(0, 4)
      //get the fraction of a year and convert to month as integer
      month = Math.ceil(time.slice(4,7) * 12 + 1);
      d.time = format(parseTime(month + ', ' + year))
      d.nottem = +d.nottem;
      return d;
    }, function(err, data) {
      if(err) throw new Error()

      d3.select('body')
      	.datum(data)
      	.call(chart)
    })
    
    
  </script>
</body>

nottem.csv