Skip to content

Instantly share code, notes, and snippets.

@romsson

romsson/.block

Last active December 17, 2017 20:28
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/8bda3c2b2d3e3c442f183da7010d4efe to your computer and use it in GitHub Desktop.
Save romsson/8bda3c2b2d3e3c442f183da7010d4efe to your computer and use it in GitHub Desktop.
Download ZIP
rectangles optical illusion (grids)
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font-family: Helvetica;
font-size: 20px;
}
rect {
fill: none;
opacity: .3;
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 = 400,
height = 400;
// params to play with
var n = 1,
data = d3.range(n),
max_depth = 10;
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height)
var root_params = {
"size": [width, height],
"offset": [0, 0],
"mode": "grid",
"padding": 0
};
function generate_layout(params, data = d3.range(16), depth = 0) {
var gridding = d3.gridding()
.params(params);
var griddingData = gridding(data);
draw(griddingData);
griddingData.forEach(function(d) {
if(depth < max_depth) {
var node_params = {
"size": [d.width, d.height],
"offset": [d.x, d.y],
"mode": "grid",
"margin": 5
};
var data = d3.range(1);
gridding.params(node_params);
var griddingData = gridding(data);
generate_layout(node_params, data, depth+1);
}
});
}
function draw(griddingData) {
var id = Math.floor(Math.random(100) * 10000000000);
var squares = svg.selectAll("#square_" + id)
.data(griddingData, function(d) { return d; });
squares.enter().append("rect")
.attr("class", "square")
.attr("id", "square_" + id)
.style("opacity", 1)
.style("stroke", "black")
.style("stroke-width", 2)
.attr("width", function(d) { return d.width; })
.attr("height", function(d) { return d.height; })
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
}
generate_layout(root_params);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment