A collection of blocks scanned with blockscanner for the bl.ocksplorer.org project and further processed with block-similarity.
mbostock, enjalot, syntagmatic, emeeks, nitaku
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
forked from enjalot‘s block: block wall: filter user
<!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:none;
}
#blocks {
position: absolute;
top: 40px;
left: 10px;
}
.block {
position:absolute;
width: 9px;
height: 7px;
text-decoration: none;
line-height: 9px;
}
.block a {
text-decoration: none;
}
#user {
position: absolute;
top: 10px;
left: 10px;
width: 200px;
}
#hover {
color: white;
font-size: 11px;
font-family: Courier new;
float:right;
margin: 5px;
}
</style>
</head>
<body>
<input id="user" placeholder="GitHub username">
<div id="hover"></div>
<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 layout = new hilbert()
// .sideLength(9)
var layout = new grid()
.cellWidth(9)
.cellHeight(7)
.width(938)
.margin([1, 1])
//.offset([0, 28])
.brick(true)
//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 color = d3.scale.linear()
.domain([0, data.length])
.range(["#a8ff60", "#0600cc"])
.interpolate(d3.interpolateHcl)
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);
},*/
"background-color": function(d,i) {
return color(i);
}
}).on("click", function(d,i) {
console.log(d);
window.open("//bl.ocks.org/" + d.data.userId + "/" + d.data.id);
}).on("mouseover", function(d,i) {
// select
var desc = d.data.description || "";
desc = desc.slice(0, 40);
if(d3.select(this).style("opacity") == 1)
d3.select("#hover").text(desc + " by: " + d.data.userId + " " + d.data.id)
})
d3.select("#user").on("keydown", function() {
var that = this;
setTimeout(function() {
var val = that.value.toLowerCase();
d3.select("#hover").text("");
author.filter(function(d) {
return d.toLowerCase().indexOf(val) >= 0;
})
var matched = author.top(Infinity)
var ids = matched.map(function(d) { return d.id });
d3.select("#blocks").selectAll("div.block")
.transition().duration(400)
.style("opacity", 0.1)
var filtered = d3.select("#blocks").selectAll("div.block")
.filter(function(d) { return ids.indexOf(d.data.id) >= 0 })
.transition().duration(100)
.style("opacity", 1)
}, 10);
})
})
</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;
}
}
function grid() {
var data = []
var nodes;
var width = 100;
var cellWidth = 10;
var cellHeight = 10;
var nColumns = 10;
var offset = [0,0];
var margin = [1,1];
var brick = false;
function getX(d,i) {
return offset[0] + (i % nColumns) * (cellWidth + margin[0])
}
function getY(d,i) {
return offset[1] + Math.floor(i/nColumns) * (cellHeight + margin[1])
}
function newNodes() {
nodes = [];
data.forEach(function(d,i) {
var node = {
x: getX(d,i),
y: getY(d,i),
data: d,
index: i
}
nodes.push(node);
})
}
newNodes();
function calculate() {
nodes.forEach(function(node, i) {
node.x = getX(node, node.index);
node.y = getY(node, node.index);
// calculate the center for convenience
node.cx = node.x + cellWidth/2;
node.cy = node.x + cellHeight/2;
})
}
this.nodes = function(val) {
if(val) {
data = val;
newNodes();
}
calculate();
return nodes;
}
this.columns = function(val) {
}
this.cellWidth = function(val) {
if(val) {
cellWidth = val;
this.width(width);
return this;
}
return cellWidth;
}
this.cellHeight = function(val) {
if(val) {
cellHeight = val;
return this;
}
return cellHeight;
}
this.width = function(val) {
if(val) {
width = val;
nColumns = Math.floor((width) / (cellWidth + margin[0])) + (brick ? 0.5 : 0);
//cellWidth = val / nColumns;
return this;
}
return width;
}
this.margin = function(val) {
if(val) {
margin = val;
this.width(width);
return this;
}
return margin;
}
this.offset = function(val) {
if(val) {
offset = val;
return this;
}
return offset;
}
this.brick = function(val) {
if(val === null || val === undefined) return brick;
if(val !== null) {
brick = val;
this.width(width);
return this;
}
return brick;
}
return this;
}