Test

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .line {
      fill: none;
      stroke: black;
      stroke-width: 1.5px;
    }
  </style>
</head>

<body>
  <script>
		
    //Make the SVG container
    var svgContainer = d3.select("body").append("svg")
    																		.attr("width",960)
    																		.attr("height",540);
    							
    //Draw the xAxis
    var xAxis = svgContainer.append("line")
    														.attr("x1",0)
    														.attr("y1",280)
    														.attr("x2",900)
        												.attr("y2",280)
    														.attr("stroke-width",2)
    														.attr("stroke","black");
		//Draw the yAxis
    var yAxis = svgContainer.append("line")
    														.attr("x1",270)
    														.attr("y1",0)
    														.attr("x2",270)
        												.attr("y2",540)
    														.attr("stroke-width",2)
    														.attr("stroke","black");

svgContainer.append("circle")
      					.attr("r",5)
      					.attr("cx",50)
    						.attr("cy",50)
    						.attr("fill","green")
    						.on("mouseover",function(d){
      								d3.select(this).style("fill","red")
                      svgContainer.append("text")
                      						.text("the dot")
                      						.attr("id","tooltip")
                      						.attr("x",50+5)
                      						.attr("y",50-10)
    							})
    						.on("mouseout",function(d){
      								d3.select(this).style("fill","lightgreen")
                      svgContainer.select("#tooltip").remove()
    							})

//to load the data from the csv file
    d3.csv("flowers.csv",function(data){
      data.forEach(function(d){
				var x= +d.sepal_length*50;
        var y= +d.sepal_width*50;
        var color;
        switch(d.species){
          case "setosa": {color="lightgreen";break;}
          case "versicolor": {color="lightblue";break;}
          case "virginica": {color="yellow";break;}
        }
        svgContainer.append("circle")
        				.attr("r",5)
      					.attr("cx",x)
    						.attr("cy",y)
                .attr("fill",color)
        				.attr("stroke","#EEE")
        				.on("mouseover",function(dd){
          						d3.select(this).style("fill","red")
          						svgContainer.append("text")
                      						.text(d.species)
                      						.attr("id","tooltip")
                      						.attr("x",x+5)
                      						.attr("y",y-10)
        						})
        				.on("mouseout",function(dd){
          						d3.select(this).style("fill",color)
                      svgContainer.select("#tooltip").remove()
        						})
    						
      })
    });

</script>
</body>

https://d3js.org/d3.v3.min.js