percentPlayed = {
let naColor = "#C33C54"
let euColor = "#4D8EA7"
let svg = d3.create('svg').style("background-color", 'white').attr("preserveAspectRatio", "none").style("background-color", 'white').attr("viewBox", "0 0 1150 650");
let viperColor = "#1ab963"
svg.append("text")
.attr("class", "signature")
.attr("text-anchor", "middle")
.attr("y", 2)
.attr("x", 963/2)
.attr("dy", ".75em")
.attr('style', "font-size: 20px; font-family: 'Bebas Neue';")
.text("Author: Sam Rosenberg").call(addWebFont, 'Bebas Neue', 'https://fonts.gstatic.com/s/bebasneue/v2/JTUSjIg69CK48gW7PXoo9WlhyyTh89Y.woff2').attr('style', d => "font-size: 20px; font-family: 'Bebas Neue';");
svg.append("text")
.attr("class", "signature")
.attr("text-anchor", "middle")
.attr("y", 480)
.attr("x", 1008)
.attr("dy", ".75em")
.attr('style', "font-size: 30px; font-family: 'Bebas Neue';")
.text("Image from valorant.fandom.com").attr('style', d => "font-size: 19px; font-family: 'Bebas Neue';");
svg.append('rect')
.attr('x', 0)
.attr('y', 0)
.attr('width', 140)
.attr('height', 40)
.attr('stroke', 'black')
.attr('fill', 'black');
svg.append("image")
.attr("xlink:href", "https://runitback.gg/static/media/logo.dcfad9c9.png")
.attr("x", 10)
.attr("y", -10)
.attr("width", 120)
.attr("height", 60);
svg.append("image")
.attr("xlink:href", "https://greblytics.com/wp-content/uploads/2021/04/viper.png")
.attr("x", 810)
.attr("y", 0)
.attr("width", 400)
.attr("height", 480);
var text2 = svg.append("svg:text").attr("class", "title")
.attr("xlink:href", "greblytics.com")
.attr("text-anchor", "middle")
.attr("y", 60)
.attr("x", 963/2)
.attr('style', "font-size: 45px; font-family: 'Bebas Neue';");
;
text2.append("svg:tspan").style("fill", euColor).text("Europe");
text2.append("svg:tspan").style("fill", "black").text(" vs. ");
text2.append("svg:tspan").style("fill", naColor).text("North America ");
text2.append("svg:tspan").style("fill", "black").text("Viper")
text2.append("svg:tspan").style("fill", "black").text(" Pickrates");
let viperX = d3.scaleOrdinal()
.domain(["", "S1C1", "S1C2", "S1C3", "S1M", "S2C1", "S2C2"])
.range([50, 100, 250, 400, 550, 700, 850].map(d=> d*0.95 + 30))
let viperXAxis = d3.scaleOrdinal()
.domain(["", "Stage 1: Challengers 1", "Stage 1: Challengers 2", "Stage 1: Challengers 3", "Stage 1: Masters", "Stage 2: Challengers 1", "Stage 2: Challengers 2"])
.range([21, 100, 250, 400, 550, 700, 850].map(d=> d*0.95 + 30))
let viperY = d3.scaleLinear()
.domain([-2,30])
.range([450, 80])
const line = d3.line()
.x(function(d) {return d[0];})
.y(function(d) {return d[1];})
let data = []
for (let i = 0; i < Object.keys(euVipers).length; i++)
{
data.push([viperX(Object.keys(euVipers)[i]), viperY(euVipers[Object.keys(euVipers)[i]])])
}
console.log(data)
d3.select('svg')
.append('path')
.datum(data)
.attr('d', line)
.attr('stroke', 'black')
for (let i = 0; i < Object.keys(euVipers).length-1; i++)
{
let xOld = viperX(Object.keys(euVipers)[i])
let yOld = viperY(euVipers[Object.keys(euVipers)[i]])
let xNew = viperX(Object.keys(euVipers)[i+1])
let yNew = viperY(euVipers[Object.keys(euVipers)[i+1]])
svg.append("line").attr("x1", xOld).attr("y1", yOld).attr("x2", xNew).attr("y2", yNew).attr("stroke", euColor).attr("stroke-width", 3)
}
for (let i = 0; i < Object.keys(naVipers).length-1; i++)
{
let xOld = viperX(Object.keys(naVipers)[i])
let yOld = viperY(naVipers[Object.keys(naVipers)[i]])
let xNew = viperX(Object.keys(naVipers)[i+1])
let yNew = viperY(naVipers[Object.keys(naVipers)[i+1]])
svg.append("line").attr("x1", xOld).attr("y1", yOld).attr("x2", xNew).attr("y2", yNew).attr("stroke", naColor).attr("stroke-width", 3)
}
for (let i = 0; i < Object.keys(euVipers).length; i++)
{
svg.append("circle")
.attr("cx", viperX(Object.keys(euVipers)[i]))
.attr("cy", viperY(euVipers[Object.keys(euVipers)[i]]))
.attr("r", 5).attr("fill", euColor)
}
for (let i = 0; i < Object.keys(naVipers).length; i++)
{
svg.append("circle")
.attr("cx", viperX(Object.keys(naVipers)[i]))
.attr("cy", viperY(naVipers[Object.keys(naVipers)[i]]))
.attr("r", 5).attr("fill", naColor)
}
for (let i = 0; i < Object.keys(naVipers).length; i++)
{
svg.append("rect")
.attr("x", viperX(Object.keys(naVipers)[i])-80)
.attr("y", 80)
.attr("width", 160)
.attr("height", 370)
.attr("fill", 'transparent')
.on('mouseover', function(event, d) {
d3.select(this).attr('fill', "grey").attr('opacity', 0.2);
let selectedEventVipers = NAPlayers[Object.keys(NAPlayers)[i]].filter(d => d.Agent === "Viper")
drawTeamLogosNA(selectedEventVipers)
let selectedEventVipersEU = EUPlayers[Object.keys(EUPlayers)[i]].filter(d => d.Agent === "Viper")
drawTeamLogosEU(selectedEventVipersEU)
})
.on('mouseout', function(event, d) {
d3.select(this).attr('fill', "transparent");
console.log(event)
})
}
let boxWidth = 100;
function drawTeamLogosEU(selectedEventVipers)
{
for (let i = 0; i < selectedEventVipers.length; i++)
{
console.log(selectedEventVipers[i])
svg.append("rect")
.attr("x", 1090 - i*boxWidth - boxWidth/2)
.attr("y", 505)
.attr("width", boxWidth)
.attr("height", boxWidth+35)
.attr("fill", euColor).attr("opacity", 0.4)
.attr("stroke-thickness", 3).attr("stroke", "black")
svg.append("text")
.attr("class", "signature")
.attr("text-anchor", "middle")
.attr("y", 530)
.attr("x", 1090 - i*boxWidth)
.attr('style', "font-size: 50px; font-family: 'Bebas Neue';")
.text(selectedEventVipers[i]["Ign"]).attr('style', d => "font-size: 30px; font-family: 'Bebas Neue';");
svg.append("image")
.attr("xlink:href", teamLogos[selectedEventVipers[i]["Team"]])
.attr("x", 1090 - i*boxWidth - boxWidth/2)
.attr("y", 540)
.attr("width", boxWidth)
.attr("height", boxWidth);
}
}
function drawTeamLogosNA(selectedEventVipers)
{
svg.append("rect")
.attr("x", 0)
.attr("y", 500)
.attr("width", 1150)
.attr("height", 300)
.attr("fill", 'white')
for (let i = 0; i < selectedEventVipers.length; i++)
{
console.log(selectedEventVipers[i])
svg.append("rect")
.attr("x", 60 + i*boxWidth - boxWidth/2)
.attr("y", 505)
.attr("width", boxWidth)
.attr("height", boxWidth+35)
.attr("fill", naColor).attr("opacity", 0.4)
.attr("stroke-thickness", 3).attr("stroke", "black")
svg.append("text")
.attr("class", "signature")
.attr("text-anchor", "middle")
.attr("y", 530)
.attr("x", 60 + i*boxWidth)
.attr('style', "font-size: 50px; font-family: 'Bebas Neue';")
.text(selectedEventVipers[i]["Ign"]).attr('style', d => "font-size: 30px; font-family: 'Bebas Neue';");
svg.append("image")
.attr("xlink:href", teamLogos[selectedEventVipers[i]["Team"]])
.attr("x", 60 + i*boxWidth - boxWidth/2)
.attr("y", 540)
.attr("width", boxWidth)
.attr("height", boxWidth);
}
}
svg.append('g')
.attr('transform', `translate(${50}, 0)`)
.call(d3.axisLeft(viperY).tickFormat(function(d) { return d + "%"})).attr('style', d => "font-size: 20px; font-family: 'Bebas Neue';");
svg.append('g')
.attr('transform', `translate(0, ${450})`)
.call(d3.axisBottom(viperXAxis)).attr('style', d => "font-size: 15px; font-family: 'Bebas Neue';");
return svg.node();
}