Reusable JavaScript library for creating sketchy/hand-drawn styled charts in the browser.
Based on D3v5 and rough.js.
Charts can be created from multiple data-sources! Use inline JSON. Load your own local file. Link to data at some url.
Create charts with beautiful, sketchy-looking aesthetics. Or just make charts that look like a bunch of scribbles.
roughViz has a very easy API. Just create a chart and specify the parameters. No more method chaining or nested JSON.
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.
Step 1: Load Library
<!-- Step 1) Load D3.js -->
<script src="https://d3js.org/d3.v5.min.js"></script>
<!-- Step 2) Load billboard.js with style -->
<script src="$YOUR_PATH/billboard.js"></script>
<!-- Load with base style -->
<link rel="stylesheet" href="$YOUR_PATH/billboard.css">
<!-- Or load different theme style -->
<link rel="stylesheet" href="$YOUR_PATH/theme/insight.css">
Step 2: Setup chart container
<div id="chart"></div>
Step 3: Create chart
new roughBars.Bar(
{
element: '#example',
data: 'https://gist.githubusercontent.com/mbostock/3310560/raw/98311dc46685ed02588afdcb69e5fa296febc1eb/letter-frequency.tsv',
labels: 'letter',
values: 'frequency',
height:window.innerHeight * 0.7,
width: window.innerWidth * 0.8,
roughness: 3,
color: 'pink',
fillWeight: 1,
strokeWidth: 0.5,
stroke: 'black',
}
);
That's it!
new roughBars.Scatter(
{
element: '#vis0',
data: 'https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv',
title: 'Hans Rosling (Gapminder 2007)',
x: 'gdpPercap',
y: 'lifeExp',
radius: 'pop',
colorVar: 'continent',
highlightLabel: 'country',
roughness: 1.5,
width: window.innerWidth / 2,
height: 500,
}
);
new roughBars.Donut(
{
element: '#vis1',
data: 'https://raw.githubusercontent.com/jwilber/jenkem_data/master/regions.json',
title: 'Regions',
labels: 'region',
values: 'count',
roughness: 4,
colors: ['pink', 'coral', 'teal', 'skyblue'],
highlight: 'gold',
strokeWidth: 2,
titleFontSize: '25px',
fillWeight: 1.5,
fillStyle: 'zigzag-line',
width: window.innerWidth / 2,
height: 450,
}
);
new roughBars.Donut(
{
element: '#vis1',
data: 'https://raw.githubusercontent.com/jwilber/jenkem_data/master/regions.json',
title: 'Regions',
labels: 'region',
values: 'count',
width: window.innerWidth / 2,
roughness: 0,
radius: 'petal_width',
colors: ['pink', 'coral', 'teal', 'skyblue'],
bowing: 0.1,
highlight: 'gold',
// stroke: 'black',
strokeWidth: 1,
titleFontSize: '25px',
// fillWeight: 1.5,
// simplification: 5,
fillStyle: 'zigzag-line',
height: 450,
curbZero: false,
}
);new roughBars.Pie(
{
element: '#vis2',
data: {
labels: ['Reggae', 'Jah', 'Lax', 'd'],
values: [40, 400, 40]
},
title: 'My Free Time',
// titleFontSize: '55px',
width: window.innerWidth / 2,
roughness: 5,
// radius: 'petal_width',
colors: ['red', 'orange', 'blue', 'skyblue', 'red', 'green', 'black', 'grey'],
// bowing: 0.1,
stroke: 'black',
strokeWidth: 5,
strokeWidth: 3,
fillStyle: 'zigzag',
height: 400,
// font: 0,
fillWeight: 3.5,
}
);