johan · October 28, 2011 08:43
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; }
 #gist,
 #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: " "; }
 a + span:before  { content: ": "; }

 h1.nonblocks { margin-top: 1em; }

 .what,
 .nonblocks,
 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>
      <h1 class="nonblocks">Other, non-bl.ocks gists:</h1>
      <ul class="nonblocks" id="gist"></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="#mbostock">mbostock</a></li>
        <li>#<a href="#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
  , others = [] // all the other gists of the user
  ;

 init();

 top.onhashchange = init;

 function init() {
  owner = (top.location.hash || '#').slice(1) ||
          top.document.querySelector('a.owner').textContent;
  var hash = '#'+ owner;
  if ((document.body.className = owner ? '' : 'help')) {
    d3.selectAll('.what li a')
      .attr('href', function() {
        return top.location.href.replace(/(#.*)?$/, this.hash);
      });
    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 not(fn) { return function() { return !fn.apply(this, arguments) }; }

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

 function show(json) {
  gists = json.gists;

  draw('ul#list', blocks = gists.filter(is_block), 'http://bl.ocks.org/');
  draw('ul#gist', others = gists.filter(not(is_block)), 'https://gist.github.com/');

  var non = d3.selectAll('.nonblocks').style('display', 'none');
  if (!blocks.length) document.body.className = 'help';
  else if (others.length) non.style('display', 'inherit');

  d3.select(self.frameElement).style('height', document.body.offsetHeight +'px');
 }

 function draw(root, data, base_url) {
  var vis = d3.select(root).selectAll('li')
      .data(data)
    , 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 base_url + 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 || JSON.stringify(d.files); });
 }
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; }
	#gist,
	#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: " "; }
	a + span:before { content: ": "; }

	h1.nonblocks { margin-top: 1em; }

	.what,
	.nonblocks,
	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>
	<h1 class="nonblocks">Other, non-bl.ocks gists:</h1>
	<ul class="nonblocks" id="gist"></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="#mbostock">mbostock</a></li>
	<li>#<a href="#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
	, others = [] // all the other gists of the user
	;

	init();

	top.onhashchange = init;

	function init() {
	owner = (top.location.hash \|\| '#').slice(1) \|\|
	top.document.querySelector('a.owner').textContent;
	var hash = '#'+ owner;
	if ((document.body.className = owner ? '' : 'help')) {
	d3.selectAll('.what li a')
	.attr('href', function() {
	return top.location.href.replace(/(#.*)?$/, this.hash);
	});
	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 not(fn) { return function() { return !fn.apply(this, arguments) }; }

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

	function show(json) {
	gists = json.gists;

	draw('ul#list', blocks = gists.filter(is_block), 'http://bl.ocks.org/');
	draw('ul#gist', others = gists.filter(not(is_block)), 'https://gist.github.com/');

	var non = d3.selectAll('.nonblocks').style('display', 'none');
	if (!blocks.length) document.body.className = 'help';
	else if (others.length) non.style('display', 'inherit');

	d3.select(self.frameElement).style('height', document.body.offsetHeight +'px');
	}

	function draw(root, data, base_url) {
	var vis = d3.select(root).selectAll('li')
	.data(data)
	, 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 base_url + 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 \|\| JSON.stringify(d.files); });
	}
	// 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);
	}