roughViz.js blends the power of D3v5 charting with the sketchy aesthetics of roughjs to deliver charts that look hand-drawn in the browser. If you’ve ever wanted your visualizations to carry a more informal, artistic vibe rather than the usual polished precision, roughViz offers a neat, configurable solution. It’s a library that doesn’t just make charts — it makes charts with personality.
what roughViz does and how it works
At its core, roughViz is a JavaScript charting library that wraps around D3v5, but instead of rendering crisp, pixel-perfect SVG charts, it uses roughjs to produce sketchy, hand-drawn style graphics. This approach gives your data visuals an organic feel, helping them stand out in contexts where the visual intent — the “sketchiness” — matters as much as the data itself.
The library supports seven major chart types out of the box: Bar, Horizontal Bar (BarH), Donut, Line, Pie, Scatter, and Stacked Bar charts. You can feed it data in several ways — either inline JSON objects or by referencing remote CSV, TSV, or JSON files via URLs. This flexibility means you can integrate it with existing data pipelines without much hassle.
Under the hood, roughViz leverages D3v5’s robust data-driven document manipulation capabilities for layout and scales, but hands off the actual drawing of elements to roughjs. Roughjs is a canvas and SVG library that simulates hand-drawn sketches using configurable parameters like roughness and bowing. This combination means you get the best of both worlds: D3’s powerful chart mechanics and roughjs’s unique visual style.
The library also ships with official wrappers for React, Vue, and even Python, making it accessible across different development stacks. Interactive features such as tooltips and hover highlighting are baked in, providing a decent level of interactivity without complicating the API.
aesthetic control and the tradeoffs involved
The distinguishing technical feature of roughViz lies in how it exposes roughjs parameters directly through its API. Parameters like roughness, fillStyle, fillWeight, and bowing let you tweak the “sketchiness” of the charts. For example, increasing roughness makes lines more jittery and irregular, while fillStyle controls how areas inside shapes are filled — from solid fills to cross-hatching and dots.
This design choice gives developers a surprising amount of control over the visual style, which is rare in charting libraries that typically focus on clean, precise rendering. The tradeoff here is clear: you sacrifice the crispness and exact pixel alignment of typical SVG charts for a more expressive and less formal appearance.
From a code quality perspective, the library is surprisingly clean for a project that combines two complex libraries. It abstracts away much of the boilerplate needed to set up roughjs with D3, offering a declarative API that is easy to reason about. The wrappers for React and Vue are minimal but effective, allowing you to embed roughViz charts with standard component props.
However, the tradeoff is that this sketchy style isn’t suitable for every context. If your use case demands precise, publication-quality charts or pixel-perfect alignment, roughViz might feel limiting or even inappropriate. Also, while the library supports multiple chart types, it doesn’t cover more specialized or complex visualizations like heatmaps, treemaps, or network graphs.
quick start
Getting started with roughViz is straightforward. You can include it via CDN or install it via npm if you prefer module-based projects. For React, Vue, or Python users, there are dedicated wrappers to integrate with your stack.
Here’s a quick example of using roughViz to create a bar chart from a remote CSV and a donut chart from inline data, taken directly from the official usage instructions:
<script src="https://unpkg.com/rough-viz@2.0.5"></script>
<div id="viz0"></div>
<div id="viz1"></div>
<script>
new roughViz.Bar({
element: '#viz0',
data: 'https://raw.githubusercontent.com/jwilber/random_data/master/flavors.csv',
labels: 'flavor',
values: 'price'
});
new roughViz.Donut({
element: '#viz1',
data: {
labels: ['North', 'South', 'East', 'West'],
values: [10, 5, 8, 3]
},
title: "Regions",
width: window.innerWidth / 4,
roughness: 8,
colors: ['red', 'orange', 'blue', 'skyblue'],
stroke: 'black',
strokeWidth: 3,
fillStyle: 'cross-hatch',
fillWeight: 3.5,
});
</script>
This snippet highlights how easy it is to switch between data sources and customize the roughness parameters to adjust the visual style. The API is declarative and requires minimal setup — a big plus when you want quick, playful charts without jumping through hoops.
verdict
roughViz is a neat tool for projects where the visual style of charts carries communicative weight beyond just the numbers. It’s particularly relevant for dashboards, presentations, or educational content that benefits from an informal, hand-drawn look.
The tradeoff is that it’s not a replacement for high-precision charting libraries when you need pixel-perfect rendering or extensive chart variety. The sketchy aesthetic is deliberate and won’t suit all audiences or contexts.
In production, roughViz shines when used intentionally to convey a specific visual message. Its multi-framework support and straightforward API make it accessible, but it’s worth understanding the aesthetic tradeoffs before adopting it wholesale. For developers looking to add character to their charts without building this effect from scratch, roughViz is definitely worth a look.
→ GitHub Repo: jwilber/roughViz ⭐ 7,076 · JavaScript