JSFiddle - React, Tailwind, and code Playground

by HemalathaThanigaivel

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<div id="analyticsBar" style="width: 100%; height: 400px;">

</div>

<button id="updateData">
 Click
</button>

CSS

body {
            font-family: "Arial", sans-serif;
        }
        
        .bar {
            fill: #5f89ad;
        }
        
       /*  .axis {
            font-size: 12px;
        } */
        
        .axis path,
        .axis line {
            stroke: gray;
            /* display: none; */
        }

JavaScript

var data = [{
                "name": "Apples",
                "value": 20,
        },
            {
                "name": "Bananas",
                "value": 12,
        },
            {
                "name": "Grapes",
                "value": 19,
        },
            {
                "name": "Lemons",
                "value": 5,
        },
            {
                "name": "Limes",
                "value": 16,
        },
            {
                "name": "Oranges",
                "value": 26,
        },
            {
                "name": "Pears",
                "value": 30,
        }];




       

        //set up svg using margin conventions - we'll need plenty of room on the left for labels
        var margin = {
            top: 15,
            right: 55,
            bottom: 50,
            left: 100
        };


        var svg = d3.select("#analyticsBar").append("svg")
           /*  .attr("width", $("#analyticsBar").width() + margin.left + margin.right)
            .attr("height", $("#analyticsBar").height() + margin.top + margin.bottom) */
            .attr("preserveAspectRatio", "xMinYMin meet")
   .attr("viewBox", "0 0 "+($("#analyticsBar").width())+" "+($("#analyticsBar").height()))
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


        var width = $("#analyticsBar").width() - margin.left - margin.right,
            height = $("#analyticsBar").height() - margin.top - margin.bottom;
            
        var x = d3.scaleLinear()
            .range([0, width]);
            
           /*  x.domain([0, d3.max(data, function (d) {
                return d.value;
            })]) */
	
        var y = d3.scaleBand()
            .rangeRound([height, 0], 0)
            .padding(0.2);
            
            /* y.domain(data.map(function (d) {
                return d.name;
            })); */
				var xAxis = d3.axisBottom(x)
            //no tick marks
           ...