JSFiddle - React, Tailwind, and code Playground

CSS

body {
    font: 10px sans-serif;
}
 .marker_green {
            fill: #b6ff00;
            stroke: #b6ff00;
        }

        .marker_red {
            fill: #FF0000;
            stroke: #FF0000;
        }

        line.average {
            stroke: red;
            stroke-width: 1;
        }

        line.average {
            stroke-dasharray: "5,5";
            stroke: red;
            stroke-width: 1;
        }

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

JavaScript

data = [{
    "letter": "A",
    "frequency": .08167,
    "year": 2015,
    "Value" : 2
    }, {
    "letter": "B",
    "frequency": .01492,
    "year": 2015,
    "Value" : -2
    }, {
    "letter": "C",
    "frequency": .02780,
    "year": 2015,
    "Value" : -2
    }, {
    "letter": "A",
    "frequency": .06167,
    "year": 2014,
    "Value" : -2
    }, {
    "letter": "D",
    "frequency": .02492,
    "year": 2014,
    "Value" : -2
    }, {
    "letter": "C",
    "frequency": .03780,
    "year": 2014,
    "Value" : -2
    }]

    var nested_data = d3.nest()
    .key(function (d) {
    return d.letter;
    })
    .entries(data);

    var years = [2014, 2015];

    var margin = {
    top: 20,
    right: 20,
    bottom: 30,
    left: 40
    },
    width = 500 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom;

    var color = d3.scale.ordinal()
    .range(["#98abc5", "#a05d56", "#d0743c", "#ff8c00"]);

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

    var x1 = d3.scale.ordinal();

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

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

    var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

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


    x0.domain(nested_data.map(function (d) {
    return d.key;
    }));

    x1.domain(years).rangeRoundBands([0, x0.rangeBand()]);

    y.domain([0, d3.max(nested_data, function (d) {
    return d3.max(d.values, function (d) {
    return d.frequency;
    });
    })]);

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


    svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)
    .append("text")
    .attr("transform",...