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 padding = 30;

    var height = 400;
    var width = 600;

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

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

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

    // 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,0)`)
        .attr("class", "y axis")
        .call(y_axis);

    // RENDER ASSE X
    svg.append("g")
        .attr("transform", `translate(30,${chartHeight})`)
        .call(xAxis);
        
        console.log(xscale)

    // ZOOM Y
    var yzoom = d3.zoom()
    .scaleExtent([1, 5])
    .extent([[0, 0], [chartWidth, chartHeight]])
    .translateExtent([[0, 0], [chartWidth, chartHeight]])
        .on("zoom", zoom);

    // BARRE DATI
    var bar = svg.append('g')
        .attr("class", "bars")
        .selectAll('rect')
        .data(data)
        
       var barEnter = bar.enter()
        .append('rect')
        
        barEnter.attr('height', function(d) { return scale(d.value); })
        .attr('width', barWidth)
        .attr('class','bar')
        .attr('transform', function(d, i) {
            return `translate(${xscale(i)}, 0)`;
        })
        .on("mouseover",  function(data,...