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);

var dataset = [{"year":"2015", "value": .77},
                   {"year":"2016", "value": .88},
                   {"year":"2017", "value": .95},
                   {"year":"2018", "value": .98}];

x.domain(dataset.map(function(d) { return d.year; }));
    y.domain([0, d3.max(dataset, function(d) { return d.value; })]);

svg.append("g")
          .attr("class", "x axis")
           .style("stroke", "#898989")
           .style("fill-opacity", .9)
           .style("stroke-width", ".7")
          .attr("transform", "translate(0," + height + ")")
          .call(xAxis);
      svg.append("g")
          .attr("class","y axis")
          .attr("class","y axis")
          .call(yAxis);

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