var games = data;
console.log(games);

var svgContainer = d3.select("main").append("svg")
    .attr("id", "canvas")
    .attr("width", 1000)
    .attr("height", 1000);

var circles = svgContainer.selectAll("circle")
    .data(games)
    .enter()
    .append("circle")
var xCordinate = 0
var xCordinate2 = 0
var radius = 20
var circleAttributes = circles
    .attr("cx", function(d){
        xCordinate = xCordinate + 42
        return xCordinate;
    })
    .attr("cy", 100)
    .attr("r", radius)
    .style("fill", function(d){
        var returnColor;
        if (d.result === 'Loss') { returnColor = "red";
        } else if (d.result === 'Win') { returnColor = "green";}
        return returnColor;
    })
    .on("mouseover", function(d){
        d3.select(this)
            .style("fill", "blue")
            .attr("r", radius * 10)
            .attr("cy", 500)
            .attr("cx", 500)
    })
    .on("mouseout", function(d){
        d3.select(this)
            .style("fill", function(d){
                var returnColor;
                if (d.result === 'Loss') { returnColor = "red";
                } else if (d.result === 'Win') { returnColor = "green";}
                return returnColor;
            })
            .attr("r", radius)
            .attr("cy", 900)
            .attr("cx", function(d){
                xCordinate2 = xCordinate2 + 42
                return xCordinate2;
            })
    });