D3 Examples - roughViz roughness examples

xxxxxxxxxx
 
<!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>
<!--   <div id="vis0"></div> -->
  <script> 
    fillStyles = ['hachure', 'cross-hatch', 'zigzag', 'dashed', 'solid', 'zigzag-line']
    cols = ['skyblue', 'pink', 'coral', 'teal', 'orange', 'coral']
    for (let i=0; i < 9; i++) {
      new roughViz.Pie(
      {
        element: '.vis' + i,
        title: `roughness:${[i*4]}`,
        margin: {top: 40, bottom: 30, left: 20, right: 50},
        data: {
      labels: ['a', 'b', 'c', 'd'],
      values: [39, 10, 30, 20],
    },
        radius: [35, 50, 45],
        roughness: i * 4,
//         fillWeight: 1.5,
        titleFontSize: '1.1rem',
        colors: cols,
//         strokeWidth: .5,
        innerStrokeWidth: 1.2,
        fillStyle: 'cross-hatch',
        width: 210,
        height: 210
      }
    );
    }
 
​
  </script>
</body>
   
    