JSFiddle - React, Tailwind, and code Playground

by gibito

HTML

<label for="series">series:</label>
                            <input type="text" name="series" id="series" value="5"
                            />
                            <br />
                            <label for="npoints">Number Points per series:</label>
                            <input type="text" name="npoints" id="npoints"
                            value="10" />
                            <input id="buildDefaultChart" type="button" value="Create Data Array"
/>
<div id="chart" class="chartContainer" width="500px" height="500px"></div>

CSS

.rules line, .rules path {
    shape-rendering: crispEdges;
    stroke: #000;
}

.rules .tick {
}
.rules .minor {
    stroke: #BBB;
}
.rules .domain {
    fill: none;
}

.grid .tick {
    stroke: #CCC;
}


.bar.positive {
  fill: steelblue;
}

.bar.negative {
  fill: brown;
}

.axis text {
  font: 10px sans-serif;
}

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

JavaScript

function generateData() {
                
                var data=[];
                
                // data=[4,6,10];
                
                
                
                //    setChartGlobalOptions();
                var series = parseInt($('#series').val());
                var npoints = parseInt($('#npoints').val());
                
                
                
                //create data array 
                //for(var seriesID = 0; seriesID < series; seriesID++) {
                    
                    var x = 0, y = -Math.random() * 10;
                    
                    //data[seriesID] = []; // reset the elements of each series
                    
                    for(var i = 0; i < npoints; i++) {
                        x += Math.random() * 5;
                        y += (Math.random() - 0.5) * 50;
                        //console.log (s,graphData.length);
                        data.push(y);
                    }
                    
                //}
                
                
                return data;
                
            }
            
        
            //http://stackoverflow.com/questions/10127402/bar-chart-with-negative-values
        
            
            
            function returnDomain (isSymmetric, data) {
                var domain = {};
                
                if (isSymmetric) {
                    var x0 = Math.max(-d3.min(data), d3.max(data));
                    
                    domain.min = -x0; // to make it symmetric...useful for tornado
                    domain.max = x0; // to make it symmetric...useful for tornado
                    
                } else {
                    domain.min = Math.min(d3.min(data),0);
                    domain.max = d3.max(data);
                }
                return domain;
            }
            
            function initChart() {
                
                
                var margin = {top: 30,...