JSFiddle - React, Tailwind, and code Playground

by Shang-De You

HTML

<svg id="#s">

</svg>

JavaScript

var data = [
  {x:0, y:1.89}, 
  {x:1, y:2.77}, 
  {x:2, y:0.86}, 
  {x:3, y:3.45}, 
  {x:4, y:4.13}, 
  {x:5, y:3.59}, 
  {x:6, y:2.33}, 
  {x:7, y:3.79}, 
  {x:8, y:2.61}, 
  {x:9, y:2.15}
  ];

  var width = 240,
    height = 120;

  var s = d3.select('#s');

  s.attr({
      'width': width,
      'height': height,
    }).style({
      'border':'1px solid #000'
    });

  var line = d3.svg.line()
    .x(function(d) {
      return d.x;
    }).y(function(d) {
      return d.y;
    });

  s.append('path')
    .attr({
        'd':line(data),
        'stroke':'#09c',
        'fill':'none'
    });