rough circles

<!DOCTYPE html>
<html>  
<head>
	<script src="https://cdn.jsdelivr.net/gh/pshihn/rough/dist/rough.js"></script>
	<script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body> 
  
  <div id="vis"></div>
	<script>
		const data = [1,5,3,4,7,1]
    const margin = { top: 40, right: 20, bottom: 50, left: 100 }
    const width = 920 - margin.left - margin.right;
    const height = 420 - margin.top - margin.bottom;

let svg = d3.select('#vis')
        .append('svg')
        .attr('width', width + margin.left + margin.right)
        .attr('height', height + margin.top + margin.bottom)
          .append("g")
          .attr('id', 'new')
          .attr("transform",
                "translate(" + margin.left + "," + margin.top + ")")

const roughSvg = document.getElementById('new');

d3.selectAll('g.bar')
          .on('mouseout', function() {
            d3.select(this).selectAll('path').style('stroke', 'chocolate')
          })

</script>
</body>
</html>

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