block by bollwyvl ee55f546324a81405159

ee55f546324a81405159

Full Screen

An interactive version of a Reingold–Tilford tree. Click on the nodes to expand or collapse.

Modifications

Very minor tweaks were made to create a collapsible tree of a dict-like object.

index.html

<!DOCTYPE html>
<head>
  <title>list gists</title>
  <meta charset="utf-8">
  <style>
    @import "//cdn.jsdelivr.net/g/bootstrap(css/bootstrap.min.css+css/bootstrap-theme.min.css)";
    body {padding-top: 70px;}
  </style>
</head>

<body>
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Username" id="user">
        </div>
      </div>
    </div>
  </nav>

  <div class="files container"></div>

  <script src="//cdn.jsdelivr.net/g/d3js,lodash,momentjs,handlebarsjs(handlebars.min.js)">
  </script>

  <script id="gist" type="text/x-handlebars-template">
    <div class="panel panel-default">
      <div class="panel-heading">
        <span class="panel-title">
          <a href="{{html_url}}">{{description}}</a>
        </span>
        <div class="pull-right">

        </div>
      </div>
      <div class="panel-body">
        {{#each files}}
          <a href="{{raw_url}}">{{filename}} :: {{size}}</a>&nbsp;
        {{/each}}
      </div>
      <div class="panel-footer">
        <div class="row">
          <div class="col-md-6 text-muted">
            Updated <span class="badge">{{fromNow updated_at}}</span>
          </div>
          <div class="col-md-6 text-muted text-right">
            Created <span class="badge">{{fromNow created_at}}</span>
          </div>
        </div>
      </div>
    </div>
  </script>

  <script>
    //iife to force wait for load
    ;(function(){
      Handlebars.registerHelper("fromNow", function(datetime) {
        return moment(datetime).fromNow();
      });

      // let d3 handle the selection management
      var files = d3.select('.files').selectAll('.gist');

      // it's always the same
      var template = Handlebars.compile(d3.select('#gist').html());

      var delay = function(d, i){ return i * 50; };

      var render = function(e, gists) {
        if (e){
          return console.warn(e);
        }

        files.remove();

        // rebind! note the reassignment... dirty, but works!
        files = files.data(gists.slice(0, 100), function(d){ return d.id; });

        // html
        files.enter().append('div')
          .classed({gist: true, row: true})
          .style({opacity: 0})
        .transition().delay(delay)
          .style({opacity: 1.0});

        files.html(template);
      };

      var get = function(url){
        d3.json(url, render);
      };

      // wire up the listener
      var input = d3.select("#user")
        .on("change", function(){
          get('https://api.github.com/users/' + input.property("value") + '/gists');
        });

      // intialize with some data
      get("./user.json");
    })();
  </script>
</body>

user.json

[
  {
    "url": "https://api.github.com/gists/f7c69bda4418117bae72",
    "forks_url": "https://api.github.com/gists/f7c69bda4418117bae72/forks",
    "commits_url": "https://api.github.com/gists/f7c69bda4418117bae72/commits",
    "id": "f7c69bda4418117bae72",
    "git_pull_url": "https://gist.github.com/f7c69bda4418117bae72.git",
    "git_push_url": "https://gist.github.com/f7c69bda4418117bae72.git",
    "html_url": "https://gist.github.com/f7c69bda4418117bae72",
    "files": {
      "query.js": {
        "filename": "query.js",
        "type": "application/javascript",
        "language": "JavaScript",
        "raw_url": "https://gist.githubusercontent.com/tonyfast/f7c69bda4418117bae72/raw/5a759e6b982974963c9f6aa8dad3bf818e053113/query.js",
        "size": 265
      }
    },
    "public": true,
    "created_at": "2014-12-16T20:14:27Z",
    "updated_at": "2014-12-16T20:14:28Z",
    "description": "Get Query Parameters from url",
    "comments": 0,
    "user": null,
    "comments_url": "https://api.github.com/gists/f7c69bda4418117bae72/comments",
    "owner": {
      "login": "tonyfast",
      "id": 4236275,
      "avatar_url": "https://avatars.githubusercontent.com/u/4236275?v=3",
      "gravatar_id": "",
      "url": "https://api.github.com/users/tonyfast",
      "html_url": "https://github.com/tonyfast",
      "followers_url": "https://api.github.com/users/tonyfast/followers",
      "following_url": "https://api.github.com/users/tonyfast/following{/other_user}",
      "gists_url": "https://api.github.com/users/tonyfast/gists{/gist_id}",
      "starred_url": "https://api.github.com/users/tonyfast/starred{/owner}{/repo}",
      "subscriptions_url": "https://api.github.com/users/tonyfast/subscriptions",
      "organizations_url": "https://api.github.com/users/tonyfast/orgs",
      "repos_url": "https://api.github.com/users/tonyfast/repos",
      "events_url": "https://api.github.com/users/tonyfast/events{/privacy}",
      "received_events_url": "https://api.github.com/users/tonyfast/received_events",
      "type": "User",
      "site_admin": false
    }
  },
  {
    "url": "https://api.github.com/gists/f2d83a03551d26bc57f2",
    "forks_url": "https://api.github.com/gists/f2d83a03551d26bc57f2/forks",
    "commits_url": "https://api.github.com/gists/f2d83a03551d26bc57f2/commits",
    "id": "f2d83a03551d26bc57f2",
    "git_pull_url": "https://gist.github.com/f2d83a03551d26bc57f2.git",
    "git_push_url": "https://gist.github.com/f2d83a03551d26bc57f2.git",
    "html_url": "https://gist.github.com/f2d83a03551d26bc57f2",
    "files": {
      "README.md": {
        "filename": "README.md",
        "type": "text/plain",
        "language": "Markdown",
        "raw_url": "https://gist.githubusercontent.com/tonyfast/f2d83a03551d26bc57f2/raw/86092a26be3e9c11a0a7091cc42c1ddaae77ff67/README.md",
        "size": 66
      },
      "handlebars.js": {
        "filename": "handlebars.js",
        "type": "application/javascript",
        "language": "JavaScript",
        "raw_url": "https://gist.githubusercontent.com/tonyfast/f2d83a03551d26bc57f2/raw/f826bbfd3879d006111ddaf0def6a05a2c329078/handlebars.js",
        "size": 100900
      },
      "index.html": {
        "filename": "index.html",
        "type": "text/html",
        "language": "HTML",
        "raw_url": "https://gist.githubusercontent.com/tonyfast/f2d83a03551d26bc57f2/raw/beeb556b545ea42be2fa1ded9b5bd2fcd98b31f4/index.html",
        "size": 318
      },
      "jquery.js": {
        "filename": "jquery.js",
        "type": "application/javascript",
        "language": "JavaScript",
        "raw_url": "https://gist.githubusercontent.com/tonyfast/f2d83a03551d26bc57f2/raw/9f7b3d38958726758eddc89880d50db98e11cfac/jquery.js",
        "size": 247351
      },
      "jsyaml.js": {
        "filename": "jsyaml.js",
        "type": "application/javascript",
        "language": "JavaScript",
        "raw_url": "https://gist.githubusercontent.com/tonyfast/f2d83a03551d26bc57f2/raw/f518f133dd07d9f6e2873ac34c7ccac26b6ff98c/jsyaml.js",
        "size": 92370
      },
      "main.js": {
        "filename": "main.js",
        "type": "application/javascript",
        "language": "JavaScript",
        "raw_url": "https://gist.githubusercontent.com/tonyfast/f2d83a03551d26bc57f2/raw/868332bd4330189dcdb19a088481573dc2c47edc/main.js",
        "size": 2258
      },
      "markdown.js": {
        "filename": "markdown.js",
        "type": "application/javascript",
        "language": "JavaScript",
        "raw_url": "https://gist.githubusercontent.com/tonyfast/f2d83a03551d26bc57f2/raw/7412794ae3df971e2abb66fc99015bd62a826f0a/markdown.js",
        "size": 57341
      },
      "readme.md": {
        "filename": "readme.md",
        "type": "text/plain",
        "language": "Markdown",
        "raw_url": "https://gist.githubusercontent.com/tonyfast/f2d83a03551d26bc57f2/raw/3a0c1566bdb2e299cd4b4025c01e4404602898be/readme.md",
        "size": 144
      },
      "require.js": {
        "filename": "require.js",
        "type": "application/javascript",
        "language": "JavaScript",
        "raw_url": "https://gist.githubusercontent.com/tonyfast/f2d83a03551d26bc57f2/raw/77a5bb1d3be75c2f6e0d7f8484d00b890319da0f/require.js",
        "size": 83083
      },
      "underscore.js": {
        "filename": "underscore.js",
        "type": "application/javascript",
        "language": "JavaScript",
        "raw_url": "https://gist.githubusercontent.com/tonyfast/f2d83a03551d26bc57f2/raw/b4f49a0204cae8f267d9ae0f3009d9a485c1ba46/underscore.js",
        "size": 47559
      }
    },
    "public": true,
    "created_at": "2014-12-15T03:49:02Z",
    "updated_at": "2014-12-20T19:06:02Z",
    "description": "Load Structured Data in Gist and Parse the Markdownified text with Moustache notation",
    "comments": 0,
    "user": null,
    "comments_url": "https://api.github.com/gists/f2d83a03551d26bc57f2/comments",
    "owner": {
      "login": "tonyfast",
      "id": 4236275,
      "avatar_url": "https://avatars.githubusercontent.com/u/4236275?v=3",
      "gravatar_id": "",
      "url": "https://api.github.com/users/tonyfast",
      "html_url": "https://github.com/tonyfast",
      "followers_url": "https://api.github.com/users/tonyfast/followers",
      "following_url": "https://api.github.com/users/tonyfast/following{/other_user}",
      "gists_url": "https://api.github.com/users/tonyfast/gists{/gist_id}",
      "starred_url": "https://api.github.com/users/tonyfast/starred{/owner}{/repo}",
      "subscriptions_url": "https://api.github.com/users/tonyfast/subscriptions",
      "organizations_url": "https://api.github.com/users/tonyfast/orgs",
      "repos_url": "https://api.github.com/users/tonyfast/repos",
      "events_url": "https://api.github.com/users/tonyfast/events{/privacy}",
      "received_events_url": "https://api.github.com/users/tonyfast/received_events",
      "type": "User",
      "site_admin": false
    }
  },
  {
    "url": "https://api.github.com/gists/242af9bda2517a9179c0",
    "forks_url": "https://api.github.com/gists/242af9bda2517a9179c0/forks",
    "commits_url": "https://api.github.com/gists/242af9bda2517a9179c0/commits",
    "id": "242af9bda2517a9179c0",
    "git_pull_url": "https://gist.github.com/242af9bda2517a9179c0.git",
    "git_push_url": "https://gist.github.com/242af9bda2517a9179c0.git",
    "html_url": "https://gist.github.com/242af9bda2517a9179c0",
    "files": {
      "blog-to-data.ipynb": {
        "filename": "blog-to-data.ipynb",
        "type": "text/plain",
        "language": null,
        "raw_url": "https://gist.githubusercontent.com/tonyfast/242af9bda2517a9179c0/raw/cee90a51fc1b8fa66e3ea463205c6000f7fd0e8b/blog-to-data.ipynb",
        "size": 18955
      },
      "readme.md": {
        "filename": "readme.md",
        "type": "text/plain",
        "language": "Markdown",
        "raw_url": "https://gist.githubusercontent.com/tonyfast/242af9bda2517a9179c0/raw/57d320fcc671f49106b64ece601870dc33c03c97/readme.md",
        "size": 114
      }
    },
    "public": true,
    "created_at": "2014-12-01T19:09:24Z",
    "updated_at": "2014-12-03T13:08:50Z",
    "description": "Using Jekyll blog posts as data in Python",
    "comments": 0,
    "user": null,
    "comments_url": "https://api.github.com/gists/242af9bda2517a9179c0/comments",
    "owner": {
      "login": "tonyfast",
      "id": 4236275,
      "avatar_url": "https://avatars.githubusercontent.com/u/4236275?v=3",
      "gravatar_id": "",
      "url": "https://api.github.com/users/tonyfast",
      "html_url": "https://github.com/tonyfast",
      "followers_url": "https://api.github.com/users/tonyfast/followers",
      "following_url": "https://api.github.com/users/tonyfast/following{/other_user}",
      "gists_url": "https://api.github.com/users/tonyfast/gists{/gist_id}",
      "starred_url": "https://api.github.com/users/tonyfast/starred{/owner}{/repo}",
      "subscriptions_url": "https://api.github.com/users/tonyfast/subscriptions",
      "organizations_url": "https://api.github.com/users/tonyfast/orgs",
      "repos_url": "https://api.github.com/users/tonyfast/repos",
      "events_url": "https://api.github.com/users/tonyfast/events{/privacy}",
      "received_events_url": "https://api.github.com/users/tonyfast/received_events",
      "type": "User",
      "site_admin": false
    }
  }
]