JSFiddle - React, Tailwind, and code Playground

by khurramali51

HTML

<script src="https://d3js.org/d3.v5.min.js"></script>

CSS

.line 
{
  fill:none;
  stroke:yellow;
  stroke-width:4;
}

div.tooltip {	
    position: absolute;			
    text-align: center;			
    width: 60px;					
    height: 28px;					
    padding: 2px;				
    font: 12px sans-serif;		
    background: lightsteelblue;	
    border: 0px;		
    border-radius: 8px;			
    pointer-events: none;			
}

JavaScript

var monthlySales = [
{"month":10, "sales":100},
{"month":20, "sales":130},
{"month":30, "sales":250},
{"month":40, "sales":300},
{"month":50, "sales":265},
{"month":60, "sales":225},
{"month":70, "sales":180},
{"month":80, "sales":120},
{"month":90, "sales":145},
{"month":100, "sales":130}
];

var margin = {top: 50, right: 50, bottom: 50, left: 50}
var width = window.innerWidth - margin.left - margin.right;
var height = window.innerHeight - margin.top - margin.bottom; 

var padding = 40;

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
    
var minmax_X = [];  var minmax_Y = [];

for(var i in monthlySales)    // converting to array
           minmax_X.push(monthlySales[i].month);
for(var j in monthlySales)
					 minmax_Y.push(monthlySales[j].sales);
           
var xScale = d3.scaleLinear().domain([d3.min(minmax_X),d3.max(minmax_X)]).range([0,width]);
var yScale = d3.scaleLinear().domain([d3.min(minmax_Y),d3.max(minmax_Y)]).range([height,0]);

var div = d3.select("body").append("div")	
    .attr("class", "tooltip")				
    .style("opacity", 0);

var circle = svg.selectAll("g")
								.data(monthlySales)
                .enter()
                .append("circle")
                .attr("cx", function (d,i) { return xScale(d.month); } )
          			.attr("cy", function (d) { return yScale(d.sales); } )
          			.attr("r", 8)
                .attr("fill","purple")
                .on("mouseover", function(d) {		
                div.transition()		
                	.duration(200)		
                	.style("opacity", 0.9);
                d3.select(this).attr("transform","scale(0.5)");
            		div	.html(d.month + "<br/>"  + d.sales)	
                	.style("left", (d3.event.pageX) + "px")		
                  .style("top", (d3.event.pageY - 28) + "px");	
       ...