Reusable lines

Extended from this excellent tutoriall to use d3 reusable pattern so you can have api to call the charts with the same code.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>simple line made reusable</title> 
  
  <style>  
    section {
      width: 400px;
      max-width: 40%;
      display: inline-block;
      padding: 4%;
    }
  </style>

var dataset1 = [
  { value: 8 },
  { value: 21 },
  { value: 89 }
];

var dataset2 = [
  { value: 21 },
  { value: 34 },
  { value: 55 },
  { value: 89 },
  { value: 144 }
];

var line1 = d3.eesur.line(); // instantiate the chart

line1 // configure any api settings
  .x1(0)
  .x2(200)
  .w(400)
  .colour('red');

d3.select('#base') // select the DOM and use D3.js selection.call
  .datum(dataset1)
  .call(line1);

// add another set of lines
var line2 = d3.eesur.line() 
  .x2(400)
  .w(400)
  .colour('green');

d3.select('#base2') // make another chart
  .datum(dataset2)
  .call(line2);

</script>

</body>
</html>

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

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