Reusable JavaScript library for creating sketchy/hand-drawn styled charts in the browser.
\n\t\t 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.
\n\t\tCreate charts with beautiful, sketchy-looking aesthetics. Or just make charts that look like a bunch of scribbles.
\n\t\troughViz has a very easy API. Just create a chart and specify the parameters. No more method chaining or nested JSON.
\n\t\tWhy? roughViz was built to provide an easy way to create interactive, \"sketchy\" plots in the browser.\n\tUse these charts where the communication goal is to show intent or generality, and not absolute precision. \n\tOr just because they're fun and look weird.\n\n
\n\nStep 1: Load Library
\n\t\n<!-- 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">
\n\tStep 2: Setup chart container
\t\n\t\n\t<div id="chart"></div>\n\tStep 3: Create chart
\t\n\t\nnew roughBars.Bar(\n {\n element: '#example',\n data: 'https://gist.githubusercontent.com/mbostock/3310560/raw/98311dc46685ed02588afdcb69e5fa296febc1eb/letter-frequency.tsv',\n labels: 'letter',\n values: 'frequency',\n height:window.innerHeight * 0.7,\n width: window.innerWidth * 0.8,\n roughness: 3,\n color: 'pink',\n fillWeight: 1,\n strokeWidth: 0.5,\n stroke: 'black',\n }\n);\n\tThat's it!
\n\nnew roughBars.Scatter(\n {\n element: '#vis0',\n data: 'https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv',\n title: 'Hans Rosling (Gapminder 2007)',\n x: 'gdpPercap',\n y: 'lifeExp',\n radius: 'pop',\n colorVar: 'continent',\n highlightLabel: 'country',\n roughness: 1.5,\n width: window.innerWidth / 2,\n height: 500,\n }\n);\n\nnew roughBars.Donut(\n {\n element: '#vis1',\n data: 'https://raw.githubusercontent.com/jwilber/jenkem_data/master/regions.json',\n title: 'Regions',\n labels: 'region',\n values: 'count',\n roughness: 4,\n colors: ['pink', 'coral', 'teal', 'skyblue'],\n highlight: 'gold',\n strokeWidth: 2,\n titleFontSize: '25px',\n fillWeight: 1.5,\n fillStyle: 'zigzag-line',\n width: window.innerWidth / 2,\n height: 450,\n }\n);\n\t \n\tnew roughBars.Donut(\n {\n element: '#vis1',\n data: 'https://raw.githubusercontent.com/jwilber/jenkem_data/master/regions.json',\n title: 'Regions',\n labels: 'region',\n values: 'count',\n width: window.innerWidth / 2,\n roughness: 0,\n radius: 'petal_width',\n colors: ['pink', 'coral', 'teal', 'skyblue'],\n bowing: 0.1,\n highlight: 'gold',\n // stroke: 'black',\n strokeWidth: 1,\n titleFontSize: '25px',\n // fillWeight: 1.5,\n // simplification: 5,\n fillStyle: 'zigzag-line',\n height: 450,\n curbZero: false,\n }\n);new roughBars.Pie(\n {\n element: '#vis2',\n data: {\n labels: ['Reggae', 'Jah', 'Lax', 'd'],\n values: [40, 400, 40]\n },\n title: 'My Free Time',\n // titleFontSize: '55px',\n width: window.innerWidth / 2,\n roughness: 5,\n // radius: 'petal_width',\n colors: ['red', 'orange', 'blue', 'skyblue', 'red', 'green', 'black', 'grey'],\n // bowing: 0.1,\n stroke: 'black',\n strokeWidth: 5,\n strokeWidth: 3,\n fillStyle: 'zigzag',\n height: 400,\n // font: 0,\n fillWeight: 3.5,\n }\n);