animated bar chart with labels

forked from sierra073's block: animated bar chart with labels

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 12px Lato;
}

.axis path,
.axis line{
  fill: none;
  stroke: #898989;
  shape-rendering: crispEdges;
}
.x.axis {
  font-size: 14px;
  font-weight: 150;
}

.y.axis {
  display: none;
}
svg text.label {  
  font-weight: 400;
  text-anchor: start;
  text-align: center;
}
</style>

var margin = {top: 40, right: 30, bottom: 30, left: 50},
      width = 460 - margin.left - margin.right,
      height = 320 - margin.top - margin.bottom;

var formatPercent = d3.format(".0%");

var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

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

var xAxis = d3.axisBottom(x).tickSize([]).tickPadding(10);

var yAxis = d3.axisLeft(y).tickFormat(formatPercent);

// svg.append("text")
    //     .attr("transform", "rotate(-90)")
    //     .attr("y", 0 - margin.left)
    //     .attr("x",0 - (height / 2))
    //     .attr("dy", "1em")
    //           .attr("fill","#898989")
    //     .style("text-anchor", "middle")
    //     .text("% Districts Meeting 100 kbps/student");

svg.selectAll(".bar")
        .data(dataset)
      .enter().append("rect")
        .attr("class", "bar")
        .style("display", function(d) { return d.value === null ? "none" : null; })
        .style("fill", function(d){
          if (d.year == "2018") {
            return "#f26c23";
          } else {
            return "#fbdbca";
          }})
        .attr("x", function(d) { return x(d.year); })
        .attr("width", x.bandwidth())
          .attr("y", function(d) { return height; })
          .attr("height", 0)
              .transition()
              .duration(600)
              .delay(function (d, i) {
                  return i * 150;
              })
        .attr("y", function(d) { return y(d.value); })
        .attr("height", function(d) { return height - y(d.value); });
    
    svg.selectAll(".label")        
        .data(dataset)
        .enter()
        .append("text")
        .attr("class","label")
        .style("display", function(d) { return d.value === null ? "none" : null; })
        .attr("x", (function(d) { 
          return x(d.year) + (x.bandwidth() / 2) -8 ;
          }))
          .style("fill", function(d){
          if (d.year == "2018") {
            return "#f26c23";
          } else {
            return "#898989";
          }})
          .style("font", function(d){
          if (d.year == "2018") {
            return "16px Lato";
          }})
        .attr("y", function(d) { return height; })
          .attr("height", 0)
              .transition()
              .duration(600)
              .delay(function (d, i) {
                  return i * 150;
              })
        .text(function(d) { return formatPercent(d.value); })
        .attr("y", function(d) { return y(d.value) + .1; })
        .attr("dy", "-.7em"); 
    
  </script>
</body>

Modified http://d3js.org/d3.v4.min.js to a secure url

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