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
<!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>
<style>
body {
margin:0;position:fixed;top:0;right:0;bottom:0;left:0;
background-color: #111;
}
svg {
margin-left: 230px;
width: 500px; height: 100%;
background-color: #111;
}
#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 {
width: 220px;
margin-top:40px;
float:right;
color: white;
font-family: Courier new;
}
#description {
font-weight: bold;
}
#thumbnail {
width: 200px;
}
#link {
text-decoration: none;
color: white;
}
#author {
color: white;
}
.hidden {display: none;}
.selected {
fill: #ff8300;
stroke: #ff8300;
}
#filtered {
fill: white;
font-family: Courier new;
font-size: 12px;
}
</style>
</head>
<body>
<div id="controls">
</div>
<svg>
<text id="filtered" x=10 y=30></text>
</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>
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 bbox = svg.node().getBoundingClientRect();
var width = bbox.width;
var height = bbox.height;
var blockWidth = 7;
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
function render() {
var data = created.top(Infinity);
var boxes = svg.selectAll("rect.box")
.data(data, function(d) { return d.id })
boxes.enter().append("rect").classed("box", true);
boxes.exit().remove();
boxes.attr({
x: function(d,i) { return 10 + (i % cols) * (blockWidth + margin) },
y: function(d,i) { return 40 + Math.floor(i/cols) * (blockWidth + margin - 3)},
width: function(d,i) { return blockWidth },
height: function(d,i) { return blockWidth - 3 },
fill: function(d) {
if(d.thumbnail) {
return "#00c687"
} else {
return "#d0e6f0"
}
}
})
.on("mouseover", function(d,i) {
console.log(i,d);
if(selected) return;
select(d);
})
.on("click", function(d,i) {
boxes.classed("selected", false)
if(selected === d.id) {
//d3.select(this).classed("selected", false)
return selected = null;
}
selected = d.id;
d3.select(this).classed("selected", true)
select(d)
})
}
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>
["d3.ascending","d3.behavior.drag","d3.behavior","d3.behavior.zoom","d3.bisect","d3.bisectLeft","d3.bisectRight","d3.bisector","d3.box","d3.bullet","d3.chart","d3.chernoff","d3.csv.format","d3.csv","d3.csv.parse","d3.csv.parseRows","d3.descending","d3.deviation","d3.dispatch","d3.dsv","d3.ease","d3.entries","d3.event","d3.event.keyCode","d3.extent","d3.fisheye","d3.force_labels","d3.format","d3.formatPrefix","d3.functor","d3.geo.airy","d3.geo.aitoff","d3.geo.albers","d3.geo.albersUsa","d3.geo.area","d3.geo.armadillo","d3.geo.august","d3.geo.azimuthalEqualArea","d3.geo.azimuthalEqualArea.raw","d3.geo.azimuthalEquidistant","d3.geo.azimuthalEquidistant.raw","d3.geo.baker","d3.geo.berghaus","d3.geo.boggs","d3.geo.bonne","d3.geo.bounds","d3.geo.bromley","d3.geo.centroid","d3.geo.chamberlin","d3.geo.circle","d3.geo.clipExtent","d3.geo.collignon","d3.geo.conicConformal","d3.geo.conicEqualArea","d3.geo.conicEqualArea.raw","d3.geo.conicEquidistant","d3.geo.craig","d3.geo.craster","d3.geo.cylindricalEqualArea","d3.geo.cylindricalStereographic","d3.geo.distance","d3.geo.eckert1","d3.geo.eckert2","d3.geo.eckert3","d3.geo.eckert4","d3.geo.eckert5","d3.geo.eckert6","d3.geo.eisenlohr","d3.geo.equirectangular","d3.geo.fahey","d3.geo.foucaut","d3.geo.gilbert","d3.geo.ginzburg4","d3.geo.ginzburg5","d3.geo.ginzburg6","d3.geo.ginzburg8","d3.geo.ginzburg9","d3.geo.gnomonic","d3.geo.gnomonic.raw","d3.geo.graticule","d3.geo.greatArc","d3.geo.gringorten","d3.geo.guyou","d3.geo.hammer","d3.geo.hammerRetroazimuthal","d3.geo.healpix","d3.geo.hill","d3.geo.homolosine","d3.geo.interpolate","d3.geo","d3.geo.kavrayskiy7","d3.geo.lagrange","d3.geo.larrivee","d3.geo.laskowski","d3.geo.length","d3.geo.littrow","d3.geo.loximuthal","d3.geo.mercator","d3.geo.miller","d3.geo.modifiedStereographic","d3.geo.mollweide","d3.geo.mtFlatPolarParabolic","d3.geo.mtFlatPolarQuartic","d3.geo.mtFlatPolarSinusoidal","d3.geo.naturalEarth","d3.geo.nellHammer","d3.geo.orthographic","d3.geo.path","d3.geo.peirceQuincuncial","d3.geo.polyconic","d3.geo.polyhedron.butterfly","d3.geo.polyhedron","d3.geo.polyhedron.waterman","d3.geo.projection","d3.geo.projectionMutator","d3.geo.rectangularPolyconic","d3.geo.robinson","d3.geo.rotation","d3.geo.satellite","d3.geo.sinuMollweide","d3.geo.sinusoidal","d3.geo.stereographic","d3.geo.stream","d3.geo.tile","d3.geo.times","d3.geo.transform","d3.geo.transverseMercator","d3.geo.twoPointAzimuthal","d3.geo.twoPointEquidistant","d3.geo.vanDerGrinten","d3.geo.vanDerGrinten2","d3.geo.vanDerGrinten3","d3.geo.vanDerGrinten4","d3.geo.wagner4","d3.geo.wagner6","d3.geo.wagner7","d3.geo.wiechel","d3.geo.winkel3","d3.geodesic","d3.geom.contour","d3.geom.delaunay","d3.geom.hull","d3.geom","d3.geom.polygon","d3.geom.quadtree","d3.geom.voronoi","d3.graph","d3.hcl","d3.hexbin","d3.hive","d3.horizon","d3.hsl","d3.html","d3.interpolate","d3.interpolateArray","d3.interpolateHcl","d3.interpolateHsl","d3.interpolateLab","d3.interpolateNumber","d3.interpolateObject","d3.interpolateRgb","d3.interpolateRound","d3.interpolateString","d3.interpolateTransform","d3.interpolateZoom","d3.interpolators","d3.json","d3.keys","d3.lab","d3.layout.bundle","d3.layout.chord","d3.layout.cluster","d3.layout.force","d3.layout.hierarchy","d3.layout.histogram","d3.layout","d3.layout.pack","d3.layout.partition","d3.layout.pie","d3.layout.stack","d3.layout.tree","d3.layout.treemap","d3.locale","d3.longscroll","d3.map","d3.max","d3.mean","d3.median","d3.merge","d3.min","d3.mouse","d3.nest","d3.ns","d3.ns.prefix","d3.ns.qualify","d3.pairs","d3.permute","d3.qq","d3.quantile","d3.random.bates","d3.random.irwinHall","d3.random.logNormal","d3.random.normal","d3.range","d3.rebind","d3.requote","d3.rgb","d3.rollup","d3.round","d3.sankey","d3.scale.category","d3.scale.identity","d3.scale","d3.scale.linear","d3.scale.log","d3.scale.ordinal","d3.scale.pow","d3.scale.quantile","d3.scale.quantize","d3.scale.sqrt","d3.scale.threshold","d3.select","d3.selectAll","d3.selection","d3.set","d3.shuffle","d3.sum","d3.superformula","d3.svg.arc","d3.svg.area","d3.svg.area.radial","d3.svg.axis","d3.svg.brush","d3.svg.chord","d3.svg.diagonal","d3.svg.diagonal.radial","d3.svg","d3.svg.line","d3.svg.line.radial","d3.svg.symbol","d3.svg.symbolTypes","d3.text","d3.time.day","d3.time.dayOfYear","d3.time.days","d3.time.format.iso","d3.time.format","d3.time.format.multi","d3.time.format.utc","d3.time.hour","d3.time.hours","d3.time.interval","d3.time","d3.time.minute","d3.time.minutes","d3.time.monday","d3.time.mondayOfYear","d3.time.mondays","d3.time.month","d3.time.months","d3.time.saturday","d3.time.scale","d3.time.second","d3.time.seconds","d3.time.sunday","d3.time.sundayOfYear","d3.time.week","d3.time.weekOfYear","d3.time.weeks","d3.time.year","d3.time.years","d3.timer.flush","d3.timer","d3.touch","d3.touches","d3.transform","d3.transition","d3.transpose","d3.tsv.format","d3.tsv","d3.tsv.parse","d3.values","d3.variance","d3.xhr","d3.xml","d3.zip"]