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
<!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="fisheye.js"></script>
<style>
body {
margin:0;position:fixed;top:0;right:0;bottom:0;left:0;
background-color: #111;
}
#display {
left: 230px;
position: absolute;
width: calc(100% - 250px);
height: 100%;
}
#controls {
padding-top: 10px;
padding-left: 10px;
width: 220px;
height: 480px;
float:left;
color: white;
position: absolute;
overflow-y: scroll;
}
#controls span {
float: left;
margin: 2px;
font-family: Courier new;
font-size: 10px;
text-decoration: underline;
cursor: pointer;
}
#block {
position: absolute;
top: 20px;
right: 40px;
color: white;
font-family: Courier new;
pointer-events: none;
}
#description {
font-weight: bold;
}
#thumbnail {
width: 200px;
}
#link {
text-decoration: none;
color: white;
}
#author {
color: white;
}
.hidden {display: none;}
.selected {
background-color: #ff8300 !important;
border: 1px solid #ff8300;
}
#filtered {
position: absolute;
left: 240px;
top: 20px;
color: white;
font-family: Courier new;
font-size: 12px;
}
.box {
position: absolute;
border: 1px solid #111;
background-size: auto 100%;
background-repeat: no-repeat;
}
.box a {
display: inline-block;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="controls">
</div>
<div id="filtered"></div>
<div id="display">
</div>
<svg>
</svg>
<div id="block">
<a id="link" target=_blank>
<span id="description"></span>
</a>
<!--
<img id="thumbnail">
<br>
-->
by
<a id="author" target=_blank></a>
<br>
</div>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
d3.json("blocks.json", function(err, blocks) {
var functions = {}
blocks.forEach(function(d) {
var fns = Object.keys(d.api)
fns.forEach(function(fn) {
if(!functions[fn]) functions[fn] = 0;
functions[fn]++;
})
})
var fns = [];
var functionNames = Object.keys(functions);
functionNames.forEach(function(fn) {
fns.push({name: fn, count: functions[fn] })
})
fns.sort(function(a,b) { return b.count - a.count });
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 api = xf.dimension(function(d) { return d.api });
var svg = d3.select("svg");
var display = d3.select("#display");
var bbox = display.node().getBoundingClientRect();
var width = bbox.width;
var height = bbox.height;
var blockWidth = 8;
var blockHeight = 5;
var margin = 1;
var cols = Math.floor((width - 30) / (blockWidth + margin)) + 0.5;
var selected; //for managing which block is selected
var filtered; //for managing which api function is filtered
var fisheye = d3.fisheye.circular()
.radius(80)
.distortion(25)
function getX(i) {
return 10 + (i % cols) * (blockWidth + margin)
}
function getY(i) {
return 40 + Math.floor(i/cols) * (blockHeight + margin)
}
function render() {
var data = created.top(Infinity);
var boxes = display.selectAll("div.box")
.data(data, function(d) { return d.id })
var boxesEnter = boxes.enter().append("div").classed("box", true);
boxesEnter.append("a")
.attr({
href: function(d) { return "//blockbuilder.org/" + d.userId + "/" + d.id },
target: "_blank"
})
boxes.exit().remove();
boxes.style({
left: function(d,i) { return getX(i) + "px" },
top: function(d,i) { return getY(i) + "px"},
width: function(d,i) { return blockWidth + "px" },
height: function(d,i) { return blockHeight + "px" },
"background-color": function(d) {
if(d.thumbnail) {
return "#00c687"
} else {
return "#143542"
}
}
})
.on("mouseover", function(d,i) {
console.log(i,d);
select(d);
})
display.on("mousemove", function() {
fisheye.focus(d3.mouse(display.node()))
boxes.each(function(d,i) {
var fe = fisheye({ x: getX(i), y: getY(i) })
var bg = ""
if(fe.z > 3 && d.thumbnail ) {
bg = "url(" + d.thumbnail + ")";
}
d3.select(this).style({
left: fe.x + "px",
top: fe.y + "px",
width: Math.ceil(fe.z * blockWidth) + "px",
height: Math.ceil(fe.z * blockHeight) + "px",
"background-image": bg
})
})
})
}
render()
function select(d) {
var block = d3.select("#block");
/*
var thumbnail = block.select("#thumbnail");
if(d.thumbnail) {
thumbnail.attr("src", d.thumbnail)
.classed("hidden", false)
} else {
thumbnail.attr("src", "")
.classed("hidden", true)
}
*/
var desc = d.description || d.id;
block.select("#description").text(desc);
block.select("#link").attr("href", "//blockbuilder.org/" + d.userId + "/" + d.id);
block.select("#author")
.text(d.userId)
.attr("href", "//bl.ocks.org/" + d.userId)
}
var controls = d3.select("#controls")
controls.selectAll("span.api")
.data(fns)
.enter()
.append("span").classed("api", true)
.text(function(d) {
return d.name + " " + d.count;
}).on("click", function(d) {
apiText(d)
render()
})
function apiText(d) {
if(filtered === d.name) {
api.filter(null);
filtered = null;
} else {
filtered = d.name;
api.filter(function(a) {
return !!a[d.name];
})
}
var txt;
if(filtered) {
txt = filtered + " " + d.count
} else {
txt = blocks.length;
}
console.log(txt)
d3.select("#filtered").text(txt)
}
apiText({})
})
})
</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");
}
})()