roughViz.js

Why? roughViz was built to provide an easy way to create interactive, "sketchy" plots in the browser. Use these charts where the communication goal is to show intent or generality, and not absolute precision. Or just because they're fun and look weird!

Getting Started Is Simple

1. Import roughViz.js: First, import the library via a script tag or via npm:

        
    // Install with cdn:
    <script src="https://unpkg.com/rough-viz@1.0.6"></script>

    
    # Install with npm:
    $ npm install rough-viz 
    

2. Create container: Simply create a container div and assign some dimensions (e.g. width and height). By default, the roughViz chart will be sized and responsive according to these dimensions.

        
   <div id="viz0" width="500px" height="500px"></div>
    

3. Call chart: Use roughViz to create the desired chart, and feed in the required arguments.

        
  // create Donut chart using defined data & customize plot options
  new roughViz.Donut(
    {
      element: '#viz0',
      data: {
        labels: ['North', 'South', 'East', 'West'],
        values: [10, 5, 8, 3]
      },
      title: "Regions",
      roughness: 8,
      colors: ['red', 'orange', 'blue', 'skyblue'],
      stroke: 'black',
      strokeWidth: 3,
      fillStyle: 'cross-hatch',
      fillWeight: 3.5,
    }
  ); 
    

Check out live, editable examples here.
Documentation available in the GitHub repo.

Made by Jared Wilber