D3 Examples - Reusable lines

xxxxxxxxxx
 
<!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>
​
  <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
  <script src="eesur.js" charset="utf-8"></script> 
</head>
<body>
​
<section id="base"></section>
​
<section id="base2"></section>
​
<script>
​
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>
​
    