Skip to content

Instantly share code, notes, and snippets.

@romsson

romsson/.block

Last active December 29, 2017 10:37
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 romsson/3eb92d4f6110f43a83482b085d282e7a to your computer and use it in GitHub Desktop.
Save romsson/3eb92d4f6110f43a83482b085d282e7a to your computer and use it in GitHub Desktop.
Download ZIP
progressive scribble lines (grids)
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
path {
fill: none;
stroke: black;
stroke-width: 1;
}
</style>
<body>
<script src="http://d3js.org/d3.v4.js"></script>
<script src="http://romsson.github.io/d3-gridding/build/d3-gridding.js"></script>
<script>
var width = 600,
height = 400,
n = 100,
j = 50,
l = 10,
o = 0,
s = 1.5;
var gridding = d3.gridding()
.size([width, height])
.orient("left")
.mode("brick");
var line = d3.line()
.x(function(d) {
return d.x + Math.random() * j * d.index / n;
})
.y(function(d) {
return d.y + Math.random() * j * d.index / n;
})
.curve(d3.curveBasis);
var data = d3.range(n).map(function(d, i) {
return {index: i};
});
var svgSquares = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g");
svgSquares.selectAll(".line")
.data(gridding(data)).enter()
.append("path")
.attr("class", "line")
.attr("d", function(d) {
var offset = o * Math.random();
var points = d3.range(l).map(function(e) {
var res = {};
res.x = d.x + (e * d.width / l) / s;
res.y = d.cy;
res.index = d.index
return res;
});
return line(points);
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment