roughViz Readme Image

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

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

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

  <script> 
    let ttop = 50;
    let rright = 20;
    let bbottom = 45;
    let width = 300;
    
        new roughViz.Line(
  {
    element: '#vis0',
    data: 'https://raw.githubusercontent.com/jwilber/random_data/master/tweets.csv',
    title: 'Tweet Interactions',
    // x: 'gdpPercap',
    y: 'favorites',
    y2: 'retweets',
    y3: 'tweets',
    yLabel: '# Interactions',
    xLabel: 'Days',
    legendPosition: 'left',
    fillWeight: 2,
    circleSize: 10,
    roughness: 3.5,
    strokeWidth: 1,
    width: width + 50,
    height: 400,
    margin: {top: ttop, left:80, right:10, bottom: bbottom},
  }
);

new roughViz.BarH(
  {
    element: '#vis2',
    title: "Horizontal Bar",
    data: {
      labels: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l'],
      values: [10, 20, 10, 5, 12, 10, 7, 20, 14, 9, 12, 10]
    },
    color: 'orange',
    highlight: 'red',
    strokeWidth: 1,
    width: width,
    height: 400,
    margin: {top: ttop, left:10, right:rright, bottom: bbottom},
    fillStyle: 'hachure',
    roughness: 6,
  }
);
    new roughViz.Scatter(
  {
    element: '#vis1',
    data: 'https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv',
    title: 'Hans Rosling Chart',
    x: 'gdpPercap',
    y: 'lifeExp',
    radius: 'pop',
    yLabel: 'Life Expectancy',
    xLabel: 'GDP Per Cap',
    colorVar: 'continent',
    highlightLabel: 'country',
    roughness: 1.5,
    fillWeight: 2,
    width: width + 150,
    height: 450,
    margin: {top: ttop, left:80, right:rright, bottom: bbottom + 50},
  }
);
    new roughViz.Donut(
  {
    element: '#vis3',
    data: {
      labels: ['a', 'b', 'c', 'd', 'e'],
      values: [10, 20, 10, 5, 12]
    },
    strokeWidth: 2,
    width: width / 1.2,
    height: 210,
    margin: {top: 20, left:10, right:rright, bottom: 0},
    fillStyle: 'cross-hatch',
    roughness: 5.5,
  }
);
    new roughViz.Pie(
  {
    element: '#vis4',
    data: {
      labels: ['a', 'b', 'c',],
      values: [10, 20, 10,]
    },
    color: 'orange',
    highlight: 'gold',
    strokeWidth: 1,
    width: width/1.2,
    colors: ['red', 'tan', 'green'],
    height: 200,
    margin: {top: 0, left:10, right:rright, bottom: 0},
    fillStyle: 'zigzag',
    roughness: 0,
  }
);

</script>
</body>

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

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