# jwilber/roughviz

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/jwilber-roughviz).**

7,113 stars · 238 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/jwilber/roughViz
- Homepage: https://www.jwilber.me/roughviz/
- awesome-repositories: https://awesome-repositories.com/repository/jwilber-roughviz.md

## Topics

`charting-library` `d3v5` `dashboard` `data-science` `data-visualization` `visualization`

## Description

roughViz is a JavaScript data visualization library used to create charts with a hand-drawn, sketchy aesthetic. It functions as an SVG charting framework that renders visualizations in the browser, prioritizing the communication of general trends and patterns over absolute precision.

The library provides a collection of tools to generate several chart types, including bar, line, pie, donut, and scatter plots, as well as stacked bar charts. These visualizations are produced using a non-linear drawing style to present technical information in an informal, organic appearance.

## Tags

### Graphics & Multimedia

- [Hand-Drawn Plotting](https://awesome-repositories.com/f/graphics-multimedia/hand-drawn-graphics-libraries/hand-drawn-plotting.md) — Generates various data plots and coordinates with a distinctive sketched, hand-drawn appearance. ([source](https://www.jwilber.me/roughviz/))
- [Coordinate-Based Plotting](https://awesome-repositories.com/f/graphics-multimedia/coordinate-based-plotting.md) — Transforms numerical arrays into 2D coordinate-based graphical representations like scatter plots and bar charts.
- [Data Visualization Libraries](https://awesome-repositories.com/f/graphics-multimedia/data-visualization-libraries.md) — Provides components to represent datasets through visual graphics like sketchy charts.
- [SVG-Based Vector Rendering](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/engines/canvas-vector-graphics/svg-based-vector-rendering.md) — Renders all chart elements as scalable vector graphics directly in the browser for crispness and CSS styling.
- [Hand-Drawn Graphics Libraries](https://awesome-repositories.com/f/graphics-multimedia/hand-drawn-graphics-libraries.md) — Provides a library for rendering web graphics with a simulated human-drawn aesthetic.
- [Hand-Drawn Aesthetic Simulation](https://awesome-repositories.com/f/graphics-multimedia/path-offsetting-and-replacement/hand-drawn-aesthetic-simulation.md) — Simulates a sketched look by applying random offsets and variable weights to vector paths via Rough.js.
- [Scatter Plot Rendering](https://awesome-repositories.com/f/graphics-multimedia/scatter-plot-rendering.md) — Plots X/Y data points as a scatter plot with customizable markers and interactive tooltips. ([source](https://cdn.jsdelivr.net/gh/jwilber/roughviz@master/README.md))

### Part of an Awesome List

- [JavaScript Charting](https://awesome-repositories.com/f/awesome-lists/devtools/javascript-charting.md) — Implements interactive charting and data visualization directly within the web browser using JavaScript.

### Data & Databases

- [Bar Charts](https://awesome-repositories.com/f/data-databases/data-analysis-visualization/analytical-platforms-engines/data-analysis-tools/bar-charts.md) — Provides the ability to render vertical and horizontal bar charts with a hand-drawn aesthetic. ([source](https://cdn.jsdelivr.net/gh/jwilber/roughviz@master/README.md))
- [Stacked and Grouped Bar Plots](https://awesome-repositories.com/f/data-databases/data-analysis-visualization/analytical-platforms-engines/data-analysis-tools/bar-charts/stacked-and-grouped-bar-plots.md) — Renders grouped and stacked bar charts in a hand-drawn style to compare multiple data series. ([source](https://cdn.jsdelivr.net/gh/jwilber/roughviz@master/README.md))
- [Sketched Circular Charts](https://awesome-repositories.com/f/data-databases/data-analysis-visualization/visualization-frameworks-libraries/chart-components-utilities/pie-charts/sketched-circular-charts.md) — Creates pie and donut charts utilizing hand-drawn arcs to show proportional data. ([source](https://cdn.jsdelivr.net/gh/jwilber/roughviz@master/README.md))
- [Visualization Coordinate Mapping](https://awesome-repositories.com/f/data-databases/data-mapping/coordinate-system-mapping/visualization-coordinate-mapping.md) — Translates raw numerical data points into pixel coordinates for rendering chart elements.

### User Interface & Experience

- [SVG](https://awesome-repositories.com/f/user-interface-experience/data-visualization-tools/data-visualization/charting-frameworks/svg.md) — Uses a framework to render data-driven charts as SVG elements for a scalable, organic appearance.
- [Line Charts](https://awesome-repositories.com/f/user-interface-experience/data-visualization-tools/data-visualization/specific-chart-types/line-charts.md) — Renders multi-line graphs with a hand-drawn style to visualize data trends. ([source](https://cdn.jsdelivr.net/gh/jwilber/roughviz@master/README.md))
- [Informal Data Presentations](https://awesome-repositories.com/f/user-interface-experience/informal-data-presentations.md) — Presents technical data in an approachable, non-formal, and playful visual style.