D3 Examples - WeekDayChart

xxxxxxxxxx
 
<!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>
​
    