A showcase of all layouts currently available for d3-gridding
Last active
May 3, 2017 12:41
-
-
Save romsson/4e03f6a915c713cf8fe8482d685c8c0b to your computer and use it in GitHub Desktop.
d3-gridding.js - see all layout modes
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
license: mit |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
body { | |
font-family: Helvetica; | |
font-size: 10px; | |
} | |
rect, circle { | |
stroke: black; | |
stroke-width: 1; | |
} | |
</style> | |
<body> | |
<script src="http://d3js.org/d3.v4.js"></script> | |
<script src="https://romsson.github.io/d3-gridding/build/d3-gridding.js"></script> | |
<script> | |
var width = 400, | |
height = 300; | |
var gridding = d3.gridding() | |
.size([width, height]) | |
.value(function(d) { return d.index; }); | |
var svgSquares = d3.select("body").append("svg") | |
.attr("width", width) | |
.attr("height", height) | |
.append("g"); | |
function render(el, griddingData, id) { | |
var squares = el.selectAll(".square" + "_" + id) | |
.data(griddingData, function(d) { return d.index; }); | |
squares.enter().insert("rect", ":first-child") | |
.attr("class", ".square" + "_" + id) | |
.attr("width", function(d) { return d.width; }) | |
.attr("height", function(d) { return d.height; }) | |
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }) | |
.style("fill", function() { | |
if(id === "all") { | |
return "none"; | |
} else { | |
return "white"; | |
} | |
}) | |
.style("fill-opacity", .8); | |
squares.exit().remove(); | |
squares.transition().delay(function(d, i) { return i * 10; }) | |
.attr("width", function(d) { return d.width; }) | |
.attr("height", function(d) { return d.height; }) | |
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); | |
// Only show titles for modes cells | |
if(id === "all") { | |
var titles = el.selectAll(".title") | |
.data(griddingData, function(d) { return d.index; }); | |
titles.enter().append("text") | |
.attr("class", "title") | |
.attr("text-anchor", "middle") | |
.attr("transform", function(d) { return "translate(" + d.cx + "," + d.cy + ")"; }) | |
.text(function(d) { return d.value; }); | |
titles.exit().remove(); | |
titles.transition().delay(function(d, i) { return i * 10; }) | |
.attr("transform", function(d) { return "translate(" + d.cx + "," + d.cy + ")"; }); | |
} | |
} | |
function update(mode, n, sort) { | |
sort = sort || d3.ascending; | |
var data = gridding.modes().map(function(d, i) { | |
return {"value": d, "index": i}; | |
}); | |
// Global layout | |
gridding | |
.mode(mode) | |
.sort(sort) | |
.padding(10); | |
var griddingData = gridding(data); | |
render(svgSquares, griddingData, "all") | |
var griddings = griddingData.map(function(d, i) { | |
// Local layout | |
var grid = d3.gridding() | |
.size([d.width, d.height]) | |
.offset([d.x, d.y]) | |
.value(function(d) { return d.index; }) | |
.mode(d.value) | |
.padding(0); | |
render(svgSquares, grid(d3.range(10).map(function() { return {}; })), d.value) | |
return d; | |
}); | |
} | |
update("grid", gridding.modes().length); | |
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
�PNG | |