Skip to content

Instantly share code, notes, and snippets.

@zanarmstrong

zanarmstrong/README.md

Last active November 8, 2015 20:12
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save zanarmstrong/5e4ac1a614ec3c201ab4 to your computer and use it in GitHub Desktop.
Save zanarmstrong/5e4ac1a614ec3c201ab4 to your computer and use it in GitHub Desktop.
Download ZIP
Starting Points w/ Data
Raw
README.md

I created this to easily share a list of bl.ocks w/ links.

Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<style>
body { background:#8d9ca4;margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
svg {width: 100%; height: 100%; }
image {cursor: pointer}
div {color: white; margin-left: 10; margin-top: 15}
</style>
</head>
<body>
<div>Click on a thumbnail to go to see that block on bl.ock.org</div>
<script>
var margin = {top: 20, right: 10, bottom: 20, left: 10};
var width = 980 - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var startingPoints = [
"susielu/b6bdb82045c2aa8225f5",
"mbostock/4063318",
"enjalot/95ffd65ad1d87d26cc69",
"georules/12e2db1c198cf45a3cac",
"syntagmatic/895eb781d88148cfd8e5",
"saraquigley/3069997",
"eesur/6a1bf1a119ed02c6abfa",
"nitaku/8ae3fd45fca0f18372d4",
"syntagmatic/91254c459602b31ba549",
"mbostock/3883195",
"enjalot/8681770",
"mbostock/248bac3b8e354a9103c4",
"zanarmstrong/08833a326224d41fbb96", "zanarmstrong/0f3f39deed0ee1653354", "zanarmstrong/0500075f337ab2ac3013",
"zanarmstrong/c9bb2842647140265d57",
"zanarmstrong/73c995405555f6b4d893/",
"jalapic/0a7c7b39d3ce6380f0d1",
"mbostock/3887118",
"enjalot/f8c41743ca81d7828c3a",
"zanarmstrong/00aeeb7079ff8a936d07",
"sxywu/4d221a4492f1377d32ce",
//"mbostock/4062006",
]
var regEx = /(\w+)\/(\w+)/
svg.selectAll("image").data(startingPoints).enter().append("image")
.attr("xlink:href", function(d) { return "http://bl.ocks.org/" + regEx.exec(d)[1] + "/raw/" + regEx.exec(d)[2] + "/thumbnail.png";})
.attr("x", function(d, i) { return (i % 4)*210;})
.attr("y", function(d, i){return Math.floor(i / 4)*125})
.attr("height", 115)
.attr("width", 200)
.on("click", function(d){window.open("http://blockbuilder.org/" + d)});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment