JSFiddle - React, Tailwind, and code Playground

HTML

<div class="line" />

CSS

.line {
    width:100%
}
div.bar {
    height:20px;
    background-color:#69F;
    margin-top:10px;
}

JavaScript

var data = [
    {id:"a", occurrence:1702},  
    {id:"b", occurrence:1245},
    {id:"c", occurrence:1675},
    {id:"d", occurrence:1234},
    {id:"e", occurrence:999}
];
    


d3.select("div.line").selectAll("div.bar")
        .data(data, function(d) { return d.id;      })
        .enter()
        .append("div").attr("class","bar")
        .style("width", function(d){return d.occurrence /10 + "px";})
        .on("mouseover", function(d) {
            d3.select(this)
            .append("text").style("pointer-events", "none")
            .text(function(d){return d.occurrence + " occurences";});
        })
        .on("mouseout", function(d) {
            d3.select(this)
            .select("text").remove();
        });