JSFiddle - React, Tailwind, and code Playground

by k_sav

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg class="example"></svg>

JavaScript

// DATA

    var data = [{
        name: 'Burj Khalifa',
        value: 80,
    },{
        name: 'Shanghai Tower',
        value: 120,
    },
    {
        name: 'Abraj Al Bait',
        value: 150,
    },
    {
        name: 'One World Trade Center',
        value: 300,
    },];

    var barWidth = 100;

    var height = 400;
    var width = 600;

    // SVG ROOT
    var svg = d3.select('.example')
        .attr('height', height)
        .attr('width', width);

    // SCALA X
    var xscale = d3.scalePoint()
        .domain(data.map((e) => e.name))
        .range([0, barWidth * 4])
        .padding(0.5);

    // SCALA Y
    var scale = d3.scaleLinear()
        .domain([0, d3.max(data, function(d) { return d.value; })])
        .range([0, height]);

    // ASSE Y
    var y_axis = d3.axisLeft()
        .scale(scale);

    // ASSE X
    var xAxis = d3.axisBottom()
        .scale(xscale);

    // RENDER ASSE Y
    svg.append("g")
        .attr("transform", "translate(30, " + ((height - 12) - d3.max(data, function(d) { return d.value; })) + ")")
        .attr("class", "y axis")
        .call(y_axis);

    // RENDER ASSE X
    svg.append("g")
        .attr("transform", "translate(30, " + (20 + d3.max(data, function(d) { return d.value; })) + ")")
        .call(xAxis);

    // ZOOM Y
    var yzoom = d3.zoom()
        .on("zoom", zoom);

    // BARRE DATI
    var bar = svg.append('g')
        .attr("class", "bars")
        .selectAll('rect')
        .data(data)
        
       var barEnter bar.enter()
        .append('rect')
        
        bar.attr('height', function(d) { return scale(d.value); })
        .attr('width', barWidth - 1)
        .attr('class','bar')
        .attr('transform', function(d, i) {
            return "translate(" + ((i * barWidth) + 30) + ", " + scale(d.value) + ")";
        })
        .on("mouseover",  function(data, index) {
            d3.select(this).attr('opacity', '0.5');
            appendLabel('append', data, index);
        })
       ...