Skip to content

Instantly share code, notes, and snippets.

@jwilber

jwilber/.block

Last active October 3, 2019 18:15
Show Gist options
  • Save jwilber/4c67375ca8e8609b02e0c91bdc7c43de to your computer and use it in GitHub Desktop.
Save jwilber/4c67375ca8e8609b02e0c91bdc7c43de to your computer and use it in GitHub Desktop.
Download ZIP
roughViz fillStyles
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.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', 'blue', 'orange', 'coral']
for (let i=0; i < 9; i++) {
new roughViz.Scatter(
{
element: '.vis' + i,
title: `${fillStyles[i]}`,
margin: {top: 40, bottom: 30, left: 20, right: 50},
data: {
x: [1, 2, 3],
y: [39, 10, 30],
},
radius: [35, 50, 45],
roughness: 2.,
// fillWeight: 1.5,
curbZero: true,
colors: cols,
strokeWidth: .5,
// innerStrokeWidth: 1.,
fillStyle: fillStyles[i],
width: 210,
height: 210
}
);
}
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment