31:T134b,selectone = { let selected = [...mutable selectedAgents] let svg = d3.create('svg').style("background-color", 'white').style('max-width', '100%').attr("viewBox", "0 0 963 100"); svg.append('text') .attr('x', -100) .attr('y', -100) .text(mutable selectedAgents) .attr('fill', '#ebe8e0') .attr("text-anchor", "middle") .attr('style', "font-size: 16px; font-family: 'Bebas Neue';"); let boxWidth = (963)/15; let height = boxWidth*2; let textHeight = 15; function makeRect(agentName, i) { svg.append('rect').attr("id", agentName.substring(0,3)+"Back") .attr('x', boxWidth*i) .attr('y', 0) .attr('width', boxWidth) .attr('height', boxWidth+20) .attr('stroke', 'black') .attr('fill', function(d){ if (mutable selectedAgents.includes(agentName)) { return '#f14853'} else {return '#656c71'} }); } function writeText(agentName, i) { svg.append('text') .attr('x', boxWidth*(i+.5)) .attr('y', textHeight) .text(agentName) .attr('fill', '#ebe8e0') .attr("text-anchor", "middle") .attr('style', "font-size: 16px; font-family: 'Bebas Neue';"); } function addImage(agentName, i) { svg.append("image") .attr("xlink:href", agents.data.find(a => a.displayName === agentName).displayIcon) .attr("x", boxWidth*i+5) .attr("y", 20) .attr("width", boxWidth-10) .attr("height", boxWidth); } function coverBox() { for (let i = 0; i < 15; i++) { let agentName = agentNames[i]; d3.select('#'+agentName.substring(0,3)+"Cover").attr('opacity', function(d){ let temp = [...selected]; temp.push(agentName) if (appearsIn(temp) > 0 || selected.includes(agentName)) { console.log(temp) console.log("transparent" + agentName); return 0; } else { return 0.6; } }).attr('fill', function(d){ let temp3 = [...selected]; temp3.push(agentName) if (appearsIn(temp3) > 0 || selected.includes(agentName)) { console.log(temp3) return 'transparent'; } else { console.log("nontransparent" + agentName); return 'black'; } }) d3.select('#'+agentName.substring(0,3)+"Back").attr('fill', function(d){ if (mutable selectedAgents.includes(agentName)) { return '#f14853'} else {return '#656c71'} }); } } /* function InitialcoverBox() { for (let i = 0; i < 15; i++) { let agentName = agentNames[i]; svg.append('rect') .attr('x', boxWidth*i) .attr('y', 0) .attr('width', boxWidth) .attr('height', boxWidth+20) .attr('stroke', 'black') .attr('fill', function(d){ let temp = [...selected]; temp.push(agentName) if (appearsIn(temp) > 0 || selected.includes(agentName)) { console.log(temp) console.log("yay"); return 'transparent'; } else { return 'black'; } }) } } */ function clickBox(agentName, i) { svg.append('rect').attr("id", agentName.substring(0,3)+"Cover") .attr('x', boxWidth*i) .attr('y', 0) .attr('width', boxWidth) .attr('height', boxWidth+20) .attr('stroke', 'black') .attr('fill', function(d){ let temp = [...selected]; temp.push(agentName) if (appearsIn(temp) > 0 || selected.includes(agentName)) { console.log(temp) console.log("yay"); return 'transparent'; } else { return 'black'; } }) .on("click", function(event, d){ let temp2 = [...selected]; temp2.push(agentName) if (appearsIn(temp2) > 0 || selected.includes(agentName)) { mutable lastClicked = agentName; if (mutable selectedAgents.includes(agentName)) { const index = mutable selectedAgents.indexOf(agentName); if (index > -1) { mutable selectedAgents.splice(index, 1); selected = [...mutable selectedAgents] } } else if (selectedAgents.length< 5) { mutable selectedAgents.push(agentName); selected.push(agentName); selected = [...mutable selectedAgents] } clickBox(agentName, i); coverBox(); } } ); } function callAll() { for (let i = 0; i < 15; i++) { makeRect(agentNames[i], i); writeText(agentNames[i], i); addImage(agentNames[i], i); clickBox(agentNames[i], i); coverBox(); } } callAll() // // https://media.valorant-api.com/weapons/ee8e8d15-496b-07ac-e5f6-8fae5d4c7b1a/killstreamicon.png return svg.node(); } 32:Tebd,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); } } //top donut 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) // This is the size of the donut hole .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(); }33:T12aa,teamComp = { let selectedAgentsString = mutable selectedAgents.sort().join(', '); let svg = d3.create('svg').style("background-color", 'white').attr("preserveAspectRatio", "none") .attr("viewBox", "0 0 963 725") 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); } } let locs = [70,250,430,610,790].map(n => n+47) let maps = ["Haven", "Split", "Bind", "Ascent", "Icebox"] let mapLoc = d3.scaleOrdinal() .domain(maps) .range(locs) for (let i = 0; i < 5; i++) { svg.append("rect") .attr("x", locs[i]-90) .attr("y", 270) .attr("width", 180) .attr("height", 450) .attr("fill", "#eeeeee").attr("stroke", 'black').attr("stroke-width", 3) } let compsPerMaps = {"Haven" : 0, "Split" : 0, "Bind": 0, "Ascent" : 0, "Icebox": 0 } let teamsPerMaps = {"Haven" : [], "Split" : [], "Bind": [], "Ascent" : [], "Icebox": [] } function barData() { let teamData = agentComps.filter(d => d["Comp"] === selectedAgentsString) for (let i = 0; i < teamData.length; i++) { let curmap = teamData[i]["Map"] compsPerMaps[curmap] = compsPerMaps[curmap] + Number(teamData[i]["Picks"]) teamsPerMaps[curmap].push(teamData[i]["Team"]) } } svg.append("line") .attr("x1", 27) .attr("y1", 680) .attr("x2", 928).attr("y2", 680) .attr("stroke", 'black').attr("stroke-width", 3) barData() console.log(compsPerMaps) let totals = [15] for (let i = 0; i < 5; i++) { totals.push(compsPerMaps[maps[i]]) } let yScale = d3.scaleLinear() .domain(d3.extent(totals)) .range([0, 410]) for (let i = 0; i < 5; i++) { svg.append("rect") .attr("x", locs[i]-90) .attr("y", 680 - yScale(compsPerMaps[maps[i]])) .attr("width", 180) .attr("height", yScale(compsPerMaps[maps[i]])) .attr("fill", "#F69197").attr("stroke", 'black').attr("stroke-width", 3) let map = maps[i] console.log(map) svg.append("text") .attr("text-anchor", "middle") .attr("y", 710) .attr("x", locs[i]) .attr('style', "font-size: 30px; font-family: 'Bebas Neue';") .text(map + " (" + compsPerMaps[maps[i]] + ")"); for (let j = 0; j < teamsPerMaps[maps[i]].length; j++) { svg.append("text") .attr("text-anchor", "middle") .attr("y", 675 - 20*j) .attr("x", locs[i]) .attr('style', "font-size: 20px; font-family: 'Bebas Neue';") .text(teamsPerMaps[maps[i]][j]); } } return svg.node(); }34:T8f5,{ let lineThickScale = d3.scaleLinear() .domain(d3.extent(agentLinks.map(d=> d.value))) .range([1, 4]); let lineOpacityScale = d3.scaleLinear() .domain(d3.extent(agentLinks.map(d=> d.value))) .range([.1, 1]); let sizeScale = d3.scaleLinear() .domain([0, 600]) .range([2, 15]); let svg = d3.create('svg').attr("viewBox", "0 0 963 600"); let simulation = d3.forceSimulation(agentSim.nodes) .force('links', d3.forceLink(agentSim.links).id(d=>d.id)) .force('charge', d3.forceManyBody().strength(-2000)) .force('center', d3.forceCenter(480,250)); // Make lines and circles for our links and nodes--this should look familiar let link = svg.selectAll('line') .data(agentSim.links) .join('line') .attr("stroke-width", d => lineThickScale(d.value)).attr("opacity", d => lineOpacityScale(d.value)) .attr('stroke', function(d){ if (d.value !== 0) { console.log(d.value) return 'black' } else { return "transparent" } }); //d => appearsIn(d['id']) let node = svg.selectAll('circle') .data(agentSim.nodes) .join('circle') .attr('fill', "black") .attr('r', function(d){ let toReturn = 0 for (let i = 0; i < dataComps.length; i++) { if (dataComps[i]["Comp"].includes(d['id'])) { toReturn++ } } return sizeScale(toReturn) }) .on('mouseover', function(event, d) { d3.select('#nameText').text(d['id']); }) .on('mouseout', function(event, d) { d3.select('#nameText').text(''); }); svg.append('text') .attr('id', 'nameText') .attr('x', 10) .attr('y', 20); // Define how the links and nodes should be updated at each time step. // THIS SHOULD LOOK NEW. simulation.on('tick', function() { link .attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y); node .attr("cx", d => d.x) .attr("cy", d => d.y); }); // Brief line to make sure that Observable kills the simulation // if we re-execute this cell later (so that the browser doesn't lag). invalidation.then(() => simulation.stop()); return svg.node(); }35:[{"id":"a0c9dee465aba9b21d900e9c82301042cfc3488b7add98c4b145995fc932169a08e32ef33c5fd8c95934f91f4251d1347b63cd2ff13143191ffbc83d0e6b95d1","href":"https://static.observableusercontent.com/files/a0c9dee465aba9b21d900e9c82301042cfc3488b7add98c4b145995fc932169a08e32ef33c5fd8c95934f91f4251d1347b63cd2ff13143191ffbc83d0e6b95d1","name":"compositionsmasters1.csv","type":"text/csv","lastModified":1617982695836.825,"size":21707}] 2f:{"title":"Masters One Compositions","cells":[{"id":0,"value":"md`# Masters One Compositions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"mutable lastClicked = \"\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":108,"value":"mutable selectedAgents = []","pinned":true,"hidden":false,"mode":"ojs"},{"id":235,"value":"selectedAgentsString = mutable selectedAgents.sort().join(', ');","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":370,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":447,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"[\"Map\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":422,"value":"function appearsIn(agentsInput)\n{\n return d3.sum(fullComps.map(x => agentsInput.every(v => x.includes(v))))\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":425,"value":"appearsIn([\"Jett\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":583,"value":"agentId = [\"Jett\", \"Killjoy\", \"Sage\", \"Viper\", \"Breach\", \"Raze\", \"Skye\", \"Cypher\", \"Sova\", \"Phoenix\", \"Brimstone\", \"Yoru\", \"Reyna\", \"Omen\", \"KAY/O\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":613,"value":"agentLinks = []","pinned":true,"hidden":false,"mode":"ojs"},{"id":624,"value":"agentSim = {\n let nodes = []\n for(let i = 0; i < agentId.length; i++){\n nodes.push({\"id\" : agentId[i]});\n }\n let tempSim = {nodes: nodes,\n links: agentLinks}\n return tempSim\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":644,"value":"agentSim.links","pinned":true,"hidden":false,"mode":"ojs"},{"id":707,"value":"d3.extent(agentLinks.map(d=> d.value))","pinned":true,"hidden":false,"mode":"ojs"},{"id":625,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":622,"value":"createLinks()","pinned":true,"hidden":false,"mode":"ojs"},{"id":614,"value":"function createLinks()\n {\n for (let i = 0; i < agentId.length; i++)\n {\n for (let j = 0; j < agentId.length; j++)\n {\n if (agentId[i] != agentId[j] && getConnected(agentId[i], agentId[j]) !== 0)\n {\n agentLinks.push({\"source\": agentId[i], \"target\":agentId[j], \"value\": getConnected(agentId[i], agentId[j])})\n }\n }\n }\n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":593,"value":"function getConnected(agentName1, agentName2)\n{\n let agentsInput = [agentName1, agentName2]\n let toReturn = 0;\n for (let i = 0; i < dataComps.length; i++)\n {\n if (dataComps[i][\"Comp\"].includes(agentName1) && dataComps[i][\"Comp\"].includes(agentName2))\n {\n toReturn++\n }\n }\n return toReturn\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":606,"value":"getConnected('Cypher', 'Omen')","pinned":true,"hidden":false,"mode":"ojs"},{"id":547,"value":"dataComps = []","pinned":true,"hidden":false,"mode":"ojs"},{"id":549,"value":"agentComps.map(function(d) {\n for (let i = 0; i < d[\"Picks\"]; i++)\n {\n dataComps.push({\"Team\": d[\"Team\"], \"Map\": d[\"Map\"], \"Comp\" : d[\"Comp\"].split(\", \").map(d=>d.replace(/\\s+/g, ''))});\n console.log(\"add\")\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":407,"value":"fullComps = fillFull();","pinned":true,"hidden":false,"mode":"ojs"},{"id":408,"value":"function fillFull()\n {\n let fullComp = [];\n agentComps.map(function(d) {\n for (let i = 0; i < d[\"Picks\"]; i++)\n {\n fullComp.push(d[\"Comp\"].split(\", \").map(d=>d.replace(/\\s+/g, '')));\n console.log(\"add\")\n }\n })\n return fullComp;\n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":415,"value":"d3.sum(agentComps.map(d => d[\"Picks\"]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":191,"value":"agentComps = d3.csvParse(await FileAttachment(\"compositionsmasters1.csv\").text())","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"agents.data.find(a => a.displayName === agentNames[1]).displayIcon","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"agents = fetch(\"https://valorant-api.com/v1/agents\")\n.then(response => {\n return response.json();\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"agentNames = [...new Set(agents.data.map(a=>a.displayName))]","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"agentIcon = [...new Set(agents.data.map(a=>a.displayIcon))]","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"async function addWebFont(selection, fontName, fontURL, fontType = 'woff2') {\n const fontData = await toDataURL(fontURL);\n return selection.append('style').text(`\n @font-face {\n font-family: '${fontName}';\n src: url(${fontData}) format('${fontType}');\n }\n `);\n};","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"async function toDataURL(url) {\n return new Promise(async(resolve, reject) => {\n const res = await fetch(url);\n if(!res.ok) return reject(`Error: ${res.status} ${res.statusText}`);\n const blob = await res.blob();\n const reader = new FileReader();\n reader.readAsDataURL(blob);\n reader.onloadend = () => resolve(reader.result);\n });\n} ","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require('d3@v6')","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}