rough line v5

<!DOCTYPE html> 
<head>    
  <meta charset="utf-8">
  <script src="https://cdn.jsdelivr.net/gh/pshihn/rough/dist/rough.js"></script>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg {background-color: 'red';}
  </style>
</head>

<body>
  <script>
    let n = 10; 
    let margin = {top: 25, bottom: 25, left:55, right:25}
    let width = 960 - margin.left - margin.right;
    let height = 500 - margin.top - margin.bottom;
    
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", width + margin.right + margin.left)
      .attr("height", height + margin.top + margin.bottom)
    	.append('g')
    	.attr('id', 'new')
    	.attr('transform', `translate(${margin.left}, ${margin.top})`)
		
    let xScale = d3.scaleLinear()
    	.domain([0, n-1])
    	.range([0, width]);
    
    let yScale = d3.scaleLinear()
    	.domain([0, 1])
    	.range([height, 0])
    
    var dataset = d3.range(n).map(function(d) { return {"y": d3.randomUniform(1)() } })
    
    svg.append('g')
    	.attr('class', 'x-axis')
    	.attr('transform', `translate(0, ${height})`)
    	.call(d3.axisBottom(xScale))
    
    svg.append('g')
    	.attr('class', 'y-axis')
    	.call(d3.axisLeft(yScale))
    
    let line = d3.line()
    	.x((d,i) => xScale(i))
    	.y(d => yScale(d.y))
    
    const roughSvg = document.getElementById('new');
    
    const rc = rough.svg(roughSvg)
//     , {
//       options: {
//       fill: color,
//       stroke: color,
//       strokeWidth: 1,
//       roughness: 1.4,
//       bowing: 1,
//       fillStyle: 'cross-hatch'
//       }
//     });
    
    console.log('dataset', dataset)
    var pix = 50;
   var max = d3.max(dataset, d => d.y);
    console.log('max', max) 
   var scale = d3.scaleLinear().domain([0, max]).range([100,10])
   
    var points = dataset.map((d,i)=>{
    return [xScale(i), yScale(d.y)] 
   })
    console.log('points', points)
    
    svg.append('path')
    	.datum(dataset)
    	.attr('class', 'line')
    	.attr('d', line)
    	.style('fill', 'none')
    	.style('stroke', 'coral')
    	.style('stroke-width', 0)
    
    let node = rc.curve(points,{
    stroke:'green',
    strokeWidth: 4,
      roughness: 4,
      bowing: 1
  })
    roughSvg.appendChild(node)

</script>
</body>

Updated missing url https://cdn.rawgit.com/pshihn/rough/master/dist/rough.js to https://cdn.jsdelivr.net/gh/pshihn/rough/dist/rough.js

https://cdn.rawgit.com/pshihn/rough/master/dist/rough.js

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