Skip to content

Instantly share code, notes, and snippets.

@romsson
Created August 8, 2016 15:24
Show Gist options
  • Save romsson/311c8003abd0592fbd4b693a03f7989c to your computer and use it in GitHub Desktop.
Save romsson/311c8003abd0592fbd4b693a03f7989c to your computer and use it in GitHub Desktop.
grid > horizontal // vertical
<!DOCTYPE html>
<meta charset="utf-8">
<style>
rect {
stroke: black;
stroke-width: 1;
fill: none;
fill-opacity: .8;
}
</style>
<body>
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://romsson.github.io/d3-gridding/build/d3-gridding-v0.0.5.js"></script>
<script>
var width = 800,
height = 800,
paddingGroups = 5;
var gridding = d3.gridding()
.size([width, height]);
var svgSquares = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g");
var color = d3.scaleLinear()
.domain([0, 10])
.range(["black", "white"]);
var n = 512,
data = generateData(n);
// Generate data with unique index globally
function generateData(n, offset) {
offset = offset || 0;
return d3.range(n).map(function(d, i) {
return {x: d, y: i, index: i + offset};
});
}
// Given an SVG element and gridding data
// renders with a depth attribute and key
function render(el, griddingData, depth) {
var squares = el.selectAll(".square.depth_" + depth)
.data(griddingData, function(d) { return d.index; });
squares.enter().append("rect")
.attr("class", "square depth_" + depth)
.attr("width", function(d) { return d.width; })
.attr("height", function(d) { return d.height; })
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
// Prevents to remove unit elements (aka depth 0 elements)
if(depth > 0) {
squares.exit().remove();
}
squares
.attr("width", function(d) { return d.width; })
.attr("height", function(d) { return d.height; })
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
}
function update(mode, groupBy) {
// Re-orgainize unit-data
var nested_data = d3.nest()
.key(groupBy)
.entries(data);
// Creates group data
var nbGroups = nested_data.length;
var griddingDataGroups = gridding
.mode(mode)
.padding(paddingGroups)
(nested_data);
render(svgSquares, griddingDataGroups, 1);
// For each group, re-organize the unit elements
griddingDataGroups.map(function(d, i) {
var cols = gridding.cols();
var rows = Math.ceil(nbGroups / cols);
var row = Math.floor(i / cols);
var grid = d3.gridding()
.size([d.width, d.height])
.offset([d.x, d.y])
.mode((((i + row) % 2) === 0) ? "horizontal": "vertical")
.padding(0);
render(svgSquares, grid(nested_data[i].values), 0);
});
}
var iteration = 0, iterator = 1;
function repeat() {
update("grid", function(e) {
return e.index % Math.floor(n / Math.pow(2, iteration));
});
iteration = iteration + iterator;
if(iteration === 9) {
iterator = -1;
} else if(iteration === 0) {
iterator = 1;
}
setTimeout(repeat, 500);
}
repeat();
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment