bar-chart.css

h2 {
  padding-top: 50px;
}

.bar-chart-html div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
}

.bar-chart-svg rect {
  fill: steelblue;
}

.bar-chart-svg text {
  font: 10px sans-serif;
  fill: white;
  text-anchor: end;
}

.chart4 .axis--x path {
  display: none;
}

.chart4 text {
  font-size: 14px;
}

/* for chart tips with info data point on hover over bars */
.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 5px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border-radius: 2px;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 15px;
  width: 100%;
  line-height: 1;
  color: rgba(0, 0, 0, 0.6);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

/* Style the northward tooltip */
.d3-tip.n:after {
  margin: -3px 0 0 0;
  top: 100%;
  left: 0;
}

.d3-comment__arrow {
  width: 50px;
  height: 25px;
}
/* Four directions for the arrow, nw (north-west) being the one drawn in the svg */
.d3-comment__arrow.ne {
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: “FlipH”;
}

.d3-comment__arrow.se {
  -moz-transform: scale(-1, -1);
  -o-transform: scale(-1, -1);
  -webkit-transform: scale(-1, -1);
  transform: scale(-1, -1);
}

.d3-comment__arrow.sw {
  -moz-transform: scaleY(-1);
  -o-transform: scaleY(-1);
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
  filter: FlipV;
  -ms-filter: “FlipV”;
}