JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/mbostock/d3/master/d3.v2.min.js"></script>
<div id = 'chartZone'></div>
click a bar! <br />
red = exit selection <br />
green = enter selection <br />
gray = previously existing

CSS

body {
  font: 10px sans-serif;
  margin: 0;
}

path.line {
  fill: none;
  stroke: #666;
  stroke-width: 1px;
}

path {
    stroke: black;
    stroke-width: 2;
    fill: none;
}
 
line {
    stroke: black;
}

path.area {
  fill: #e7e7e7;
}

.axis {
  shape-rendering: crispEdges;
}

.x.axis line {
  stroke: #fff;
}

.x.axis .minor {
  stroke-opacity: .5;
}

.x.axis path {
  display: none;
}

.y.axis line, .y.axis path {
  fill: none;
  stroke: #000;
}

svg { padding-top: 10px;
      padding-bottom: 10px;
      padding-left: 80px;}

JavaScript

function chart(config) {
        
    // set default options
    var defaultOptions = {
        selector: '#chartZone',
        class: 'chart',
        id: null,
        data: [1,2,6,4, 2, 6, 7, 2],
        type: 'column', 
        width: 200,
        height: 200,
        callback: null,
        interpolate: 'monotone'
    };
    
    // fill in unspecified settings in the config with the defaults
    var settings = $.extend(defaultOptions, config);
        
    function my() { // generate chart with this function        
        
        var w = settings.width,
            h = settings.height,
            barPadding = 3,
            scale = 10,
            max = d3.max(settings.data);
        
        var svg = d3.select(settings.selector) // create the main svg container
            .append("svg")
            .attr("width",w)
            .attr("height",h);

        var y = d3.scale.linear().range([h,0]),
            yAxis = d3.svg.axis().scale(y).ticks(5).orient("left"),
            x = d3.scale.linear().range([0, w]);

        y.domain([0, max]).nice();
        x.domain([0, settings.data.length]).nice();

        var rect = svg.selectAll("rect")
           .data(settings.data, function(d,i) {return i;});

        rect.enter().append("rect")
           .attr("x", function(d,i) {return x(i);})
           .attr("y", function(d,i) {return y(d);})
           .attr("width", w / settings.data.length - barPadding)
           .attr("height", function(d) {return h - y(d);})
           .attr("fill", "rgb(90,90,90)");
                      
        svg.append("svg:g")
           .attr("class", "y axis")
           .attr("transform", "translate(-4,0)")
           .call(yAxis);        
                   
        svg.on("click", function() {
            var newData = [], maxCap = Math.round(Math.random() * 100);
                        
            for (var i = 0; i < Math.round(Math.random()*100); i++) {
                var newNumber = Math.random() * maxCap;
             ...