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>
		
    var margin = {top:20, right:20, bottom:70, left:40}
    var width = 600-margin.left-margin.right
    var height = 400-margin.top-margin.bottom
    
    var x=d3.scale.linear().range([width,0])
    var y=d3.scale.linear().range([height,0])
    
    var xAxis = d3.svg.axis()
    								.scale(x)
    								.orient("bottom")
    								.ticks(10);
    var yAxis = d3.svg.axis()
    								.scale(y)
    								.orient("left")
    								.ticks(10);   
    
    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 + ")")
    
    
    
    
    
    
    </script>
</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>

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