johan · October 28, 2011 04:55
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>Index of all bl.ocks.org pages owned by a github user</title>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.0.3"></script>
    <base target="_top">
    <style>
 body    { padding: 0.5em; margin: 0; }
 h1      { padding: 0; margin: 0; }
 #list   { padding: 0; margin: 1em 0 0; }
 a[href] { color: steelblue; background: none; text-decoration: none; }
 a[href]:hover { text-decoration: underline; }
 a[href]:visited { color: #63419A; }

 .created_at:after { content: " "; }
 .info:before     { content: ": "; }

 .what,
 body.help .list { display: none; }
 body.help .what { display: block; }
    </style>
  </head>
  <body>
    <div class="list">
      <h1>All bl.ocks by <a target="_blank" id="user">#...</a>:</h1>
      <ul id="list"></ul>
    </div>
    <div class="what">
      <h1>This page lists bl.ocks.org pages per github user</h1>
      <p>
        To see all gists that can be seen at
        <a href="http://bl.ocks.org/">bl.ocks.org</a> by some github user
        (i e: those of their gists which have an <code>index.html</code> file)
        just put their name at the end of this URL, prefixed with a "#".
        Examples:
      </p>
      <ul>
        <li>#<a href="http://bl.ocks.org/1321657#mbostock">mbostock</a></li>
        <li>#<a href="http://bl.ocks.org/1321657#johan">johan</a></li>
      </ul>
    </div>
    <script src='jsonp.js'></script>
    <script src='index.js'></script>
  </body>
 </html>
diff --git a/index.js b/index.js
 var owner  = '' // fetched from url hash
  , gists  = [] // all gists
  , blocks = [] // gists with an index.html file
  ;

 top.onhashchange = init;

 init();

 function init() {
  owner = (top.location.hash || '#').slice(1) ||
          top.document.querySelector('a.owner').textContent;
  var hash = '#'+ owner;
  if ((document.body.className = owner ? '' : 'help'))
    return;
  if (top.location.hash != hash)
    top.location.hash = hash;

  d3.select('#user')
    .attr('href', 'https://gist.github.com/'+ owner)
    .text(owner);

  JSONP('http://gist.github.com/api/v1/json/gists/'+ owner, show);
 }

 function is_block(gist) {
  return -1 !== gist.files.indexOf('index.html');
 }

 function show(json) {
  gists = json.gists;
  var vis = d3.select('ul#list').selectAll('li')
      .data(blocks = gists.filter(is_block))
    , lis = vis.enter().append('li')
    , out = vis.exit().remove();

  lis.append('span')
    .attr('class', 'created_at')
    .text(function(d) { return d.created_at; });

  lis.append('a')
    .attr('target', function(d) { return 'bl_ock_'+ d.repo; })
    .attr('href', function(d) { return 'http://bl.ocks.org/'+ d.repo; })
    .attr('class', 'block')
    .classed('private', function(d) { return !d.public; })
    .text(function(d) { return d.repo; });

  lis.append('span')
    .classed('info', function(d) { return !!d.description; })
    .text(function(d) { return d.description || ''; });

  if (!blocks.length) document.body.className = 'help';

  d3.select(self.frameElement).style('height', document.body.offsetHeight +'px');
 }
diff --git a/jsonp.js b/jsonp.js
 // calls `cb` with the data from `url`, which either ends with a "=" (for the callback),
 // or handles the standard "&callback=" query parameter, as well-organized JSON APIs do.
 function JSONP(url, cb) {
  var nth  = JSONP.nth = (JSONP.nth || 0) + 1
    , name = 'cb' + nth.toString(36)
    , tail = /=$/.test(url) ? '' : (/\?/.test(url) ? '&' : '?') + 'callback='
    , head = document.getElementsByTagName('head')[0]
    , load = document.createElement('script');

  JSONP[name] = function(json) {
     delete JSONP[name];
     head.removeChild(load);
     cb(json);
  };

  load.src =  url + tail + 'JSONP.'+ name;
  head.appendChild(load);
 }
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8">
	<title>Index of all bl.ocks.org pages owned by a github user</title>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.0.3"></script>
	<base target="_top">
	<style>
	body { padding: 0.5em; margin: 0; }
	h1 { padding: 0; margin: 0; }
	#list { padding: 0; margin: 1em 0 0; }
	a[href] { color: steelblue; background: none; text-decoration: none; }
	a[href]:hover { text-decoration: underline; }
	a[href]:visited { color: #63419A; }

	.created_at:after { content: " "; }
	.info:before { content: ": "; }

	.what,
	body.help .list { display: none; }
	body.help .what { display: block; }
	</style>
	</head>
	<body>
	<div class="list">
	<h1>All bl.ocks by <a target="_blank" id="user">#...</a>:</h1>
	<ul id="list"></ul>
	</div>
	<div class="what">
	<h1>This page lists bl.ocks.org pages per github user</h1>
	<p>
	To see all gists that can be seen at
	<a href="http://bl.ocks.org/">bl.ocks.org</a> by some github user
	(i e: those of their gists which have an <code>index.html</code> file)
	just put their name at the end of this URL, prefixed with a "#".
	Examples:
	</p>
	<ul>
	<li>#<a href="http://bl.ocks.org/1321657#mbostock">mbostock</a></li>
	<li>#<a href="http://bl.ocks.org/1321657#johan">johan</a></li>
	</ul>
	</div>
	<script src='jsonp.js'></script>
	<script src='index.js'></script>
	</body>
	</html>
	var owner = '' // fetched from url hash
	, gists = [] // all gists
	, blocks = [] // gists with an index.html file
	;

	top.onhashchange = init;

	init();

	function init() {
	owner = (top.location.hash \|\| '#').slice(1) \|\|
	top.document.querySelector('a.owner').textContent;
	var hash = '#'+ owner;
	if ((document.body.className = owner ? '' : 'help'))
	return;
	if (top.location.hash != hash)
	top.location.hash = hash;

	d3.select('#user')
	.attr('href', 'https://gist.github.com/'+ owner)
	.text(owner);

	JSONP('http://gist.github.com/api/v1/json/gists/'+ owner, show);
	}

	function is_block(gist) {
	return -1 !== gist.files.indexOf('index.html');
	}

	function show(json) {
	gists = json.gists;
	var vis = d3.select('ul#list').selectAll('li')
	.data(blocks = gists.filter(is_block))
	, lis = vis.enter().append('li')
	, out = vis.exit().remove();

	lis.append('span')
	.attr('class', 'created_at')
	.text(function(d) { return d.created_at; });

	lis.append('a')
	.attr('target', function(d) { return 'bl_ock_'+ d.repo; })
	.attr('href', function(d) { return 'http://bl.ocks.org/'+ d.repo; })
	.attr('class', 'block')
	.classed('private', function(d) { return !d.public; })
	.text(function(d) { return d.repo; });

	lis.append('span')
	.classed('info', function(d) { return !!d.description; })
	.text(function(d) { return d.description \|\| ''; });

	if (!blocks.length) document.body.className = 'help';

	d3.select(self.frameElement).style('height', document.body.offsetHeight +'px');
	}
	// calls `cb` with the data from `url`, which either ends with a "=" (for the callback),
	// or handles the standard "&callback=" query parameter, as well-organized JSON APIs do.
	function JSONP(url, cb) {
	var nth = JSONP.nth = (JSONP.nth \|\| 0) + 1
	, name = 'cb' + nth.toString(36)
	, tail = /=$/.test(url) ? '' : (/\?/.test(url) ? '&' : '?') + 'callback='
	, head = document.getElementsByTagName('head')[0]
	, load = document.createElement('script');

	JSONP[name] = function(json) {
	delete JSONP[name];
	head.removeChild(load);
	cb(json);
	};

	load.src = url + tail + 'JSONP.'+ name;
	head.appendChild(load);
	}