[ Launch: crossfilter racetrack ] 5497812 by enoex
[ Launch: crossfilter racetrack ] 5072003 by enjalot
[ Launch: crossfilter racetrack ] 5061827 by enjalot
[ Launch: crossfilter racetrack ] 4624910 by zeffii
[ Launch: Another Inlet ] 4618198 by enjalot
-
-
Save erikhazzard/5497812 to your computer and use it in GitHub Desktop.
crossfilter racetrack
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//manually updating the font size for now :) | |
var fontSize = 14; | |
// pick which editor tab to change the font size for. | |
var cm = tributary.getCodeEditor("inlet.js") | |
if(cm) { | |
var wrap = cm.getWrapperElement(); | |
d3.select(wrap).select(".CodeMirror-scroll") | |
.style({ | |
"font-size": fontSize + "px", | |
"line-height": fontSize + "px" | |
}) | |
cm.refresh(); | |
} | |
//font | |
WebFontConfig = { | |
google: { families: [ 'Roboto:400,100:latin' ] } | |
}; | |
(function() { | |
var wf = document.createElement('script'); | |
var dlp = document.location.protocol; | |
wf.src = ('https:' == dlp ? 'https' : 'http') + | |
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; | |
wf.type = 'text/javascript'; | |
wf.async = 'true'; | |
var s = document.getElementsByTagName('script')[0]; | |
s.parentNode.insertBefore(wf, s); | |
})(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"description":"crossfilter racetrack","endpoint":"","display":"svg","public":true,"require":[{"name":"xf filter function","url":"http://enjalot.github.com/crossfilter/crossfilter.min.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"cars.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"conf.js":{"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,"tab":"edit","display_percent":0.46399999999999975} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var margin = {top: 114, right: 130, bottom: 2, left: 168}, | |
extent_width = tributary.sw -20, | |
width = extent_width - margin.left - margin.right, | |
height = 836 - margin.top - margin.bottom; | |
var usersSorted, usersList; | |
var boxWidth = 7, | |
boxHeight = 4; | |
var trib_url = 'http://tributary.io/', | |
users_url = trib_url + 'api/users', | |
created_url = trib_url + 'api/latest/created/?limit=1000', | |
trib_inlet = trib_url + 'inlet/'; | |
var iso = d3.time.format.utc("%Y-%m-%dT%H:%M:%S.%LZ").parse; | |
// https://github.com/square/crossfilter/wiki/API-Reference | |
var xf = crossfilter(); | |
var users = xf.dimension(function(d) { return d.user.login }); | |
var created = xf.dimension(function(d) { return d.createdAt }); | |
var visits = xf.dimension(function(d) { return d.visits }); | |
var nforks = xf.dimension(function(d) { return d.nforks }); | |
var parent = xf.dimension(function(d) { return d.parent }); | |
// brush setup (slider) | |
var xscale = d3.scale.linear() | |
.range([0, width]); | |
var brush = d3.svg.brush() | |
.on("brush", function() { | |
var extent = brush.extent(); | |
extent[1] += 5 | |
created.filterRange(extent); | |
update_content(); | |
}) | |
.x(xscale) | |
.extent([0.85, 1]) | |
//grab the users | |
function getUsers() { | |
d3.json(users_url, function(err, res) { | |
tributary.users = {}; | |
tributary.userList = res; | |
res.forEach(function(u) { | |
tributary.users[u.login] = u; | |
}) | |
///render(); | |
}) | |
} | |
if(!tributary.users) { | |
getUsers(); | |
} | |
function init_data() { | |
xf.add(tributary.inlets); | |
var usersGroup = users.group(); | |
usersSorted = usersGroup.all().sort(function(a,b) { | |
return a.value < b.value ? 1 : -1 | |
}) | |
usersList = _.map(usersSorted, function(d) { return d.key }); | |
xscale.domain(d3.extent(created.top(Infinity), function(d) { | |
return d.createdAt })); | |
//console.log([.85 * xscale.invert(width), xscale.invert(width)]) | |
created.filterRange([ | |
0.85 * (xscale.invert(width) - xscale.invert(0)) + xscale.invert(0), | |
xscale.invert(width)+5 | |
]); | |
} | |
//initialize chart containers | |
var svg = d3.select("svg"); | |
var userBars = svg.append("g") | |
.classed("userBars", true) | |
.attr("transform", translate(0, margin.top)) | |
svg.append("g") | |
.classed("usernames", true) | |
.attr("transform", translate(width, margin.top)) | |
var box = svg.append("g") | |
.classed("funky", true) | |
.attr("width", width + margin.left + margin.right) | |
.attr("height", height + margin.top + margin.bottom) | |
.attr("transform", translate(margin.left, margin.top)); | |
var barChart = svg.append("g") | |
.attr({ | |
transform: translate(10, margin.top) | |
}) | |
box.append("g").attr({ | |
"class": "x axis", | |
"transform": translate(0, height) | |
}) | |
box.append("g").attr({ | |
"class": "x2 axis", | |
"transform": translate(0, -42) | |
}) | |
var slider = svg.append("g") | |
.attr("transform", translate(margin.left,35)); | |
brush(slider); | |
slider.selectAll("rect.background") | |
.attr("height", 32); | |
slider.selectAll("g.resize rect") | |
.attr("height", 32); | |
slider.selectAll(".extent") | |
.attr("height", 32); | |
var x = d3.time.scale().range([0, width]), | |
x2 = d3.time.scale().range([0, width]); | |
var countWidth = margin.left - 30; | |
var countScale = d3.scale.linear() | |
.range([10, margin.left-30]) | |
var yScale = d3.scale.ordinal() | |
.rangeBands([0, height], 0) | |
var xAxis = d3.svg.axis() | |
.scale(x) | |
.orient("bottom") | |
.ticks(7) | |
.tickSubdivide(1) | |
.tickSize(11, 4, 5); | |
//slider | |
var xAxis2 = d3.svg.axis() | |
.scale(x2) | |
.orient("bottom") | |
.ticks(7) | |
.tickSubdivide(2) | |
.tickSize(11, 4, 5); | |
function update_content() { | |
var filteredData = created.top(Infinity) | |
//TODO clear all filters and return top) | |
var data = created.filterAll().top(Infinity); | |
x.domain(d3.extent(filteredData, function(d) { return d.createdAt } )); | |
x2.domain(d3.extent(data, function(d) { return d.createdAt } )); | |
yScale.domain(usersList) | |
svg.select("g.x.axis") | |
.call(xAxis) | |
// slider | |
svg.select("g.x2.axis") | |
.call(xAxis2) | |
var bcSel = barChart.selectAll("rect.count") | |
.data(usersSorted) | |
bcSel.enter() | |
.append("rect") | |
.classed("count", true); | |
countScale.domain(d3.extent(usersSorted, function(d) { | |
return d.value | |
})); | |
bcSel.attr({ | |
x: function(d) { return countWidth - countScale(d.value) + 3}, | |
y: function(d) { return yScale(d.key) - boxHeight/2 -1}, | |
width: function(d) { return countScale(d.value) }, | |
height: boxHeight - 1.2 | |
}) | |
.style({"stroke": "none", | |
"fill": "#4D453D"}) | |
var ubSel = userBars | |
.selectAll("rect.userbar") | |
.data(usersList) | |
ubSel.enter() | |
.append("rect") | |
.classed("userbar", true) | |
.attr({ | |
"y": function(d) { return yScale(d) - boxHeight/2 - 1 }, | |
"x": margin.left - boxWidth/2, | |
"width": width + margin.left + margin.right + -162, | |
"height": boxHeight + 4.3 | |
}) | |
.on("mouseover", function(d,i) { | |
d3.select(this).style("fill","#CED7D8") | |
}) | |
.on("mouseout", function(d,i) { | |
d3.select(this).style("fill","") | |
}) | |
var markers = svg.select("g.funky") | |
.selectAll("a") | |
.data(filteredData); | |
markers.enter() | |
.append("a") | |
.attr({ | |
"xlink:href": function(d){ return trib_inlet + d.gistid }, | |
"xlink:title": function(d){ return d.description }, | |
"xlink:show": "new", | |
"cursor": "pointer" | |
}) | |
.append("rect") | |
.classed("marker", true) | |
markers.select("a rect") | |
.attr({ | |
"transform": function(d, i) { | |
var y_loc = yScale(d.user.login) - boxHeight/2 +1; | |
return translate(x(d.createdAt)- boxWidth/2, y_loc) | |
}, | |
"width": boxWidth, | |
"height": boxHeight | |
}) | |
markers.exit().remove(); | |
var userNames = svg.select("g.usernames") | |
.selectAll("g.username") | |
.data(usersList); | |
userNames | |
.enter() | |
.append("g") | |
.classed("username", true) | |
.append("a") | |
.attr({ | |
"xlink:href": function(d){ | |
if(tributary.users[d]) | |
return tributary.users[d].html_url | |
}, | |
"xlink:title": function(d){ | |
//console.log(d) | |
return compose_stats(d) | |
}, | |
"xlink:show": "new", | |
"cursor": "pointer" | |
}) | |
.append("text") | |
userNames.select("text") | |
.text(function(d) { return d }) | |
.attr({ | |
"y": function(d) { return yScale(d) + 3.864 }, | |
"x": margin.left + 25 | |
}) | |
} | |
//delete tributary.inlets | |
if(!tributary.inlets) { | |
d3.json(created_url, function(err, res) { | |
tributary.inlets = res; | |
tributary.inlets.forEach(function(d) { | |
d.createdAt = +iso(d.createdAt) | |
}) | |
xf.add(tributary.inlets); | |
init_data(); | |
update_content(); | |
}) | |
} else { | |
init_data(); | |
update_content(); | |
} | |
function translate(value_x, value_y){ | |
return "translate(" + [value_x, value_y] + ")" | |
} | |
function compose_stats(d){ | |
var stat = tributary.users[d]; | |
if(stat) | |
return "visits: " + (stat.visits || 0) + | |
" forks: " + (stat.nforks || 0) + | |
" inlets: " + (stat.inlets || 0) | |
} | |
update_content() | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.marker { | |
fill:#49BDFF; | |
fill-opacity: 0.33; | |
stroke: none | |
} | |
.userbar { | |
fill: #FFFFFF; | |
fill-opacity: 0.74681 | |
} | |
.count { | |
fill: #63ACD5; | |
fill-opacity: 0.736; | |
stroke: #fff; | |
stroke-width: 1 | |
shape-rendering: crispEdges; | |
} | |
text { | |
font-size: 0.4em; | |
font-family: Roboto; | |
font-weight: 300; | |
} | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: #919191; | |
shape-rendering: crispEdges; | |
} | |
#panel #file-list {overflow-x: hidden;} | |
//.x.axis path { | |
// display: none; | |
//} | |
.background{ | |
visibility: visible !important; | |
fill: #FFFFFF; | |
} | |
.extent { | |
visibility: visible !important; | |
fill: #84D8F8; | |
} | |
.resize rect { | |
visibility: visible !important; | |
fill: #888888; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment