Skip to content

Instantly share code, notes, and snippets.

@jzgit
Created October 14, 2013 04:02
Show Gist options
  • Save jzgit/6970551 to your computer and use it in GitHub Desktop.
Save jzgit/6970551 to your computer and use it in GitHub Desktop.
user page vanity edition
{"description":"user page vanity edition","endpoint":"","display":"div","public":true,"require":[],"fileconfigs":{"inlet.js":{"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},"style.css":{"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/rxbOTzD.png"}
var query = tributary.query;
var username = query.user || "zeffii";
var imgWidth = 32;
var imgHeight = 32;
var urlBase = "http://tributary.io"
var url = urlBase + "/api/user/" + username + "/latest?limit=200";
d3.json(url, function(err, inlets) {
render(inlets);
});
var dateFormat = d3.time.format("%m.%d.%Y")
var display = d3.select("#display");
display.append("div")
.classed("name", true)
.text(username);
function render(inlets) {
display.append("div")
.classed("count", true)
.text(inlets.length + " inlets")
//console.log(inlets);
var divs = display.selectAll("div.inlet")
.data(inlets)
var enter = divs
.enter()
.append("div")
.classed("inlet", true);
//TODO: default image for when no thumbnail exists
enter
.filter(function(d, i) { return d.thumbnail && d.thumbnail !== null; })
.append("img")
.classed("image", true)
.attr({
src: function(d) { return d.thumbnail },
width: imgWidth,
height: imgHeight
})
enter
.filter(function(d, i) { return (!d.thumbnail) || d.thumbnail === null; })
.style("margin-left", (imgWidth + 10) + "px");
enter.append("a")
.classed("description", true)
.attr({
href: function(d) { return urlBase + "/inlet/" + d.gistid },
target: "blank"
})
.text(function(d) { return d.description });
var detailDiv = enter.append("div")
.classed("details", true)
detailDiv.append("span")
.classed("stats", true)
.text(function(d) {
return " Visits: " + (d.visits === undefined ? 0 : d.visits)
+ " Forks: " + (d.nforks === undefined ? 0 : d.nforks)
})
detailDiv.append("span")
.classed("date", true)
.text(function(d) {
var date = new Date(d.createdAt);
return " " + dateFormat(date)
})
}
#display {
overflow: scroll
}
.name {
font-weight: 700;
font-size: 24px;
}
.inlet {
}
.inlet .description {
}
.inlet .date {
font-size: 10px;
}
.inlet img {
margin: 5px;
}
.stats {
font-size: 15px;
font-weight: bold;
margin-bottom:10px;
}
.image, .details{
display:inline;
vertical-align:middle;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment