let svg = d3.create('svg').style("background-color", '#101010').attr("preserveAspectRatio", "none") .attr("viewBox", "-2 -2 880 850")

let phantom_color = "#609faa"

let vandal_color = "#e83a49"

let x_fkp_scale = d3.scaleLinear()

.domain([0, .4])

.range([270, 625])

// Logo of Tournament

svg.append("image")

.attr("xlink:href", "")

.attr("id", "logoImage")

.attr("x", 200)

.attr("y", 10)

.attr("width", 500)

.attr("height", 110);

svg.append("image")

.attr("xlink:href", "https://owcdn.net/img/638e35b162881.png")

.attr("id", "logoImage")

.attr("x", 400)

.attr("y", 20)

.attr("width", 100)

.attr("height", 100);

// Signature

svg.append("text")

.attr("class", "signature")

.attr("text-anchor", "left")

.attr("y", 2)

.attr("x", 0)

.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';").attr("fill", "white");

// Data from run it back

svg.append("text")

.attr("class", "signature")

.attr("text-anchor", "left")

.attr("y", 38)

.attr("x", 0)

.attr("dy", ".75em")

.attr('style', "font-size: 20px; font-family: 'Bebas Neue';")

.text("Data from rib.gg").call(addWebFont, 'Bebas Neue', 'https://fonts.gstatic.com/s/bebasneue/v2/JTUSjIg69CK48gW7PXoo9WlhyyTh89Y.woff2').attr('style', d => "font-size: 20px; font-family: 'Bebas Neue';").attr("fill", "white");

// Twitter Tag

svg.append("text")

.attr("class", "twitter")

.attr("text-anchor", "left")

.attr("y", 20)

.attr("x", 16)

.attr("dy", ".75em")

.attr('style', "font-size: 20px; font-family: 'Bebas Neue';")

.text("@MasGrebnesor").call(addWebFont, 'Bebas Neue', 'https://fonts.gstatic.com/s/bebasneue/v2/JTUSjIg69CK48gW7PXoo9WlhyyTh89Y.woff2').attr('style', d => "font-size: 20px; font-family: 'Bebas Neue';").attr("fill", "white");

// Twitter Icon

svg.append("image")

.attr("xlink:href", "https://cdn4.iconfinder.com/data/icons/social-media-icons-the-circle-set/48/twitter_circle-512.png")

.attr("id", "logoImage")

.attr("x", 0)

.attr("y", 22)

.attr("width", 14)

.attr("height", 14);

// Top and Left Offsets

let left_offset = 110

let top_offset = 200

// Title

var text2 = svg.append("svg:text").attr("class", "title")

.attr("text-anchor", "middle")

.attr("y", top_offset-20)

.attr("x", 900/2)

.attr('style', "font-size: 57px; font-family: 'Bebas Neue';").attr("fill", "black");

;

text2.append("svg:tspan").style("fill", "white").text("Average ");

text2.append("svg:tspan").style("fill", "#10b39d").text("Gun Cost ");

text2.append("svg:tspan").style("fill", "white").text("vs ");

text2.append("svg:tspan").style("fill", "#10b39d").text("Combat Score");

return svg.node();

}

return new Promise(async(resolve, reject) => {

const res = await fetch(url);

if(!res.ok) return reject(`Error: ${res.status} ${res.statusText}`);

const blob = await res.blob();

const reader = new FileReader();

reader.readAsDataURL(blob);

reader.onloadend = () => resolve(reader.result);

});

}

const fontData = await toDataURL(fontURL);

return selection.append('style').text(`

getCsvUrl = url => {

url = new URL(url);

const id = url.pathname.split("/")[3]

const sheet = new URLSearchParams(url.hash.slice(1)).get("gid") || 0;

return `https://docs.google.com/spreadsheets/d/${id}/gviz/tq?tqx=out:csv&sheet=${sheet}`