Bar Chart by pjsier

script.js

function barChart() {
  var margin = {top: 10, right: 10, bottom: 60, left: 40},
      width = 350,
      height = 350,
      labelValue = function(d) {
        return d.label.substr(4)
          .replace(/(lt_)/g, "<")
          .replace(/(gte_)/g, ">=")
          .replace(/_/g, "-");
      },
      dataValue = function(d) { return +d.value; },
      bandPadding = 0.1,
      color = "#b2ebf2";

  function chart(selection) {
    selection.each(function(data) {
      data = data.map(function(d, i) {
        return { label: labelValue(d), value: dataValue(d) };
      });
      var x = d3.scaleBand().rangeRound([0, height-margin.top-margin.bottom]).padding(bandPadding),
          y = d3.scaleLinear().rangeRound([0, width-margin.left-margin.right]);

      x.domain(data.map(function(d) { return d.label; }));
      y.domain([0, d3.max(data, dataValue)]);

      var svg = d3.select(this).selectAll("svg").data([data]);
      var gEnter = svg.enter().append("svg").append("g");
      gEnter.append("g").attr("class", "axis x");
      gEnter.append("g").attr("class", "axis y").append("text");
      gEnter.selectAll(".bar").data(data).enter().append("rect").attr("class", "bar");

      var svg = selection.select("svg");
      svg.attr('width', width).attr('height', height);
      var g = svg.select("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

      g.select("g.axis.x")
        .call(d3.axisLeft(x));

      g.select("g.axis.y")
        .attr("class", "axis y")
        .attr("transform", "translate(0," + (height - margin.bottom - margin.top) + ")")
        .call(d3.axisBottom(y).ticks(5));

      g.select("g.axis.y text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", "0.71em")
        .attr("text-anchor", "end")
        .text("Population");

      g.selectAll("rect.bar")
        .data(data)
        .attr("x", "1")
        .attr("y", function(d) { return x(d.label); })
        .attr("fill", color)
        .attr("height", x.bandwidth())
        .transition()
          .duration(750)
          .attr("width", function(d) { return y(dataValue(d)); });
    });
  }

  chart.margin = function(_) {
    if (!arguments.length) return margin;
    margin = _;
    return chart;
  };

  chart.width = function(_) {
    if (!arguments.length) return width;
    width = _;
    return chart;
  };

  chart.height = function(_) {
    if (!arguments.length) return height;
    height = _;
    return chart;
  };

  chart.labelValue = function(_) {
    if (!arguments.length) return labelValue;
    labelValue = _;
    return chart;
  };

  chart.dataValue = function(_) {
    if (!arguments.length) return dataValue;
    dataValue = _;
    return chart;
  };

  chart.colorOptions = function(_) {
    if (!arguments.length) return colorOptions;
    colorOptions = _;
    return chart;
  };

  return chart;
}

index.html

<!DOCTYPE html>
<html>

<head>
    <title>Simple Bar Chart</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta charset='utf-8' />
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <style>
        body {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        }

        #chart {
            max-width: 600px;
            max-height: 400px;
        }
    </style>
</head>

<body>
    <div id="chart"></div>
    <script src="script.js"></script>
    <script>
        var bars = barChart();

        var data = [
            { label: "age_lt_5", value: "2888" },
            { label: "age_5_9", value: "1852" },
            { label: "age_10_14", value: "1595" },
            { label: "age_15_17", value: "1030" },
            { label: "age_18_19", value: "741" },
            { label: "age_20_24", value: "4497" },
            { label: "age_25_29", value: "7871" },
            { label: "age_30_34", value: "7090" },
            { label: "age_35_39", value: "5313" },
            { label: "age_40_44", value: "4527" },
            { label: "age_45_49", value: "3968" },
            { label: "age_50_54", value: "3668" },
            { label: "age_55_59", value: "3093" },
            { label: "age_60_64", value: "2390" },
            { label: "age_65_69", value: "1659" },
            { label: "age_70_74", value: "1347" }, 
            { label: "age_75_79", value: "1037" },
            { label: "age_80_84", value: "844" },
            { label: "age_gte_85", value: "952" }
        ];

        function resize() {
            if (d3.select("#chart svg").empty()) {
                return;
            }
            bars.width(+d3.select("#chart").style("width").replace(/(px)/g, ""))
                .height(+d3.select("#chart").style("height").replace(/(px)/g, ""));
            d3.select("#chart").call(bars);
        }

        document.addEventListener("DOMContentLoaded", function () {
            d3.select("#chart").datum(data).call(bars);
            d3.select(window).on('resize', resize);
            resize();
        });
    </script>
</body>

</html>