Skip to content

Instantly share code, notes, and snippets.

@jwilber

jwilber/.block

Last active October 2, 2019 23:21
Show Gist options
  • Save jwilber/fc281249688ed1b20b38063e53bbacc0 to your computer and use it in GitHub Desktop.
Save jwilber/fc281249688ed1b20b38063e53bbacc0 to your computer and use it in GitHub Desktop.
Download ZIP
pre
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/iamjared@1.0.4"></script>
<style>
@import url('https://fonts.googleapis.com/css?family=Gaegu');
/*@import url('https://fonts.googleapis.com/css?family=Indie+Flower');*/
.wrapper {
display: flex;
flex: wrap;
}
h1, h4 {
font-family: 'Gaegu';
font-weight: .1;
padding-bottom: 0;
margin-bottom: 0;
}
#vis1 {
/* border: 1px dotted green; */
}
</style>
</head>
<body>
<div class="wrapper">
<div id="text"></div>
<div id="vis1"></div>
</div>
<!-- <div id="vis0"></div> -->
<script>
new roughViz.Bar(
{
element: '#vis1',
data: {
labels: ['February', 'Jah', 'Lax', 'd', 'e', 'g', 'h'],
values: [12.5, 9, 4, 10]
},
margin: {left: 5, right: 0, top: 10, bottom:20},
labels: 'letter',
values: 'frequency',
height: 60,
width: 110,
roughness: 2,
color: 'pink',
fillWeight: 1,
axisStrokeW: '0rem',
axesFontSize: '0',
strokeWidth: 0.5,
fillStyle: 'cross-hatch',
stroke: 'black',
}
);
var svg = d3.select("#text").append("svg")
.attr("width", 187)
.attr("height", 50)
// .style('border', '1px dotted red')
svg.append("text")
.text("roughViz.js")
.attr("y", 40)
.attr("x", 25)
.attr("font-size", 36)
.attr("font-family", "Gaegu")
.attr('font-weight', 'light')
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment