explaingit

jwilber/roughviz

★ 7,081JavaScriptAudience · designerComplexity · 1/5Setup · easy

TLDR

A JavaScript charting library that makes charts look hand-drawn in pencil, useful for showing approximate trends or a casual visual style rather than communicating exact numbers.

Mindmap

mindmap
  root((roughViz))
    Chart types
      Bar and horizontal bar
      Line and scatter
      Pie and donut
      Stacked bar
    Visual options
      Roughness level
      Fill style
      Colors and fonts
    Data input
      JavaScript object
      CSV and TSV file URL
    Integration
      CDN script tag
      npm package
      React and Vue wrappers
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Add a sketchy, hand-drawn bar or line chart to a web page with a single script tag and a few lines of JavaScript.

USE CASE 2

Embed roughViz charts in a React or Vue project using the official wrapper packages.

USE CASE 3

Create a roughViz chart in a Python data notebook using the Python wrapper package.

Tech stack

JavaScriptD3rough.js

Getting it running

Difficulty · easy Time to first run · 5min

In plain English

roughViz.js is a JavaScript library for making charts that look like they were hand-drawn in pencil. Instead of clean, precise lines and fills, every chart has a slightly wobbly, sketched appearance. The library is built on top of D3 and rough.js, and is aimed at situations where you want to communicate a general trend or idea rather than exact numbers, or simply want a more informal, casual visual style. The library supports seven chart types: bar, horizontal bar, donut, line, pie, scatter, and stacked bar. You create a chart by selecting a container element in your HTML and passing in a configuration object that includes your data and any visual options you want to customize. Data can come from a plain JavaScript object with labels and values arrays, or from a URL pointing to a CSV or TSV file. Most visual properties can be tuned. The roughness setting controls how wobbly the lines are. The fill style controls how the interior of shapes is filled, with options like hatching, cross-hatching, and solid fills. You can also adjust fill weight, stroke color, stroke width, colors, fonts, padding, and margins for each chart type individually. Adding it to a project is straightforward: include it via a CDN script tag for quick use, or install it as an npm package for a build-tool workflow. Wrapper packages exist for React, Vue, and Python if you prefer to use roughViz within those ecosystems. The library is described by its author as useful for charts that show intent or generality rather than precision, or for charts that are meant to be fun or visually distinctive.

Copy-paste prompts

Prompt 1
Write me the code to add a roughViz bar chart to my HTML page showing monthly sales data using the CDN script tag.
Prompt 2
How do I customize the roughness level and fill style, for example cross-hatching, in a roughViz donut chart?
Prompt 3
I am using React and want to embed a roughViz scatter chart with data from a CSV file. Walk me through using the React wrapper.
Prompt 4
Show me how to create a roughViz stacked bar chart from a plain JavaScript object with labels and values arrays.
Open on GitHub → Explain another repo

← jwilber on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.