Skip to content

Instantly share code, notes, and snippets.

@jwilber

jwilber/.block

Last active October 3, 2019 20: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/f3f0f2e4db5e261be9f9be5644f673cb to your computer and use it in GitHub Desktop.
Save jwilber/f3f0f2e4db5e261be9f9be5644f673cb to your computer and use it in GitHub Desktop.
Download ZIP
roughViz roughness examples
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/rough-viz@1.0.1"></script>
<style>
.wrapper {
display: flex;
flex: wrap;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="vis0"></div>
<div class="vis1"></div>
<div class="vis2"></div>
<div class="vis3"></div>
<div class="vis4"></div>
<div class="vis5"></div>
</div>
<div id="vis2"></div>
<!-- <div id="vis0"></div> -->
<script>
fillStyles = ['hachure', 'cross-hatch', 'zigzag', 'dashed', 'solid', 'zigzag-line']
cols = ['skyblue', 'pink', 'coral', 'teal', 'orange', 'coral']
for (let i=0; i < 9; i++) {
new roughViz.Pie(
{
element: '.vis' + i,
title: `roughness:${[i*4]}`,
margin: {top: 40, bottom: 30, left: 20, right: 50},
data: {
labels: ['a', 'b', 'c', 'd'],
values: [39, 10, 30, 20],
},
radius: [35, 50, 45],
roughness: i * 4,
// fillWeight: 1.5,
titleFontSize: '1.1rem',
colors: cols,
// strokeWidth: .5,
innerStrokeWidth: 1.2,
fillStyle: 'cross-hatch',
width: 210,
height: 210
}
);
}
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment