A collection of blocks scanned with blockscanner for the bl.ocksplorer.org project and further processed with block-similarity.
If you don’t see any of your blocks here, add your GitHub username
If you need to add thumbnails to your bl.ocks, use blockbuilder.org
forked from enjalot‘s block: all the blocks
forked from enjalot‘s block: block wall
forked from enjalot‘s block: block wall: thumbnails only
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.js"></script>
<script src="hilbert.js"></script>
<style>
body {
margin:0;position:absolute;top:0;right:0;bottom:0;left:0;
background-color: #111;
overflow-y: scroll;
}
#blocks {
position: absolute;
}
.block {
position:absolute;
margin: 10px;
width: 50px;
height: 50px;
text-decoration: none;
line-height: 9px;
}
.block a {
text-decoration: none;
}
.block img {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div id="blocks">
</div>
<script>
d3.json("blocks.json", function(err, blocks) {
var xf = crossfilter(blocks);
var author = xf.dimension(function(d) { return d.userId })
var created = xf.dimension(function(d) { return +new Date(d.created_at) })
var all = xf.dimension(function(d) { return true });
var thumb = xf.dimension(function(d) { return !!d.thumbnail });
thumb.filter(function(d) { return d })
//var api = xf.dimension(function(d) { return d.api });
var color = d3.scale.linear()
.domain([0, 2797])
.range(["#a8ff60", "#0600cc"])
.interpolate(d3.interpolateHcl)
var layout = new hilbert()
.sideLength(55)
//var data = layout.nodes(created.top(1000));
var data = layout.nodes(created.top(Infinity));
//var data = created.top(Infinity);
console.log("grid", data.length)
var blockdivs = d3.select("#blocks").selectAll("div.block")
.data(data)
.enter()
.append("div").classed("block", true)
.style({
top: function(d) { return d.y + "px" },
left: function(d) { return d.x + "px" },
"border": function(d,i) {
return "1px solid " + color(i);
},
})
var links = blockdivs.append("a")
.attr({
href: function(d) { return "//bl.ocks.org/" + d.data.userId + "/" + d.data.id },
target: "_blank"
})
links
.append("img")
.attr({
src: function(d) { return d.data.thumbnail },
title: function(d) { return (d.data.description || "") + " by " + d.data.userId }
})
})
</script>
</body>
(function() {
d3.fisheye = {
scale: function(scaleType) {
return d3_fisheye_scale(scaleType(), 3, 0);
},
circular: function() {
var radius = 200,
distortion = 2,
k0,
k1,
focus = [0, 0];
function fisheye(d) {
var dx = d.x - focus[0],
dy = d.y - focus[1],
dd = Math.sqrt(dx * dx + dy * dy);
if (!dd || dd >= radius) return {x: d.x, y: d.y, z: dd >= radius ? 1 : 10};
var k = k0 * (1 - Math.exp(-dd * k1)) / dd * .75 + .25;
return {x: focus[0] + dx * k, y: focus[1] + dy * k, z: Math.min(k, 10)};
}
function rescale() {
k0 = Math.exp(distortion);
k0 = k0 / (k0 - 1) * radius;
k1 = distortion / radius;
return fisheye;
}
fisheye.radius = function(_) {
if (!arguments.length) return radius;
radius = +_;
return rescale();
};
fisheye.distortion = function(_) {
if (!arguments.length) return distortion;
distortion = +_;
return rescale();
};
fisheye.focus = function(_) {
if (!arguments.length) return focus;
focus = _;
return fisheye;
};
return rescale();
}
};
function d3_fisheye_scale(scale, d, a) {
function fisheye(_) {
var x = scale(_),
left = x < a,
range = d3.extent(scale.range()),
min = range[0],
max = range[1],
m = left ? a - min : max - a;
if (m == 0) m = max - min;
return (left ? -1 : 1) * m * (d + 1) / (d + (m / Math.abs(x - a))) + a;
}
fisheye.distortion = function(_) {
if (!arguments.length) return d;
d = +_;
return fisheye;
};
fisheye.focus = function(_) {
if (!arguments.length) return a;
a = +_;
return fisheye;
};
fisheye.copy = function() {
return d3_fisheye_scale(scale.copy(), d, a);
};
fisheye.nice = scale.nice;
fisheye.ticks = scale.ticks;
fisheye.tickFormat = scale.tickFormat;
return d3.rebind(fisheye, scale, "domain", "range");
}
})()
// from http://bl.ocks.org/nitaku/8947871
var LSystem = window.LSystem = {}
LSystem.fractalize = function(config) {
var char, i, input, output, _i, _len, _ref;
input = config.axiom;
for (i = 0, _ref = config.steps; 0 <= _ref ? i < _ref : i > _ref; 0 <= _ref ? i++ : i--) {
output = '';
for (_i = 0, _len = input.length; _i < _len; _i++) {
char = input[_i];
if (char in config.rules) {
output += config.rules[char];
} else {
output += char;
}
}
input = output;
}
return output;
};
/* convert a Lindenmayer string into an SVG path string
*/
LSystem.path = function(config) {
var angle, char, path, _i, _len, _ref;
angle = 0.0;
path = 'M0 0';
_ref = config.fractal;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
char = _ref[_i];
if (char === '+') {
angle += config.angle;
} else if (char === '-') {
angle -= config.angle;
} else if (char === 'F') {
path += "l" + (config.side * Math.cos(angle)) + " " + (config.side * Math.sin(angle));
}
}
return path;
};
LSystem.grid = function(config) {
var angle, char, i, j, len, ref, x, y;
angle = 0.0;
j = 1;
var grid = [{x: 0, y: 0, j: 0}];
ref = config.fractal;
for (i = 0, len = ref.length; i < len; i++) {
//if(j >= config.data.length) return grid;
char = ref[i];
if (char === '+') {
angle += config.angle;
} else if (char === '-') {
angle -= config.angle;
} else if (char === 'F') {
x = config.side * Math.cos(angle);
y = config.side * Math.sin(angle);
x += grid[j-1].x;
y += grid[j-1].y;
grid.push({
x: x,
y: y,
//data: config.data[j],
j: j
});
j++
}
}
return grid;
}
function hilbert() {
var angle = 270 * Math.PI / 180;
var nodes = [];
var grid = [];
var data = [];
var sideLength = 20;
var steps, hilbertConfig, hilbertFractal;
function calculate() {
steps = Math.ceil(Math.log2(data.length || 1) / 2)
hilbertConfig = {
steps: steps,
axiom: 'A',
rules: {
A: '-BF+AFA+FB-',
B: '+AF-BFB-FA+'
}
}
hilbertFractal = LSystem.fractalize(hilbertConfig);
}
function newNodes() {
calculate();
nodes = [];
grid = LSystem.grid({
fractal: hilbertFractal,
side: sideLength,
angle: angle
})
//console.log(data, grid)
data.forEach(function(d,i) {
var node = {
x: grid[i].x,
y: grid[i].y,
data: d,
index: i
}
nodes.push(node);
})
}
this.nodes = function(val) {
if(val) {
data = val
}
newNodes();
return nodes;
}
this.sideLength = function(val) {
if(val) {
sideLength = val;
return this;
}
return sideLength;
}
}