Integrate histogram.

css/style.css

@@ -2,10 +2,8 @@ body {
   padding-top: 100px;
 }
 
-#Detector img {
-  border-radius: 10px;
+#detector {
   cursor: pointer;
-  width: 200px;
 }
 
 .bar rect {

index.html

@@ -36,7 +36,7 @@
 
     <div class="container-fluid">
       <div class="col-xs-4">
-        <div id="Detector" ng-controller="DetectorController as dc">
+        <div ng-controller="DetectorController as dc">
           <canvas ng-click="dc.click()" id="detector" width="200" height="200">
             Your detector. Click on it to generate events.
           </canvas>
@@ -52,6 +52,7 @@
       
       <div class="col-xs-4" id="Research" ng-controller="ResearchController as rc">
         <h1>Research</h1>
+        <div id="ResearchHist"></div>
         <div class="research-item" ng-repeat="r in rc.research" ng-show="r.is_visible()">
           <h2>{{ r.name }} <small ng-show="r.level > 0"> Level: {{ r.level }}</small></h2>
           <p ng-show="r.level > 0">{{ r.description }}</p>
@@ -71,7 +72,9 @@
 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
-    <script src="js/game.js"></script>
+    <script src="//d3js.org/d3.v3.min.js"></script>
     <script src="js/detector.js"></script>
+    <script src="js/histogram.js"></script>
+    <script src="js/game.js"></script>
   </body>
 </html>

js/game.js

@@ -12,16 +12,19 @@
     return res;
   }
 
+
   var lab = {
     name: 'My Awesome Lab',
     data: 0,
     reputation: 0,
     money: 0,
+    researchHistogram: new Histogram('#ResearchHist'),
     getGrant: function () {
       this.money += this.reputation * 10;  // TODO: adjust factor
     },
     acquire: function (amount) {
       this.data += amount;
+      this.researchHistogram.add_events(amount);
     },
     research: function (cost, reputation) {
       if (this.data >= cost) {