Sorting area charts

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    
    console.clear()
    
    const n = 11
    const max = 100
    
    const charts = 3
		const margin = 20    
    const width = 150
    const height = 150
    
    let colour = ["#3CB371", "#F4A460"]
    
    let series = [
      {"id": 0, "avg": 0, "maxCount": 0, "overallMax": false, "totalMaxCount": false, "values": []},
      {"id": 1, "avg": 0, "maxCount": 0, "overallMax": false, "totalMaxCount": false, "values": []}
    ]
    
    let maxValue = 0
        
    for (var i = 0; i < n; i++) {
      let s0 = 45 + Math.random() * 10
      let s1 = 25 + Math.random() * 50
      if (s0 > s1){
        series[0].maxCount = series[0].maxCount + 1
        if (s0 >  maxValue) {
          series[0].overallMax = true
          series[1].overallMax = false
          maxValue = s0
        }
      } else {
        series[1].maxCount = series[1].maxCount + 1
        if (s1 >  maxValue) {
          series[1].overallMax = true
          series[0].overallMax = false
          maxValue = s1
        }
      }
      series[0].values.push(s0)
      series[1].values.push(s1)
    }
        
    series.forEach(function(s){
      s.avg = s.values.reduce((a,b) => a + b, 0) / s.values.length
      s.maxAvg = false
    })
    
    if (series[0].avg > series[1].avg) {
      series[0].maxAvg = true
    } else {
      series[1].maxAvg = true
    }
    
    if (series[0].maxCount > series[1].maxCount) {
      series[0].totalMaxCount = true
    } else {
      series[1].totalMaxCount = true
    }
    
    console.log(series)
    
    let xScale = d3.scaleLinear()
    .range([0, width])
    .domain([0, n-1])

let yScale = d3.scaleLinear()
    .range([height, 0])
    .domain([0, max])

let area = d3.area()
    .x(function (d, i) { return xScale(i) })
    .y0(function (d) { return yScale(0) })
    .y1(function (d) { return yScale(d) })
    .curve(d3.curveCatmullRom.alpha(0.5));

let line = d3.line()
    .x(function (d, i) { return xScale(i) })
    .y(function (d) { return yScale(d) })
    .curve(d3.curveCatmullRom.alpha(0.5));
    
    for (var c = 0; c < charts; c++) {
      
      let svg = d3.select("body").append("svg")
      .attr("width", width + margin + margin)
      .attr("height", height + margin + margin)

let g = svg.append("g")
      .attr("transform", "translate(" + margin + "," + margin + ")")

g.append("g")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(xScale))
      
      g.append("g")
        .attr("transform", "translate(0,0)")
        .call(d3.axisLeft(yScale))
      
      let seriesG = g.selectAll(".series")
      	.data(series)
      	.enter()
      	.append("g")
      	.attr("class", "series")
      
      seriesG.append("text")
      .text(function(d, i){
        if (c == 0) {
          return "Highest Avg"
        } else if (c == 1) {
          return "Overall Max"
        } else if (c == 2) {
          return "Total higher values"
        } 
      })
      .attr("y", 15)
      .attr("x", 15)
      
      let areas = seriesG.append("g")
      	.attr("class", "area")
      	.datum(function(d){ return d.values })     	
      
      areas.append("path")
      	.attr("d", area)
      	.style("fill", function(d,i){ return colour[i] })
      	.style("opacity", 0.8)
      
      areas.append("path")
      	.attr("d", line)
      	.style("stroke", function(d,i){ return colour[i] })
      .style("stroke-width", 3)
      	.style("fill", "none")
      
      seriesG.filter(function(d, i){
        if (c == 0) {
          return d.maxAvg == false
        } else if (c == 1) {
          return d.overallMax == false
        } else if (c == 2) {
          return d.totalMaxCount == false
        } 
      })
      .raise()
      
    }

</script>
</body>

https://d3js.org/d3.v4.min.js