JSFiddle - React, Tailwind, and code Playground

by A B Jones

JavaScript

var data = [{
   "x": "100",
   "y": "20"
 }, {
   "x": "102",
   "y": "22"
 }, {
   "x": "200",
   "y": "30"
 }, {
   "x": "500",
   "y": "40"
 }, {
   "x": "500",
   "y": "30"
 }];

 var svgHeight = 800;
 var svgWidth = 800;
 var margin = 50;


 var tooltip = d3.select("body")
   .append("div")
   .style("position", "absolute")
   .style("z-index", "10")
   .style("visibility", "hidden")
   .text("a simple tooltip");


 var divelement = d3.select("body")
   .append("div")
   .attr("height", svgHeight)
   .attr("width", svgWidth)
   .attr("style", "border:1px solid black;");

 var svgElement = divelement.append("svg")
   .attr("height", svgHeight)
   .attr("width", svgWidth);

 var boxGroupElement = svgElement.append("g")
   .attr("transform", "translate(" + margin + "," + margin + ")");



 //appending data circle points        
 for (var a = 0; a < data.length; a++) {
   boxGroupElement.append("circle")
     .attr("cx", data[a].x)
     .attr("cy", data[a].y)
     .attr("r", "3")
     .attr("fill", "yellow")
     .attr("stroke", "blue")
     .on("mouseover", function(d, i) {
       tooltip.text("Pos : " + data[i].x + ' : ' + data[i].y);

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