Bar chart

app/assets/stylesheets/exercises.css.scss

@@ -35,6 +35,52 @@ input[type='file'] {
   stroke-width: 4px;
 }
 
-div#chart_1{
+div#chart_1 {
   background-color: #FAFAFA;
+}
+
+div#chart_2 {
+  background-color: #FAFAFA;
+}
+
+
+
+
+.bar {
+  fill: orange;
+}
+
+.bar:hover {
+  fill:  #ffd897;
+}
+
+
+
+.d3-tip {
+  line-height: 1;
+  font-weight: bold;
+  padding: 12px;
+  background: rgba(0, 0, 0, 0.8);
+  color: #fff;
+  border-radius: 2px;
+}
+
+/* Creates a small triangle extender for the tooltip */
+.d3-tip:after {
+  box-sizing: border-box;
+  display: inline;
+  font-size: 10px;
+  width: 100%;
+  line-height: 1;
+  color: rgba(0, 0, 0, 0.8);
+  content: "\25BC";
+  position: absolute;
+  text-align: center;
+}
+
+/* Style northward tooltips differently */
+.d3-tip.n:after {
+  margin: -1px 0 0 0;
+  top: 100%;
+  left: 0;
 }