basis interpolation + circles

This example is showcasing an issue with syncing other representations of data (to see hover over a chart to see a circle) on a non-linear (e.g: basis) line or area chart.

<!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>

function randomDate(start, end) {
    return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()))
}

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>

Modified http://d3js.org/d3.v3.min.js to a secure url

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