D3 Examples - Shotmappingtest

xxxxxxxxxx
 
<!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>
​
    