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 + ")");

 var circles = boxGroupElement.selectAll('circle')
   .data(data)
   .enter()
   .append('circle')
   .attr("cx", function(d) {
     return d.x
   })
   .attr("cy", function(d) {
     return d.y
   })
   .attr("r", "3")
   .attr("fill", "yellow")
   .attr("stroke", "blue")
   .on("mouseover", function(d) {
     tooltip.text("Pos : " + d.x + ' : ' + d.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");
   });