Skip to content

Instantly share code, notes, and snippets.

@karen-izuka

karen-izuka/index.html

Last active February 18, 2020 18:47
Show Gist options
  • Save karen-izuka/99ef292db429baa7a3c40f6179c357d8 to your computer and use it in GitHub Desktop.
Save karen-izuka/99ef292db429baa7a3c40f6179c357d8 to your computer and use it in GitHub Desktop.
Download ZIP
Hand Drawn Bars
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hand Drawn Bar Chart</title>
<link href="https://fonts.googleapis.com/css?family=Gaegu&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Sketched Bar Chart</h1>
<div>
<canvas id="canvas"></canvas>
</div>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/roughjs@4.0.4/bundled/rough.min.js"></script>
<script src="index.js"></script>
</body>
</html>
Raw
index.js
const data = [1, 2, 3, 4, 5];
const getCanvas = (selector) => {
return document.getElementById(selector);
}
const getrc = (selector) => {
const canvas = getCanvas(selector);
return rough.canvas(canvas);
}
const draw = () => {
const rc = getrc('canvas');
const max = d3.max(data);
const pix = 20;
data.forEach((d,i) => {
rc.rectangle(i*50+40,
max*pix-d*pix+10,
25,
d*pix,
{fill: '#80DEEA', stroke: '#000000'})
});
}
draw();
Raw
style.css
h1 {
font-family: 'Gaegu', cursive;
text-align: center;
}
#canvas {
width: 400px;
height: 200px;
display: block;
margin: auto;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment