roughViz fillStyles

<!DOCTYPE html>
<head>
  <meta charset="utf-8">

  <script src="https://unpkg.com/rough-viz@1.0.1"></script>
  <style>
	    .wrapper {
	      display: flex;
	      flex: wrap;
	    }
  </style>
</head>
 
<body>
  <div class="wrapper">
    <div class="vis0"></div>
    <div class="vis1"></div>
    <div class="vis2"></div>
    <div class="vis3"></div>
    <div class="vis4"></div>
    <div class="vis5"></div>

</div>
  <div id="vis2"></div>

  <script> 
    fillStyles = ['hachure', 'cross-hatch', 'zigzag', 'dashed', 'solid', 'zigzag-line']
    cols = ['skyblue', 'pink', 'coral', 'blue', 'orange', 'coral']
    for (let i=0; i < 9; i++) {
      new roughViz.Scatter(
      {
        element: '.vis' + i,
        title: `${fillStyles[i]}`,
        margin: {top: 40, bottom: 30, left: 20, right: 50},
        data: {
      x: [1, 2, 3],
      y: [39, 10, 30],
    },
        radius: [35, 50, 45],
        roughness: 2.,
//         fillWeight: 1.5,
        curbZero: true,
        colors: cols,
        strokeWidth: .5,
//         innerStrokeWidth: 1.,
        fillStyle: fillStyles[i],
        width: 210,
        height: 210
      }
    );
    }

</script>
</body>

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

https://unpkg.com/rough-viz@1.0.1