D3 Examples - basis interpolation + circles

xxxxxxxxxx
 
<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="https://littlesparkvt.com/flatstrap/assets/css/bootstrap.css"/>
    <link type="text/css" rel="stylesheet" href="style.css"/>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <script src="src.js"></script>
  </head>
  <body>
    <div id="chart-1"></div>
    <div id="chart-2"></div>
    <div id="chart-3"></div>
    <div id="chart-4"></div>
    <div id="chart-5"></div>
    <div id="chart-6"></div>
    <div id="chart-7"></div>
    <div id="chart-8"></div>
    <div id="chart-9"></div>
    <div id="chart-10"></div>
    <div id="chart-11"></div>
    <div id="chart-12"></div>
​
    <script type="text/javascript">
var parseDate = d3.time.format("%b %Y").parse;
var colors = ["#88E48E",
"#EBAACD",
"#E9B859",
"#7CD2EC",
"#F0A487",
"#D4E264",
"#70E2B8",
"#BCB8E8",
"#B9DB95",
"#84DCD3",
"#D0C578",
"#C5CCDB"];
​
function randomDate(start, end) {
    return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()))
}
​
var start = new Date(2008, 0, 0),
    end = new Date(),
    dates = d3.range(200).map(function(d, i) { 
      return {
        x: randomDate(start, end)
      };
    }).sort(function(a, b) { return a.x - b.x; });
​
var j = 0;
​
function random(y) {
  ++j;
  return dates.map(function(d, i) {
    return {
      x: d.x,
      y: Math.random() * y,
      i: 'chart-' + j
    };
  });
}
​
var line = d3.custom.area()
                    .y(d3.scale.linear().domain([0, 120]))
                    .x(d3.time.scale().domain([start, end]))
                    .height(120)
                    .width(900)
                    .interpolation('basis')
                    .yAxis(d3.svg.axis().ticks(4))
                    .xAxis(false)
                    .title('chart-' + i)
                    // .line(false)
                    // .area(false)
                    .darken(0);
d3.select('#chart-1')
    .datum(random(100))
    .call(line
            .colors(colors[0])
            .title('chart-' + 1));
​
for (var i = 2; i <= 12; i++) {
  var line = d3.custom.area()
                      .y(d3.scale.linear().domain([0, 120]))
                      .x(d3.time.scale().domain([start, end]))
                      .height(120)
                      .width(900)
                      .interpolation('basis')
                      .yAxis(d3.svg.axis().ticks(4))
                      .xAxis(false)
                      .title('chart-' + i)
                      // .line(false)
                      // .area(false)
                      .darken(0);
  d3.select('#chart-'+i)
      .datum(random(100))
      .call(line.colors(colors[i])
                .title('chart-' + i));
}  
    </script>
  </body>
</html>
    