_.md

[ Launch: GitHub Repos ] 6130361 by audreyr

README.md

Watchers per repo, for each of my repos. Note: The GitHub API only lets me get the first few repos, so the list is incomplete.

Edit on Tributary.io

config.json

{"description":"Bar Chart of My First 29 GitHub Repos","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"README.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"index.html":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/d6SDi4x.png"}

index.html

<svg width="940" height="1000"></svg>
 
<style>
text {
  font: 10px sans-serif;
}
</style>
 
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="inlet.js"></script>

inlet.js

var data;
function calc_y(d) {
  return data.indexOf(d) * 30 + 20;
}
function calc_y_caption(d) {
  return calc_y(d) - 4;
}
d3.json("https://api.github.com/users/audreyr/repos", function(json) {
  data = json;
  var bar = d3.select("svg").selectAll(".bar")
    .data(json)
    .enter().append("g")
      .attr("class", "bar");
 
    bar.append("rect")
      .attr("x", 20)
      .attr("y", calc_y)
      .attr("width", function(d) { return d.watchers_count * 5 })
      .attr("height", 10)
      .style("fill", function(d) { return '#000000' });
      
    bar.append("text")
      .style("text-anchor", "start")
      .attr("x", 20)
      .attr("y", calc_y_caption)
      .text(function(d) { return d.name });
});