fun chart

var width = 960 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;

var months = [
    'January', 'February', 'March', 'April', 'May',
    'June', 'July', 'August', 'September',
    'October', 'November', 'December'
    ];

var yScale = d3.scaleBand()
      .padding([.1])
      .rangeRound([height, 0]);

var xScale = d3.scaleLinear()
      .range([0, width]);

var xAxis = d3.axisBottom(xScale)
      .tickPadding(8);

var yAxis = d3.axisLeft(yScale)
      .tickSize(0)
      .tickPadding(8)
      .tickFormat(function(d) {
          return months[d - 1];
      });

var tooltip = d3.select("#chart-area").append("div").attr("class", "toolTip");

var colorScale = d3.scaleOrdinal(d3.schemeCategory10);

var svg = d3.select("#chart-area").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 + ")");

// draw the axes
  svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);

svg.append("g")
    .attr("class","x axis")
    .attr("transform","translate(0," + height + ")")
    .call(xAxis);

svg.append("text")
      .datum(data[0])
      .attr("class", "title")
      .attr("x", width/3)
      .attr("dy", -5)
      .text(function(d) { return "Total monthly COP submissions in " + d.country; })

var updateChart = function(data) {
    // count the total entries for the year
    var countVals = [];
    data.forEach(function(month) {
      countVals.push(month.count);
    });

// Set the X & Y domains, with a minimum of 10 in the X
    var maxValue = Math.max(10, d3.max(countVals, function(d)  { return d; }));
    xScale.domain([0, maxValue]).nice();
    yScale.domain(data.map(function(d) { return d.month; }).sort(d3.descending));

// re-draw the x axis
    svg.select(".x")
      .call(xAxis);

// re-draw the y axis
    svg.select(".y")
      .call(yAxis);

// reload the data for the new month
    var bars = svg.selectAll("rect")
        .data(data, function(d) {
          return d.month;
        });

var t = d3.transition()
        .duration(1000)
        .ease(d3.easeBounce);

// remove months that don't exist in this set.
    bars.exit().remove();

// add new bar for incoming months
    var existingBars = bars.enter().append("rect")
        .style("fill", function(d) { return colorScale(d.month); })
        .on("mouseenter", function(d) {
          tooltip
            .style("left", d3.event.pageX - 50 + "px")
            .style("top", d3.event.pageY - 70 + "px")
            .style("display", "inline-block")
            .html((d.year) + "<br>" + "Monthly COP Submission: " + (d.count))
            d3.select(this).style("fill", "#1e3250");
        })
        .on("mouseout", function(d) {
          tooltip.style("display", "none")
          d3.select(this).style("fill", function(d) { return colorScale(d.month); })
        });

// update existing bars with their new values
    bars.merge(existingBars)
      .transition(t)
      .attr("x", 1)
      .attr("y", function(d) { return yScale(d.month); })
      .attr("width" , function(d) { return xScale(d.count); })
      .attr("height", yScale.bandwidth());
  };

var getYearData = function(data, year) {
    return data.filter(function(d) {
      return d.year == year;
    });
  };

var drawYearButtons = function(data) {
    var years = d3.set(data.map(function(d) { return d.year; })).values();

var buttons = d3.select("#yearButtons").selectAll(".year-button")
        .data(years)
        .enter().append("button")
        .attr("class", "year-button")
        .attr("value", function(d) { return d; })
        .text(function(d) { return d; });

buttons.on("click", function(year) {
      var yearData = getYearData(data, year);
      updateChart(yearData);
    });
  };

// Draw the buttons and the initial chart
  drawYearButtons(data);
  var defaultYearData = getYearData(data, startYear);
  updateChart(defaultYearData);

}
</script>

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