Skip to content

Commit e54f062

Browse files
gjtorikiangjtorikian
committed
Super updates to the graph example
1 parent 6780a09 commit e54f062

File tree

2 files changed

+114
-45
lines changed

2 files changed

+114
-45
lines changed

‎api/ruby/rendering-data-as-graphs/server.rb

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,27 @@ class MyGraphApp < Sinatra::Base
4747
languages.push :language => lang, :count => count
4848
end
4949

50-
erb :lang_freq, :locals => { :languages => languages.to_json}
50+
language_byte_count = []
51+
repos.each do |repo|
52+
repo_name = repo.name
53+
repo_langs = octokit_client.languages("#{github_user.login}/#{repo_name}")
54+
repo_langs.each do |lang, count|
55+
if !language_obj[lang]
56+
language_obj[lang] = count
57+
else
58+
language_obj[lang] += count
59+
end
60+
end
61+
end
62+
63+
language_obj.each do |lang, count|
64+
language_byte_count.push :name => "#{lang} (#{count})", :count => count
65+
end
66+
67+
# some mandatory formatting for d3
68+
language_bytes = [ :name => "language_bytes", :elements => language_byte_count]
69+
70+
erb :lang_freq, :locals => { :languages => languages.to_json, :language_byte_count => language_bytes.to_json}
5171
end
5272
end
5373
end

‎api/ruby/rendering-data-as-graphs/views/lang_freq.erb

Lines changed: 93 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -18,59 +18,108 @@
1818
font-family: Helvetica, sans-serif;
1919
fill: black;
2020
}
21+
.cell {
22+
position: absolute;
23+
}
2124
</style>
2225
</head>
2326
<body>
24-
<p>Check out this sweet graph:</p>
27+
<p>Check this sweet data out:</p>
2528
<div id="lang_freq"></div>
29+
<p>Or, if you prefer:</p>
30+
<div id="byte_freq"></div>
31+
<script>
32+
var data = <%= languages %>;
2633

27-
</body>
28-
<script>
29-
var data = <%= languages %>;
34+
var barWidth = 40;
35+
var width = (barWidth + 10) * data.length;
36+
var height = 300;
3037

31-
var barWidth = 40;
32-
var width = (barWidth + 10) * data.length;
33-
var height = 300;
38+
var x = d3.scale.linear().domain([0, data.length]).range([0, width]);
39+
var y = d3.scale.linear().domain([0, d3.max(data, function(datum) { return datum.count; })]).
40+
rangeRound([0, height]);
3441

35-
var x = d3.scale.linear().domain([0, data.length]).range([0, width]);
36-
var y = d3.scale.linear().domain([0, d3.max(data, function(datum) { return datum.count; })]).
37-
rangeRound([0, height]);
42+
// add the canvas to the DOM
43+
var languageBars = d3.select("#lang_freq").
44+
append("svg:svg").
45+
attr("width", width).
46+
attr("height", height);
3847

39-
// add the canvas to the DOM
40-
var languageBars = d3.select("#lang_freq").
41-
append("svg:svg").
42-
attr("width", width).
43-
attr("height", height);
48+
languageBars.selectAll("rect").
49+
data(data).
50+
enter().
51+
append("svg:rect").
52+
attr("x", function(datum, index) { return x(index); }).
53+
attr("y", function(datum) { return height - y(datum.count); }).
54+
attr("height", function(datum) { return y(datum.count); }).
55+
attr("width", barWidth);
4456

45-
languageBars.selectAll("rect").
46-
data(data).
47-
enter().
48-
append("svg:rect").
49-
attr("x", function(datum, index) { return x(index); }).
50-
attr("y", function(datum) { return height - y(datum.count); }).
51-
attr("height", function(datum) { return y(datum.count); }).
52-
attr("width", barWidth);
57+
languageBars.selectAll("text").
58+
data(data).
59+
enter().
60+
append("svg:text").
61+
attr("x", function(datum, index) { return x(index) + barWidth; }).
62+
attr("y", function(datum) { return height - y(datum.count); }).
63+
attr("dx", -barWidth/2).
64+
attr("dy", "1.2em").
65+
attr("text-anchor", "middle").
66+
text(function(datum) { return datum.count;});
5367

54-
languageBars.selectAll("text").
55-
data(data).
56-
enter().
57-
append("svg:text").
58-
attr("x", function(datum, index) { return x(index) + barWidth; }).
59-
attr("y", function(datum) { return height - y(datum.count); }).
60-
attr("dx", -barWidth/2).
61-
attr("dy", "1.2em").
62-
attr("text-anchor", "middle").
63-
text(function(datum) { return datum.count;});
68+
languageBars.selectAll("text.yAxis").
69+
data(data).
70+
enter().append("svg:text").
71+
attr("x", function(datum, index) { return x(index) + barWidth; }).
72+
attr("y", height).
73+
attr("dx", -barWidth/2).
74+
attr("text-anchor", "middle").
75+
text(function(datum) { return datum.language;}).
76+
attr("transform", "translate(0, 18)").
77+
attr("class", "yAxis");
78+
</script>
79+
<script>
80+
var language_bytes = <%= language_byte_count %>
6481

65-
languageBars.selectAll("text.yAxis").
66-
data(data).
67-
enter().append("svg:text").
68-
attr("x", function(datum, index) { return x(index) + barWidth; }).
69-
attr("y", height).
70-
attr("dx", -barWidth/2).
71-
attr("text-anchor", "middle").
72-
text(function(datum) { return datum.language;}).
73-
attr("transform", "translate(0, 18)").
74-
attr("class", "yAxis");
75-
</script>
82+
var childrenFunction = function(d){return d.elements};
83+
var sizeFunction = function(d){return d.count;};
84+
var colorFunction = function(d){return Math.floor(Math.random()*20)};
85+
var nameFunction = function(d){return d.name;};
86+
87+
var color = d3.scale.linear()
88+
.domain([0,10,15,20])
89+
.range(["grey","green","yellow","red"]);
90+
91+
drawTreemap(5000, 2000, '#byte_freq', language_bytes, childrenFunction, nameFunction, sizeFunction, colorFunction, color);
92+
93+
function drawTreemap(height,width,elementSelector,language_bytes,childrenFunction,nameFunction,sizeFunction,colorFunction,colorScale){
94+
95+
var treemap = d3.layout.treemap()
96+
.children(childrenFunction)
97+
.size([width,height])
98+
.value(sizeFunction);
99+
100+
var div = d3.select(elementSelector)
101+
.append("div")
102+
.style("position","relative")
103+
.style("width",width + "px")
104+
.style("height",height + "px");
105+
106+
div.data(language_bytes).selectAll("div")
107+
.data(function(d){return treemap.nodes(d);})
108+
.enter()
109+
.append("div")
110+
.attr("class","cell")
111+
.style("background",function(d){ return colorScale(colorFunction(d));})
112+
.call(cell)
113+
.text(nameFunction);
114+
}
115+
116+
function cell(){
117+
this
118+
.style("left",function(d){return d.x + "px";})
119+
.style("top",function(d){return d.y + "px";})
120+
.style("width",function(d){return d.dx - 1 + "px";})
121+
.style("height",function(d){return d.dy - 1 + "px";});
122+
}
123+
</script>
124+
</body>
76125
</html>

0 commit comments

Comments
 (0)