Shotmappingtest

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:1;right:0;bottom:0;left:0; }
    svg {
      background: 									url('https://www.printyourbrackets.com/images/printable-soccer-field-diagram.png') no-repeat;
      position:margin:0;position:fixed;top:0;right:0;bottom:0;left:0;
      background-size: 420px 360px;
      position: relative;
      transform: rotate(90deg);
  }}
  </style>
  
</head>

<body>
  <script>
	d3.csv('ArsenalShots.csv', function (data) {
    console.log(data)
    
    //width and height
    	var ratio = 4
    	var height = ratio*90
      var width = ratio*120
      var padding = 5
      
      //Create scale functions
			var xScale = d3.scaleLinear()
								 .domain([-60, 60 ])
								 .range([padding, width - padding * 2]);
			var yScale = d3.scaleLinear()
								 .domain([-45,45])
								 .range([height - padding, padding]);
      var aScale = d3.scaleSqrt()
								 .domain([0, 1])
								 .range([0, 15]);
    
    //Create SVG element
			var svg = d3.select("body")
						.append("svg")
						.attr("width", width)
						.attr("height", height);
    
    	//Define X axis
    	var xAxis = d3.axisBottom(xScale)
      					 .ticks(5);
    
    	//Define Y axis
    	var yAxis = d3.axisLeft(yScale)
      					 .ticks(5)
    
    	svg.selectAll("circle")
			   .data(data)
			   .enter()
			   .append("circle")
			   .attr("cx", function(d) {
			   		return xScale([-d.Xpos]);
			   })
			   .attr("cy", function(d) {
			   		return yScale([d.ypos]);
			   })
			   .attr("r", function(d){
        		return aScale([d.xG]);
         })
      	 .style("fill", function(d){
        		if (d.Goal == 1){
              	return "red";
            } else {
              	return "grey";
            }
      	 })
      	 
				 .style("opacity", 0.6)	      	 
      	 .on('mouseover', function () {
        	d3.select(this)
          .transition()
          .duration(500)
          .attr("r", function(d){
        			return aScale(3*[d.xG]);
         })})
         .on('mouseout', function () {
        	d3.select(this)
          .transition()
          .duration(500)
          .attr("r", function(d){
        			return aScale([d.xG]);
         })})
        .append("title")
      	 .text(function(d){
        			 return d.Player +
               '\n Team: ' + d.Team +
               '\n xG: ' + d.xG +
      				 '\n Game: ' + d.Game });

//Create X axis
    	//svg.append("g")
      //		.attr("class", "axis")
      //		.attr("transform", "translate(0,"+(height-padding)+")")
      //		.call(xAxis);
    
    	//Create Y axis
    	//svg.append("g")
      //		.attr("class", "axis")
      //		.attr("transform", "translate(" + padding + ",0)")
      //		.call(yAxis);
    
  })

</script>
</body>

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