Skip to content

Instantly share code, notes, and snippets.

@romsson
Last active January 4, 2018 10:30
Show Gist options
  • Save romsson/d30d69d21348b4868389f9b8943bacec to your computer and use it in GitHub Desktop.
Save romsson/d30d69d21348b4868389f9b8943bacec to your computer and use it in GitHub Desktop.
square grid inverted glow (grids)
license: mit
<!DOCTYPE html>
<meta charset="utf-8">
<style>
rect {
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 = 400,
height = 400,
n = 20,
m = 20,
t = 100;
function cross(a, b) {
var c = [], n = a.length, m = b.length, i, j;
for (i = -1; ++i < n;) {
for (j = -1; ++j < m;) {
c.push({x: a[i], i: i, y: b[j], j: j, w: a[i].length, h: b[j].length});
}
}
return c;
}
var x = d3.scaleLinear().rangeRound([0, width]);
var y = d3.scaleLinear().rangeRound([0, height]);
var data = d3.range(1000).map(d3.randomBates(5));
var bins = d3.histogram()
.domain(x.domain())
.thresholds(x.ticks(n))
(data);
data = cross(bins, bins);
var radius = d3.scaleSqrt()
.range([0, width/n]);
radius.domain(d3.extent(data, function(d) { return d.h * d.w; }))
data.forEach(function(d) {
d.w = d.h = 20-radius(d.w * d.h);
})
var params = {
"size": [width, height],
"offset": [0, 0],
"mode": "coordinate",
"valueX": "i",
"valueY": "j",
"valueWidth": function(d) { return d["w"]; },
"valueHeight": function(d) { return d["h"]; }
};
var svgSquares = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g");
function draw() {
var gridding = d3.gridding()
.params(params);
svgSquares.selectAll(".square")
.data(gridding(data))
.enter().append("rect")
.attr("class", "square")
.attr("width", function(d) { return d.w; })
.attr("height", function(d) { return d.h; })
.attr("transform", function(d) { return "translate(" + (d.x - d.w/2) + "," + (d.y - d.h/2) + ")rotate("+2*radius(d.w * d.h)+")"; })
}
draw();
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment