percentPlayed = {
let selectedAgentsString = mutable selectedAgents.sort().join(', ');
let svg = d3.create('svg').style("background-color", 'white').attr("preserveAspectRatio", "none") .attr("viewBox", "0 0 963 500")
console.log(selectedAgents)
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';");
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(lastClicked).call(addWebFont, 'Bebas Neue', 'https://fonts.gstatic.com/s/bebasneue/v2/JTUSjIg69CK48gW7PXoo9WlhyyTh89Y.woff2').attr('style', d => "font-size: 0; font-family: 'Bebas Neue';");
svg.append("image")
.attr("xlink:href", "https://greblytics.com/wp-content/uploads/2021/03/cropped-Grebnesor-Analytics-SK_JRD-01.png")
.attr("x", 0)
.attr("y", 15)
.attr("width", 160)
.attr("height", 80);
svg.append("text")
.attr("class", "citation")
.attr("text-anchor", "end")
.attr("y", 2)
.attr("x", 963)
.attr("dy", ".75em")
.attr('style', "font-size: 20px; font-family: 'Bebas Neue';")
.text("Data from runitback.gg");
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", "black").text("Composition Playrate in Masters 1");
for (let i = 0; i < 5; i++)
{
svg.append("rect")
.attr("x", 180 + 130*i)
.attr("y", 100)
.attr("width", 120)
.attr("height", 120)
.attr("fill", "#eeeeee")
if (selectedAgents.length > i)
{
svg.append("image")
.attr("xlink:href", agents.data.find(a => a.displayName === mutable selectedAgents[i]).displayIcon)
.attr("x", 180 + 130*i)
.attr("y", 100)
.attr("width", 120)
.attr("height", 120);
}
}
var radius = 90;
let totalIn = appearsIn(mutable selectedAgents)
var data = {observed: totalIn, not: 652-totalIn}
var color = d3.scaleOrdinal()
.domain(["observed", "not"])
.range(["#98abc5", "#ffffff"])
var pie = d3.pie()
.value(function(d) {return d[1];})
var data_ready = pie(Object.entries(data))
console.log(data_ready)
svg.append("text")
.attr("class", "percent")
.attr("text-anchor", "middle")
.attr("y", 314)
.attr("x", 482)
.attr("dy", ".75em")
.attr('style', "font-size: 55px; font-family: 'Bebas Neue';")
.text(((totalIn/652)*100).toFixed(1) + "%");
svg.append("text")
.attr("class", "label")
.attr("text-anchor", "middle")
.attr("y", 362)
.attr("x", 482)
.attr("dy", ".75em")
.attr('style', "font-size: 15px; font-family: 'Bebas Neue';")
.text("of all comps");
svg.selectAll('whatever')
.data(data_ready)
.join('path').attr('transform','translate(482, 340)')
.attr('d', d3.arc()
.innerRadius(60)
.outerRadius(radius)
)
.attr('fill', function(d){console.log(d.data);return(color(d.data[0]))})
.attr("stroke", "black")
.style("stroke-width", "2px")
.style("opacity", 0.7)
return svg.node();
}