JSFiddle - React, Tailwind, and code Playground

by Igor Cuckovic

HTML

<body></body>

JavaScript

var dataArray = [20, 40, 50];

var canvas = d3.select("body")
    .append("svg")
    .attr("width", 500)
    .attr("height", 500);

var bars = canvas.selectAll("rect")
    .data(dataArray)
    .enter()
    .append("rect")
    .attr("width", function (d) {
    return d * 10;
})
    .attr("height", 60)
    .attr("y", function (d, i) {
    return i * 100 + 10;
}).attr("fill", "blue");

var selected = bars.on("mouseover", function () {
    d3.select(this).style("fill", "red");
})
.on("mouseout", function () {
    d3.select(this).style("fill", "blue");
})