JSFiddle - React, Tailwind, and code Playground

by khurramali51

HTML

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

CSS

.line 
{
  fill:none;
  stroke:purple;
  stroke-width:4;
}
.focus circle {
  fill: #F1F3F3;
  stroke: #6F257F;
  stroke-width: 5px;
}

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 minmax_X_result = [];
for(var i in monthlySales)
    minmax_X_result.push(monthlySales[i].month);

var minmax_Y_result = [] 
for(var i in monthlySales)
    minmax_Y_result.push(monthlySales[i].sales)

var xScale = d3.scaleLinear().domain([d3.min(minmax_X_result),d3.max(minmax_X_result)]).range([0,width]);
var yScale = d3.scaleLinear().domain([d3.min(minmax_Y_result),d3.max(minmax_Y_result)]).range([height,0]);

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 line = d3.line().x(function(d)
                      { return xScale(d.month);})
                   .y(function(d) 
                      { return yScale(d.sales)+5;});//.curve(d3.curveMonotoneX); 

var focus = svg.append("g")
        .attr("class", "focus")
        .style("display", "none")
        
 var smCircle = focus.append("circle")
        .attr("r", 7.5);

    focus.append("text")
        .attr("x", 15)
      	.attr("dy", ".31em");

svg.append("path").attr("class","line").attr("d",line(monthlySales))
				.on("mouseover", function() { focus.style("display", null); 
           focus.select("text").text(function(){
           						
           });
        })
        .on("mouseout", function() { focus.style("display", "none");})
				.on("mousemove",function(){
             var x = d3.mouse(this)[0];
          ...