JSFiddle - React, Tailwind, and code Playground

by Nikita Baranov

HTML

<div id="tooltip" class="hidden">
                <p>
                    <span id="info"></span>
                </p>
            </div>
<div id="omsk_road"></div>

CSS

#tooltip
{
    pointer-events: none;
    position: absolute;
    width: 500px;
    height: auto;
    border: solid 2px #FEDBCA;
    padding: 10px;
    background-color: white;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
}

#tooltip.hidden
{
    display: none;
}

#tooltip p
{
    margin: 0;
    font-family: 'PT Sans';
    font-size: 15px;
    line-height: 20px;
}

JavaScript

var svg,
width = 900,
height = 800,
data = [0.0, 0.0, 400000000.0, 182465170.0, 36766760.0, 0.0, 0.0, 219231930.0, 66179955.0, 50000000.0, 125393000.0],
keys = ["1","2","3","4","5","6","7","8","9","10","11"];

svg = d3.select("#omsk_road")
        .append("svg")
        .attr("width", width)
        .attr("height", height);

svg.append("text")
     .attr("id", "id_1")
     .attr("x", 84)
     .attr("y", 310);

    svg.append("text")
     .attr("id", "id_2")
     .attr("x", 260)
     .attr("y", 252);

    svg.append("text")
     .attr("id", "id_3")
     .attr("x", 395)
     .attr("y", 740);

    svg.append("text")
     .attr("id", "id_4")
     .attr("x", 605)
     .attr("y", 680);

    svg.append("text")
     .attr("id", "id_5")
     .attr("x", 325)
     .attr("y", 587);

    svg.append("text")
     .attr("id", "id_6")
     .attr("x", 138)
     .attr("y", 635);

    svg.append("text")
     .attr("id", "id_7")
     .attr("x", 560)
     .attr("y", 582);

    svg.append("text")
     .attr("id", "id_8")
     .attr("x", 600)
     .attr("y", 300);

    svg.append("text")
     .attr("id", "id_9")
     .attr("x", 410)
     .attr("y", 155);

    svg.append("text")
     .attr("id", "id_10")
     .attr("x", 705)
     .attr("y", 205);

    svg.append("text")
     .attr("id", "id_11")
     .attr("x", 795)
     .attr("y", 362);
 
for (var i = 1; i < 12; i++) {
        d3.select("#id_" + i)
            .text(parseFloat(data[i - 1] / 1000000).toFixed(2))
            .on("mouseover", function (d) {
                 d3.select("#tooltip")
			        .style("left", "200px")
                    .style("top", d3.event.pageY - 30 + "px")
				    .select("#info")
				    .html("<b>" + keys[i - 2] + "</b>");
                 d3.select("#tooltip").classed("hidden", false);
                    })
		    .on("mouseout", function () {
		         d3.select("#tooltip").classed("hidden", true);
		});
    }