Skip to content

Instantly share code, notes, and snippets.

@jwilber

jwilber/.block

Last active October 5, 2019 04:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jwilber/88fe62cb4cb761c40a8f95ef8bae69ba to your computer and use it in GitHub Desktop.
Save jwilber/88fe62cb4cb761c40a8f95ef8bae69ba to your computer and use it in GitHub Desktop.
Download ZIP
roughViz Readme Image
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<!-- <script src="https://d3js.org/d3.v4.min.js"></script> -->
<script src="https://unpkg.com/rough-viz@1.0.2"></script>
<style>
.wrapper {
display: flex;
flex: wrap;
order: row;
}
</style>
</head>
<body>
<p></p>
<br><br>
<div class="wrapper">
<div id="vis0"></div>
<div id="vis1"></div>
<div id="vis2"></div>
<div>
<div id="vis3"></div>
<div id="vis4"></div>
</div>
<div class="vis5"></div>
</div>
<div id="vis2"></div>
<!-- <div id="vis0"></div> -->
<script>
let ttop = 50;
let rright = 20;
let bbottom = 45;
let width = 300;
new roughViz.Line(
{
element: '#vis0',
data: 'https://raw.githubusercontent.com/jwilber/random_data/master/tweets.csv',
title: 'Tweet Interactions',
// x: 'gdpPercap',
y: 'favorites',
y2: 'retweets',
y3: 'tweets',
yLabel: '# Interactions',
xLabel: 'Days',
legendPosition: 'left',
fillWeight: 2,
circleSize: 10,
roughness: 3.5,
strokeWidth: 1,
width: width + 50,
height: 400,
margin: {top: ttop, left:80, right:10, bottom: bbottom},
}
);
new roughViz.BarH(
{
element: '#vis2',
title: "Horizontal Bar",
data: {
labels: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l'],
values: [10, 20, 10, 5, 12, 10, 7, 20, 14, 9, 12, 10]
},
color: 'orange',
highlight: 'red',
strokeWidth: 1,
width: width,
height: 400,
margin: {top: ttop, left:10, right:rright, bottom: bbottom},
fillStyle: 'hachure',
roughness: 6,
}
);
new roughViz.Scatter(
{
element: '#vis1',
data: 'https://raw.githubusercontent.com/plotly/datasets/master/gapminder2007.csv',
title: 'Hans Rosling Chart',
x: 'gdpPercap',
y: 'lifeExp',
radius: 'pop',
yLabel: 'Life Expectancy',
xLabel: 'GDP Per Cap',
colorVar: 'continent',
highlightLabel: 'country',
roughness: 1.5,
fillWeight: 2,
width: width + 150,
height: 450,
margin: {top: ttop, left:80, right:rright, bottom: bbottom + 50},
}
);
new roughViz.Donut(
{
element: '#vis3',
data: {
labels: ['a', 'b', 'c', 'd', 'e'],
values: [10, 20, 10, 5, 12]
},
strokeWidth: 2,
width: width / 1.2,
height: 210,
margin: {top: 20, left:10, right:rright, bottom: 0},
fillStyle: 'cross-hatch',
roughness: 5.5,
}
);
new roughViz.Pie(
{
element: '#vis4',
data: {
labels: ['a', 'b', 'c',],
values: [10, 20, 10,]
},
color: 'orange',
highlight: 'gold',
strokeWidth: 1,
width: width/1.2,
colors: ['red', 'tan', 'green'],
height: 200,
margin: {top: 0, left:10, right:rright, bottom: 0},
fillStyle: 'zigzag',
roughness: 0,
}
);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment