JSFiddle - React, Tailwind, and code Playground

by Sergey Kalashnikov

HTML

<body>
    <svg>
        <path...

CSS

html {
    height: 1000px;
    width: 1200px;
}
svg {
    height: 1000px;
    width: 1200px;
    position: absolute;
    left: -700px;
    top: -160px;
}
path{
    stroke: grey;
    stroke-width: 1px;
    fill:none;
    width: 500px;
    -webkit-transform: scaleX(1.2);
}

.tooltip {
  position: absolute;
  z-index: 10;
  text-align: center;
  width: 250px;
  height: 160px;
  padding: 1px;
  background: white;
  border: solid 1px black;
  border-radius: 8px;
  pointer-events: none;
}

JavaScript

var tooltip = d3.select("body")
//var div=tooltip.append("div")
    .append("div")
	.attr("class", "tooltip")
    .style("visibility", "hidden")
    //.text("a simple tooltip");    
    //.html('<iframe style="background-color:transparent;" src="http://81.177.142.215/files/data/graph1min.html" height="170" frameborder="0" scrolling="no" allowtransparency="true"></iframe>');

var color=d3.scale.linear().domain([0, 100])
            .range(['red', 'green'])

//var city = [2, 5];
var city = [
    [810*1.2, 420, 90, 'http://81.177.142.215/files/data/camera.html', 'Хабаровск'],
    [810*1.2, 380, 20, 'http://81.177.142.215/files/data/barchartmain2.html', 'Комсомольск']
];
d3.select('body')
    .append('h3')
.text('Темп строительства жилья в Хабаровском крае')

body = d3.select('body')
svg = body.append('svg')
circle = svg.selectAll('circle')
    .data(city)
    .enter()
circle.append('circle')
    .attr('r', 10)
    .attr('cx', function (c) {
    return c[0]
})
    .attr('cy', function (c) {
    return c[1]
})
    .attr('fill', function (d) {
    return color(d[2])
})
// обрабатываем наведение курсора на добавленный circle
.on("mouseover", function (c) {
        tooltip.html(c[4]+'<br><iframe style="background-color:transparent;" src="'+c[3]+'" width="500" height="260" frameborder="0" scrolling="no" allowtransparency="true"></iframe>');
    return tooltip.style("visibility", "visible");
})

    .on("mousemove", function () {
        //tooltip.
    return tooltip.style("top", (d3.event.pageY - 10) + "px").style("left", (d3.event.pageX + 10) + "px");
})

    .on("mouseout", function () {
    return tooltip.style("visibility", "hidden");
});