JSFiddle - React, Tailwind, and code Playground

HTML

<label for="sexYear" 
         style="display: inline-block; width: 200px; text-align: right">
         Year = <span id="sexYear-value">…</span>
        <input type="range" min="1979" max="1999" id="sexYear">

CSS

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.bar {
  fill: steelblue;
}

.x.axis path {
  display: none;
}

JavaScript

console.clear();
var margin = {
    top: 20,
    right: 20,
    bottom: 30,
    left: 40
},
width = 900 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;

var x0 = d3.scale.ordinal()
    .rangeRoundBands([0, width], 0.1);

var x1 = d3.scale.ordinal();

var chart2_y = d3.scale.linear()
    .range([height, 0]);

var chart2 = 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 chart2_color = d3.scale.ordinal()
    .range(["#FD8C25", "#99ABC4"]);

var xAxis = d3.svg.axis()
    .scale(x0)
    .orient("bottom");

var year = 1979;

var yAxis = d3.svg.axis()
    .scale(chart2_y)
    .orient("left")
    .tickFormat(d3.format(".2s"));




var request_data = d3.csv("http://www.sfu.ca/~gdwang/Sex.csv", function (error, data) {
    request_data = data;

    update("1979");

    d3.select("#sexYear").on("input", function () {
        //debugger;
        d3.select("svg").selectAll("rect").remove();
        update(this.value);        
    });

    update(year);

    // update the year
    function update(sexYear) {
        console.log(this.value);
        // adjust the text on the year slider
        d3.select("#sexYear-value").text(sexYear);
        d3.select("#sexYear").property("value", sexYear);

        var yearData = data.filter(function (element) {
            return element.YEAR == sexYear;
        });
        var ageNames = d3.keys(yearData[0]).filter(function (key) {
            return key !== "CAUSE";
        });
        var ageNames = d3.keys(yearData[0]).filter(function (key) {
            return key !== "YEAR";
        });

        console.log(yearData);
        //debugger;
        // removes cause and ages from ageName array
        var indexCause = ageNames.indexOf("CAUSE");
        if (indexCause > -1) {
            ageNames.splice(indexCause, 1);
    ...