FrissAnalytics/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from romsson's block: line scribbles (grids)
forked from romsson's block: vertical jittered line (grids)

  
## 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 = 3050,
    j = 4,
		l = 5,
    o = 1;

var gridding = d3.gridding()
  .size([width, height])
  .mode("brick");

var line = d3.line()
  .x(function(d) {
    return d.x + Math.random() * j ;
  })
  .y(function(d) {
    return d.y + Math.random() * j;
  })
  .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.cx + offset;
        res.y = d.cy + (e * (d.height + 20 ) / l);
        return res;
      });
      return line(points);
    });

</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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 = 3050,
	j = 4,
	l = 5,
	o = 1;

	var gridding = d3.gridding()
	.size([width, height])
	.mode("brick");

	var line = d3.line()
	.x(function(d) {
	return d.x + Math.random() * j ;
	})
	.y(function(d) {
	return d.y + Math.random() * j;
	})
	.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.cx + offset;
	res.y = d.cy + (e * (d.height + 20 ) / l);
	return res;
	});
	return line(points);
	});

	</script>