<div class="wrapper">
    <div id="vis0"></div>
    <div id="vis1"></div>
  </div>
 .wrapper {
	      display: flex;
	      flex: wrap;
        order: row;
	    }
 new roughViz.BarH(
  {
    element: '#vis0',
    title: "SNS foo bar",
    titleFontSize: '1.5rem',
    legend: false,
    margin: {top: 50, bottom: 100, left: 160, right: 0},
    data: {
      labels: ['Twitter', 'hatena', 'facebook', 'Instagram'],
      values: [8, 4, 6, 2]
    },
    xLabel: 'Time Owned (Years)',
    strokeWidth: 2,
    fillStyle: 'zigzag-line',
    highlight: 'red',
  }
);

  new roughViz.BarH(
    {
      element: '#vis1',
      titleFontSize: '1.5rem',
//       margin: {top: 50, bottom: 100, left: 60, right: 0},
      data: 'https://raw.githubusercontent.com/jwilber/random_data/master/owTanks.csv',
      color: 'tan',
      labels: 'name',
      values: 'health',
      title: "CSV example",
      roughness: 4,
    }
  );

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/rough-viz@1.0.4