WeekDayChart

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .bar {
      fill: steelblue;
      }

.bar:hover {
      fill: brown;
      }

.axis--x path {
      display: none;
      }
  </style>
</head>

<body>
  <svg id="chartWeekdayBreakdown" width="500" height="500"></svg>
  
  <script>
     var flatDays = [
       								{day:"Sunday", count:10},
       								{day:"Monday", count:0},
       								{day:"Tuesday", count:16},
       								{day:"Wednesday", count:131},
       								{day:"Thursday", count:2},
       								{day:"Friday", count:1},
       								{day:"Saturday", count:13},       
                    ];

var svg = d3.select("#chartWeekdayBreakdown"),
		margin = {
			top: 20,
			right: 20,
			bottom: 30,
			left: 40
		},
		width = +svg.attr("width") - margin.left - margin.right,
		height = +svg.attr("height") - margin.top - margin.bottom;

var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
		y = d3.scaleLinear().rangeRound([height, 0]);

var g = svg.append("g")
		.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

x.domain(flatDays.map(function (d) {
		return d.day;
	}));
	y.domain([0, d3.max(flatDays, function (d) {
		return d.count;
	})]);

g.append("g")
		.attr("class", "axis axis--x")
		.attr("transform", "translate(0," + height + ")")
		.call(d3.axisBottom(x));

g.append("g")
		.attr("class", "axis axis--y")
		.call(d3.axisLeft(y).ticks(10))
		.append("text")
		.attr("transform", "rotate(-90)")
		.attr("y", 6)
		.attr("dy", "0.71em")
		.attr("text-anchor", "end")
		.text("Frequency");

g.selectAll(".bar")
		.data(flatDays)
		.enter().append("rect")
		.attr("class", "bar")
		.attr("x", function (d) {
			return x(d.day);
		})
		.attr("y", function (d) {
			return y(d.count);
		})
		.attr("width", x.bandwidth())
		.attr("height", function (d) {
			return height - y(d.count);
		})

.append("text")
		.attr("x", x.bandwidth() / 2)
		.attr("y", function (d) { return y(d.count) + 5; })
		.attr("dy", function (d) { return ((d.class == 'negative') ? '-' : '') + ".75em" })
		.text(function (d) { return d.count; });
    
  </script>
</body>

https://d3js.org/d3.v4.min.js