JSFiddle - React, Tailwind, and code Playground

by Douglas Duhaime

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.4/p5.min.js"></script>

JavaScript

function setup() {
  var margin = 30;
  width = 700;
  height = 300;
 
  var c = pcreateCanvas(width, height);
  var canvas = c.canvas;

  push();
  translate(margin,margin);
  
  var data = d3.range(8).map(function() { return 1+Math.random() * 10; });
  
  var lineGeneratorBasis = d3.svg.line()
    .x(function(data,index) { return map(index,0,8,0,width-margin*2); })
    .y(function(data,index) { return map(data,0,10,0,height-margin*2); })
    .interpolate('basis');
  
  var lineGeneratorLinear = d3.svg.line()
    .x(function(data,index) { return map(index,0,8,0,width-margin*2); })
    .y(function(data,index) { return map(data,0,10,0,height-margin*2); })
    .interpolate('linear');
  
  var lineGeneratorStep = d3.svg.line()
    .x(function(data,index) { return map(index,0,8,0,width-margin*2); })
    .y(function(data,index) { return map(data,0,10,0,height-margin*2); })
    .interpolate('step-before');
  

  stroke('black');
  var cPathBasis = new Path2D(lineGeneratorBasis(data));
  var cPathLinear = new Path2D(lineGeneratorLinear(data));
  var cPathStep = new Path2D(lineGeneratorStep(data));
  
  strokeWeight(3);
  stroke('#033E8C');
  canvas.getContext('2d').stroke(cPathBasis);
  stroke('#F2B705');
  canvas.getContext('2d').stroke(cPathLinear);
  stroke('#00D96F');
  canvas.getContext('2d').stroke(cPathStep);
  
  fill('#fff');
  stroke('#000');
  strokeWeight(1);
  for(var i = 0; i < data.length; i++) {
    ellipse(map(i,0,8,0,width-margin*2),map(data[i],0,10,0,height-margin*2), 10, 10)
  }
     
}