platform-samples/github-api/ruby/rendering-data-as-graphs/views/lang_freq.erb at cfa2ffd31a193718ea735b4977266b43ebbb3109 · github/platform-samples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<meta charset="utf-8">
<html>
  <head>
  	<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.0.1/d3.v3.min.js"></script>
    <style>
    svg {
      padding: 20px;
    }
    rect {
      fill: #2d578b
    }
    text {
      fill: white;
    }
    text.yAxis {
      font-size: 12px;
      font-family: Helvetica, sans-serif;
      fill: black;
    }
    .cell {
      position: absolute;
    }
    </style>
  </head>
  <body>
    <p>Check this sweet data out:</p>
    <div id="lang_freq"></div>
    <p>Or, if you prefer:</p>
    <div id="byte_freq"></div>
    <script>
      var data = <%= languages %>;

      var barWidth = 40;
      var width = (barWidth + 10) * data.length;
      var height = 300;

      var x = d3.scale.linear().domain([0, data.length]).range([0, width]);
      var y = d3.scale.linear().domain([0, d3.max(data, function(datum) { return datum.count; })]).
        rangeRound([0, height]);

      // add the canvas to the DOM
      var languageBars = d3.select("#lang_freq").
        append("svg:svg").
        attr("width", width).
        attr("height", height);

      languageBars.selectAll("rect").
        data(data).
        enter().
        append("svg:rect").
        attr("x", function(datum, index) { return x(index); }).
        attr("y", function(datum) { return height - y(datum.count); }).
        attr("height", function(datum) { return y(datum.count); }).
        attr("width", barWidth);

      languageBars.selectAll("text").
        data(data).
        enter().
        append("svg:text").
        attr("x", function(datum, index) { return x(index) + barWidth; }).
        attr("y", function(datum) { return height - y(datum.count); }).
        attr("dx", -barWidth/2).
        attr("dy", "1.2em").
        attr("text-anchor", "middle").
        text(function(datum) { return datum.count;});

      languageBars.selectAll("text.yAxis").
        data(data).
        enter().append("svg:text").
        attr("x", function(datum, index) { return x(index) + barWidth; }).
        attr("y", height).
        attr("dx", -barWidth/2).
        attr("text-anchor", "middle").
        text(function(datum) { return datum.language;}).
        attr("transform", "translate(0, 18)").
        attr("class", "yAxis");
    </script>
    <script>
      var language_bytes = <%= language_byte_count %>

      var childrenFunction = function(d){return d.elements};
      var sizeFunction = function(d){return d.count;};
      var colorFunction = function(d){return Math.floor(Math.random()*20)};
      var nameFunction = function(d){return d.name;};

      var color = d3.scale.linear()
                  .domain([0,10,15,20])
                  .range(["grey","green","yellow","red"]);

      drawTreemap(5000, 2000, '#byte_freq', language_bytes, childrenFunction, nameFunction, sizeFunction, colorFunction, color);

      function drawTreemap(height,width,elementSelector,language_bytes,childrenFunction,nameFunction,sizeFunction,colorFunction,colorScale){

          var treemap = d3.layout.treemap()
              .children(childrenFunction)
              .size([width,height])
              .value(sizeFunction);

          var div = d3.select(elementSelector)
              .append("div")
              .style("position","relative")
              .style("width",width + "px")
              .style("height",height + "px");

          div.data(language_bytes).selectAll("div")
              .data(function(d){return treemap.nodes(d);})
              .enter()
              .append("div")
              .attr("class","cell")
              .style("background",function(d){ return colorScale(colorFunction(d));})
              .call(cell)
              .text(nameFunction);
      }

      function cell(){
          this
              .style("left",function(d){return d.x + "px";})
              .style("top",function(d){return d.y + "px";})
              .style("width",function(d){return d.dx - 1 + "px";})
              .style("height",function(d){return d.dy - 1 + "px";});
      }
    </script>
  </body>
</html>