JSFiddle - React, Tailwind, and code Playground

by Cyril Cherian

HTML

<div id="tooltip_svg_01" style="opacity:0">
  <p><strong>Important Label Heading</strong></p>
  <p><span id="value_tt_01">None</span></p>
  <p><a id="link_tt_01" href="" >None</a></p>
</div>

CSS

#tooltip_svg_01 {
                position: absolute;
                width: 200px;
                height: auto;
                padding: 10px;
                background-color: white;
                -webkit-border-radius: 10px;
                -moz-border-radius: 10px;
                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);
                box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
            }


            #tooltip_svg_01 p {
                margin: 0;
                font-family: sans-serif;
                font-size: 16px;
                line-height: 20px;
            }

JavaScript

// copied from views/d3js/eg0003.html

//Width and height
            var w = 800;
            var h = 800;
            var dataset = [
                    {"y": 79, "reportid": 2, "rowid": 2, "x": 0.11318094},
                    {"y": 59, "reportid": 5, "rowid": 5, "x": -3.45149447},
                    {"y": 46, "reportid": 7, "rowid": 7, "x": -1.94916377},
                    {"y": 72, "reportid": 9, "rowid": 9, "x": -1.10195137},
                    {"y": 26, "reportid": 0, "rowid": 0, "x": -18.88924348},
                    {"y": 40, "reportid": 1, "rowid": 1, "x": -28.33967835},
                    {"y": 19, "reportid": 3, "rowid": 3, "x": -15.00609877},
                    {"y": 40, "reportid": 4, "rowid": 4, "x": -27.67062647},
                    {"y": 24, "reportid": 6, "rowid": 6, "x": -18.29228398},
                    {"y": 11, "reportid": 8, "rowid": 8, "x": -7.46456827},
                    {"y": 23, "reportid": 10, "rowid": 10, "x": -17.02971738},
                    {"y": 53, "reportid": 11, "rowid": 11, "x": -3.6706257}
            ];

            //Width and height
            var scatter_radius = 25;
            var xpadding = 80;
            var ypadding = 80;
            
            var xScale = d3.scale.linear()
                                 .domain([-40, 20])
                                 .range([xpadding, w-xpadding]);

            var yScale = d3.scale.linear()
                                 .domain([0,90])
                                 .range([h, ypadding]);
    
            //Create SVG element
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);

            var mouseout_delay = 7000;

            svg.selectAll("circle")
               .data(dataset)
               .enter()
               .append("circle")
               .attr("cx", function(d) {
                    return xScale(d['x']);
               })
     ...