roughVizPlayground
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
main.tsx
https://dcm31--a5a50e6e278311f0b46e569c3dd06744.web.val.run
This val creates an interactive playground for exploring the roughViz library by Jared Wilber. roughViz is a JavaScript library for creating sketchy/hand-drawn styled charts in the browser, based on D3.js, roughjs, and handy.
-
Interactive controls to adjust chart parameters:
- Roughness: Controls how "sketchy" the charts appear
- Fill Style: Different fill patterns (hachure, cross-hatch, dots, etc.)
- Bowing: Controls the "bending" of lines
- Fill Weight: Controls the thickness of fill patterns
-
Demonstrates six chart types:
- Bar Chart
- Donut Chart
- Pie Chart
- Scatter Chart
- Horizontal Bar Chart
- Line Chart
-
Includes code examples for each chart type that update with your selected parameters
The playground provides a user interface to adjust various parameters and see how they affect the appearance of different chart types. Simply adjust the sliders and dropdown, then click "Apply Settings" to see the changes.