25:["$","title",null,{"children":"Dota Drafting Guide | Berkeley MIDS W209 Information Visualization Course | Observable"}] 49:T7e8,function renderImageGridWithTeams() { // Call a function that creates SVGs for the user's team and the opposing team. const teamSVGs = createTeamSVGs(); // Create a new DIV element to serve as the main container for the grid and team displays. const mainContainer = document.createElement("div"); mainContainer.id = "main-container"; // Create a new DIV to hold the team SVGs. const teamsContainer = document.createElement("div"); teamsContainer.style.cssText = "float:left"; //; width:40%"; teamsContainer.innerHTML = `

Your Team

`; teamsContainer.appendChild(teamSVGs.yourTeamSVG); teamsContainer.innerHTML += `

Opposing Team

`; teamsContainer.appendChild(teamSVGs.opposingTeamSVG); const radarplot = document.createElement("div"); radarplot.id = "radarplot"; //radarplot.style.cssText = "float:right; width:15%; height:250px"; radarplot.style.cssText = "float:right; width:220px; height:220px"; radarplot.innerHTML = `

`; // Add the teams container to the main container. mainContainer.appendChild(teamsContainer); mainContainer.appendChild(radarplot); // Generate the image grid SVG by calling another function and append it to the main container. const gridSVG = renderImageGrid(); gridSVG.id = "image-grid-svg"; // Assign an ID to the image grid SVG mainContainer.appendChild(gridSVG); // Calculate stats based on hovering over different elements within the grid and teams. const hoverStats = calculateStatsForHover( yourTeam, opposingTeam, matchResults, characters ); // Create a bar graph SVG based on the hover stats. const barGraphSVG = renderBarGraph(hoverStats); barGraphSVG.id = "bar-graph-svg"; // Ensure consistent ID naming barGraphSVG.style.cssText = "float:left"; //; width:25%"; // Insert the bar graph before the image grid in the main container. mainContainer.insertBefore(barGraphSVG, gridSVG); // Return the fully assembled main container. return mainContainer; }4a:T9f3,function renderImageGrid() { // Create an SVG element with the specified width and height. const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("id", "image-grid-svg"); // Create group elements for each character that will form the grid cells. const cells = svg .selectAll(".cell") .data(characters) .enter() .append("g") .attr("class", "cell") .attr("transform", (d, i) => { const x = (i % Math.floor(width / cellSize)) * cellSize + padding; const y = Math.floor(i / Math.floor(width / cellSize)) * cellSize + padding; return `translate(${x}, ${y})`; }); // Append an image element to each cell group, setting the image source and dimensions. cells .append("image") .attr( "xlink:href", (d) => `https://drive.google.com/uc?export=view&id=${d.id}` ) .attr("width", cellSize - 2 * padding) .attr("height", cellSize - 2 * padding); // Define click event handlers for each cell. cells.on("click", function (event, d) { const isYourTeamChar = yourTeam.includes(d); const isOpposingTeamChar = opposingTeam.includes(d); if (isYourTeamChar) { removeCharacterFromTeam(yourTeam, d); updateTeams(); } else if (isOpposingTeamChar) { removeCharacterFromTeam(opposingTeam, d); updateTeams(); } if (!isYourTeamChar && !isOpposingTeamChar) { if (yourTeam.length <= opposingTeam.length) { addCharacterToTeam(yourTeam, d); } else { addCharacterToTeam(opposingTeam, d); } updateTeams(); } const hoverStats = calculateStatsForHover( yourTeam, opposingTeam, matchResults, characters ); updateHoverStats(hoverStats); const mainContainer = document.querySelector("#main-container"); // Remove the previous bar graph if it exists to make room for an updated one. const existingBarGraph = mainContainer.querySelector("#bar-graph-svg"); if (existingBarGraph) { existingBarGraph.remove(); } // Create a new bar graph SVG element to show updated stats const barGraphSVG = renderBarGraph(hoverStats); barGraphSVG.id = "bar-graph-svg"; // Ensure the ID is the same as assigned in renderBarGraph // Find the grid SVG element const gridSVG = mainContainer.querySelector("#image-grid-svg"); // Insert the bar graph before the image grid in the main container. mainContainer.insertBefore(barGraphSVG, gridSVG); }); return svg.node(); }4b:Te0e,// Function to create SVG elements for the teams function createTeamSVGs() { // Define the width and height for the team SVGs based on the cell size and max team size const teamSVGWidth = cellSize * maxTeamSize; const teamSVGHeight = cellSize; // Create the SVG element for your team and set its attributes const yourTeamSVG = d3 .create("svg") .attr("id", "your-team-svg") // Assign an ID to the SVG for future reference .attr("width", teamSVGWidth) // Set the width of the SVG .attr("height", teamSVGHeight); // Set the height of the SVG // Create the SVG element for the opposing team and set its attributes const opposingTeamSVG = d3 .create("svg") .attr("id", "opposing-team-svg") // Assign an ID to the SVG for future reference .attr("width", teamSVGWidth) // Set the width of the SVG .attr("height", teamSVGHeight); // Set the height of the SVG // Loop through each slot in the team for (let i = 0; i < maxTeamSize; i++) { // For each slot in your team, create and append an image element const yourTeamImage = yourTeamSVG .append("image") .attr("id", `yourTeamImage${i}`) // Assign a unique ID to each image for future updates .attr("x", i * cellSize) // Position the image horizontally .attr("y", 0) // Position the image vertically .attr("width", cellSize) // Set the width of the image .attr("height", cellSize) // Set the height of the image .attr("xlink:href", ""); // Initially set the image source to empty // For each slot in the opposing team, create and append an image element const opposingTeamImage = opposingTeamSVG .append("image") .attr("id", `opposingTeamImage${i}`) // Assign a unique ID to each image for future updates .attr("x", i * cellSize) // Position the image horizontally .attr("y", 0) // Position the image vertically .attr("width", cellSize) // Set the width of the image .attr("height", cellSize) // Set the height of the image .attr("xlink:href", ""); // Initially set the image source to empty // For each slot in your team, create and append a rectangle element to serve as a slot indicator yourTeamSVG .append("rect") .attr("id", `yourTeamSlot${i}`) // Assign a unique ID to each slot .attr("x", i * cellSize) // Position the rectangle horizontally .attr("y", 0) // Position the rectangle vertically .attr("width", cellSize) // Set the width of the rectangle .attr("height", cellSize) // Set the height of the rectangle .attr("fill", "none") // Set the fill color to transparent .attr("stroke", "blue"); // Set the stroke color to blue for your team // For each slot in the opposing team, create and append a rectangle element to serve as a slot indicator opposingTeamSVG .append("rect") .attr("id", `opposingTeamSlot${i}`) // Assign a unique ID to each slot .attr("x", i * cellSize) // Position the rectangle horizontally .attr("y", 0) // Position the rectangle vertically .attr("width", cellSize) // Set the width of the rectangle .attr("height", cellSize) // Set the height of the rectangle .attr("fill", "none") // Set the fill color to transparent .attr("stroke", "red"); // Set the stroke color to red for the opposing team } // Return the SVG elements for your team and the opposing team return { yourTeamSVG: yourTeamSVG.node(), // Return the DOM node for your team SVG opposingTeamSVG: opposingTeamSVG.node() // Return the DOM node for the opposing team SVG }; }4c:Tca8,// Function to calculate statistics for hover actions on the team composition interface function calculateStatsForHover( teamData, // Array of characters on the user's team oppositionData, // Array of characters on the opposing team matchResults, // Array of past match results to calculate the stats from characters // Array of all available characters to choose from ) { // Object to store the calculated hover stats let hoverStats = { yourTeam: {}, // Stats for the user's team opposingTeam: {} // Stats for the opposing team }; // Convert the team data into sets for efficient lookup let yourTeamNames = new Set(teamData.map((char) => char.name)); let opposingTeamNames = new Set(oppositionData.map((char) => char.name)); // Helper function to check if a given team composition contains all members of a set of names function containsAllTeamMembers(teamComposition, teamNames) { // Check if every name in the set is included in the team composition return [...teamNames].every((name) => teamComposition.includes(name)); } // Loop through each character to calculate the hover stats characters.forEach((character) => { let characterName = character.name; // Initialize the win count for this character on both teams hoverStats.yourTeam[characterName] = 0; hoverStats.opposingTeam[characterName] = 0; // Loop through match results to count wins for the user's team if the character was added matchResults.forEach((match) => { // Create a hypothetical team including the current character let hypotheticalYourTeam = new Set([...yourTeamNames, characterName]); // Check if the hypothetical team matches the winning team composition and increment the win count if ( containsAllTeamMembers( match.team_a_composition_name, hypotheticalYourTeam ) && match.team_a_win ) { hoverStats.yourTeam[characterName]++; } else if ( containsAllTeamMembers( match.team_b_composition_name, hypotheticalYourTeam ) && match.team_b_win ) { hoverStats.yourTeam[characterName]++; } }); // Loop through match results to count wins for the opposing team if the character was added matchResults.forEach((match) => { // Create a hypothetical team including the current character let hypotheticalOpposingTeam = new Set([ ...opposingTeamNames, characterName ]); // Check if the hypothetical team matches the winning team composition and increment the win count if ( containsAllTeamMembers( match.team_a_composition_name, hypotheticalOpposingTeam ) && match.team_a_win ) { hoverStats.opposingTeam[characterName]++; } else if ( containsAllTeamMembers( match.team_b_composition_name, hypotheticalOpposingTeam ) && match.team_b_win ) { hoverStats.opposingTeam[characterName]++; } }); }); // The stats object is then returned for use in the interface, it can be used to display the potential impact of adding a character to a team return hoverStats; }4d:Tdb1,// function updateHoverStats(hoverStats) { // // Assuming your existing data is stored in a variable called 'yourData' // // Assuming 'data_dota' is the variable containing the CSV data // // Merge the existing data with the CSV data // const mergedData = characters.map((d) => { // const additionalInfo = data_dota.find((ad) => ad.localized_name === d.name); // // Check if additionalInfo is found for the character in the CSV // if (additionalInfo) { // // Add the additional information to the character // d["AVG Kills"] = additionalInfo.AVG_Kills; // d["winrate"] = additionalInfo.winrate; // } // return d; // }); // d3.selectAll(".cell") // .on("mouseover", function (event, d) { // // When mouseover event is triggered, select the 'image' element within the hovered 'cell' // // Increase the image size for a hover effect and reposition it centrally // d3.select(this) // .select("image") // .attr("width", cellSize + hoverIncrease - 2 * padding) // .attr("height", cellSize + hoverIncrease - 2 * padding) // .attr( // "transform", // `translate(-${hoverIncrease / 2}, -${hoverIncrease / 2})` // ); // // Choose which hover statistics to display, depending on the size comparison of yourTeam and opposingTeam // const statsToUse = // yourTeam.length <= opposingTeam.length // ? hoverStats.yourTeam // : hoverStats.opposingTeam; // // Retrieve and construct the hover text with the character's name, hover statistic, AVG Kills, and winrate // let hero_string = d.name; // //console.log(hero_string); // mutable mouseOverObject = retrieveHeroData(hero_string); // removeRadarPlot(); // createRadarPlot(); // const characterHoverStat = statsToUse[d.name]; // const avgKills = // d["AVG Kills"] !== undefined // ? parseFloat(d["AVG Kills"]).toFixed(2) // : 0; // const winRate = // d.winrate !== undefined ? parseFloat(d.winrate).toFixed(2) : 0; // const hoverText = `${d.name}\nAvg Kills: ${avgKills}\nWin Rate: ${winRate}`; // // Remove existing hover text // d3.select(this).selectAll(".hover-text").remove(); // // Append a 'text' element to show the hover text with line breaks using // const textElement = d3 // .select(this) // .append("text") // .attr("x", cellSize / 2) // .attr("y", cellSize / 2) // .attr("class", "hover-text") // .attr("text-anchor", "middle") // .attr("fill", "red"); // Set font color to red // const lines = hoverText.split("\n"); // textElement // .selectAll("tspan") // .data(lines) // .enter() // .append("tspan") // .attr("x", cellSize / 2) // .attr("dy", "1em") // .attr("fill", "red") // Set font color to red // .text((d) => d); // }) // .on("mouseout", function (event, d) { // // When mouseout event is triggered, reset the image size to its original state // d3.select(this) // .select("image") // .attr("width", cellSize - 2 * padding) // .attr("height", cellSize - 2 * padding) // .attr("transform", "translate(0, 0)"); // // Remove the hover text when the mouse leaves the 'cell' // d3.select(this).selectAll(".hover-text").remove(); // }); // }4e:Tdd8,function updateHoverStats(hoverStats) { // Assuming your existing data is stored in a variable called 'yourData' // Assuming 'data_dota' is the variable containing the CSV data // Merge the existing data with the CSV data const mergedData = characters.map((d) => { const additionalInfo = data_dota.find((ad) => ad.localized_name === d.name); // Check if additionalInfo is found for the character in the CSV if (additionalInfo) { // Add the additional information to the character d["AVG Kills"] = additionalInfo.AVG_Kills; d["winrate"] = additionalInfo.winrate; } return d; }); d3.selectAll(".cell") .on("mouseover", function (event, d) { // When mouseover event is triggered, select the 'image' element within the hovered 'cell' // Increase the image size for a hover effect and reposition it centrally const imageElement = d3.select(this).select("image"); imageElement .attr("width", cellSize + hoverIncrease - 2 * padding) .attr("height", cellSize + hoverIncrease - 2 * padding) .attr( "transform", `translate(-${hoverIncrease / 2}, -${hoverIncrease / 2})` ); // Determine if the character belongs to the user's team or the opposing team const isYourTeamChar = yourTeam.includes(d); const isOpposingTeamChar = opposingTeam.includes(d); // Set the outline color based on the team const outlineColor = isYourTeamChar ? "blue" : isOpposingTeamChar ? "red" : "black"; // Highlight the image by adding an outline imageElement.style("outline", `2px solid ${outlineColor}`); // Remove below mutable mouseOverObject = retrieveHeroData(d.name); removeRadarPlot(); createRadarPlot(); //Remove above // Retrieve and construct the hover text with the character's name, AVG Kills, and winrate const avgKills = d["AVG Kills"] !== undefined ? `AVG Kills: ${parseFloat(d["AVG Kills"]).toFixed(2)}` : "AVG Kills: N/A"; const winRate = d.winrate !== undefined ? `Win Rate: ${parseFloat(d.winrate).toFixed(2)}` : "Win Rate: N/A"; const hoverText = `${d.name}\n${avgKills}\n${winRate}`; // Remove existing hover text d3.select(this).selectAll(".hover-text").remove(); // Append a 'text' element to show the hover text with line breaks using const textElement = d3 .select(this) .append("text") .attr("x", cellSize / 2) .attr("y", cellSize / 2) .attr("class", "hover-text") .attr("text-anchor", "middle") .attr("fill", "orange"); // Set font color to orange const lines = hoverText.split("\n"); textElement .selectAll("tspan") .data(lines) .enter() .append("tspan") .attr("x", cellSize / 2) .attr("dy", "1em") .attr("fill", "orange") // Set font color to orange .text((d) => d); }) .on("mouseout", function (event, d) { // When mouseout event is triggered, reset the image size and remove the outline d3.select(this) .select("image") .attr("width", cellSize - 2 * padding) .attr("height", cellSize - 2 * padding) .attr("transform", "translate(0, 0)") .style("outline", "none"); // Remove the hover text when the mouse leaves the 'cell' d3.select(this).selectAll(".hover-text").remove(); }); }4f:T94c,function renderBarGraph(hoverStats) { // Decide which team's stats to use for the graph based on team sizes const statsToGraph = yourTeam.length <= opposingTeam.length ? hoverStats.yourTeam : hoverStats.opposingTeam; // Sort and take the top 10 entries const sortedStats = Object.entries(statsToGraph) .sort((a, b) => b[1] - a[1]) //.slice(0, 10); .slice(0, 5); // Define the dimensions and margins for the bar graph // const margin = { top: 20, right: 20, bottom: 100, left: 40 }, // width = 960 - margin.left - margin.right, // height = 500 - margin.top - margin.bottom; const margin = { top: 10, right: 10, bottom: 35, left: 50 }, width = 575 - margin.left - margin.right, height = 250 - margin.top - margin.bottom; // Check for an existing graph and remove it to prevent duplicates const existingGraph = d3.select("#bar-graph-svg").node(); if (existingGraph) { existingGraph.remove(); } // Create an SVG container for the graph const svg = d3 .create("svg") .attr("id", "bar-graph-svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); // Set up the X axis with a band scale const x = d3 .scaleBand() .range([0, width]) .domain(sortedStats.map((d) => d[0])) .padding(0.2); // Draw the X axis and rotate the labels for readability svg .append("g") .attr("transform", `translate(0,${height})`) .call(d3.axisBottom(x)) .selectAll("text") .style("text-anchor", "end") .attr("dx", "-.8em") .attr("dy", ".15em") .attr("transform", "rotate(-15)"); // Set up the Y axis with a linear scale const y = d3 .scaleLinear() .domain([0, d3.max(sortedStats, (d) => d[1])]) .range([height, 0]); // Draw the Y axis svg.append("g").call(d3.axisLeft(y)); // Create bars for the bar graph using data binding svg .selectAll("mybar") .data(sortedStats) .enter() .append("rect") .attr("x", (d) => x(d[0])) .attr("y", (d) => y(d[1])) .attr("width", x.bandwidth()) .attr("height", (d) => height - y(d[1])) .attr("fill", "#69b3a2"); // Return the SVG element for rendering in the Observable notebook environment return svg.node().parentNode; }50:T2bd6,characters = [ { id: "1IkMI3nFcIQcQgeczCQ2ngFjCKFX16Idd", name: "Abaddon", description: "Test" }, { id: "1eA-Wn9vIy8N_zNXTcxVaxy5NZIvNQQ4d", name: "Alchemist", description: "Test" }, { id: "17Fz21SCYXx9K38peJ5G_egmP_UXouf8e", name: "Ancient Apparition", description: "Test" }, { id: "1BZ4pAGUw6ZohO4JpaqMAUgOsrpVFKBLf", name: "Anti-Mage", description: "Test" }, { id: "1e5pO9Dnpkl2f9FTXk9giZD0tg7FujJBW", name: "Arc Warden", description: "Test" }, { id: "1mJhbPC29oSRfyB0gbBEcM41ACb7KZd4a", name: "Axe", description: "Test" }, { id: "1LqAiS1gdDM0eiNqFgMhxsi-0LGwYH9Zb", name: "Bane", description: "Test" }, { id: "1YnHqROKqqUNLXO1wF8p8tVNRA0PVpEQY", name: "Batrider", description: "Test" }, { id: "1AGd8FAq7dLdSvwQX0j9K_4oELcR0XHyy", name: "Beastmaster", description: "Test" }, { id: "1WcQCEdSDCB8RMEX1Y72EmVXCAbwablZr", name: "Bloodseeker", description: "Test" }, { id: "1hO3GZAJ8_-ETn3iNFdYaDOmFsrQzItDk", name: "Bounty Hunter", description: "Test" }, { id: "1T_M2DB5ozpLi-PYBliOYmRCN_mlwOdYM", name: "Brewmaster", description: "Test" }, { id: "1xvnDP9kX1MgxQFwIostDDYZCCcW0VLs2", name: "Bristleback", description: "Test" }, { id: "1jFp1OQezpdeASFJweiu0py9kdek1WLeH", name: "Broodmother", description: "Test" }, { id: "1iCyCjWljlFaQiioDzeZ3LAJtZDfddDFX", name: "Centuar", description: "Test" }, { id: "1X6GPppmUKrwitMoZCXjDcqEYJBtCQFFh", name: "Chaos Knight", description: "Test" }, { id: "1RG-ql6ErvfRmGeVJW5uO4DqFjBJkUShq", name: "Chen", description: "Test" }, { id: "1gF2ITxScErhTtE0xlRsNhrgX4d8X4mNQ", name: "Clinkz", description: "Test" }, { id: "1q7k_TigKNX8WddkXTJMT9VLRVBbVvfeA", name: "Crystal Maiden", description: "Test" }, { id: "15EQoqghn48m7ZWNGk2QirafsVSdgkz54", name: "Dark Seer", description: "Test" }, { id: "1KsMu2rxQtZYOosWkdsc80FD0eKwe8_2L", name: "Dazzle", description: "Test" }, { id: "1WtExbLIx_Gbxrf7pSmfsO3NP40QA1foL", name: "Death Prophet", description: "Test" }, { id: "1600vgJyzlZrNfcjqA9aE4Qh5n1ul_rAD", name: "Disruptor", description: "Test" }, { id: "1nMqS1w4zDP7RyCejdFga7eWH9ghi51lv", name: "Doom Bringer", description: "Test" }, { id: "1pa45flJ70U1eJ1RLIPONfxEM02yZqRuw", name: "Dragon Knight", description: "Test" }, { id: "1upd2hDrSZZfeyo1wu_xd5aLtxMs-_0RX", name: "Drow Ranger", description: "Test" }, { id: "1aN86cqfK3gkYyONT0mBKabXEAtWGlnqI", name: "Earth Spirit", description: "Test" }, { id: "1h43HDraKPD9bux8mCKyPmwdXjMErByBs", name: "Earthshaker", description: "Test" }, { id: "1lZVO1t20JxHT7ndZ1I6lyAvwT1eenxa8", name: "Elder Titan", description: "Test" }, { id: "1yNoMi2XwJiSMO3d6-DeU6IBth6rpW0ei", name: "Ember Spirit", description: "Test" }, { id: "1Y5CcQVTfRJJge-EHhMGfZCNnrgQxtWan", name: "Enchantress", description: "Test" }, { id: "1aEKNfstAU1q4inyqoLKHuR6fwNf0uvGd", name: "Enigma", description: "Test" }, { id: "1qcqOU3t5Wl9fSS1AVqtTtYhSQLQW-bou", name: "Faceless Void", description: "Test" }, { id: "17c7l-mfvjO7Gdw_FBYvDRVwYEScMsLjQ", name: "Furion", description: "Test" }, { id: "1IfDX1z8ph891QLxCLL8XW6LFWBvzafuq", name: "Gyrocopter", description: "Test" }, { id: "15rDjs1oxUfGBNGpZaa6c9fAkb0Fj2QCB", name: "Huskar", description: "Test" }, { id: "1WT3Hf3ArWMOAAPxNXMTdwTxA2sXcfXNZ", name: "Invoker", description: "Test" }, { id: "1ayD81FqGYe2YGz8W6pDoimGXbF2wgwfY", name: "Jakiro", description: "Test" }, { id: "1ppPCiJ-7KpOyH0KGHD2yx5m8FniK4VTF", name: "Juggernaut", description: "Test" }, { id: "1UuD38ty8GNnTTUKVg5-LDd4RP16roq-D", name: "Keeper of the Light", description: "Test" }, { id: "1I3vxoP9fRwLSeKd5UqSXPsVd3-BLVGYO", name: "Kunkka", description: "Test" }, { id: "1aiP7nPwrVqsVEGAsJRJgPmH1d-37AfyS", name: "Legion Commander", description: "Test" }, { id: "1llE81m0wKPGfSwkFwzJFg6wlOAu-sIqO", name: "Leshrac", description: "Test" }, { id: "1m2Of3K2avDOpbzoKR5HPrS3btU-i6E6y", name: "Lich", description: "Test" }, { id: "1lCTkRgsBAfoy-cxx8DG1gCav1SEF6Unb", name: "Life Stealer", description: "Test" }, { id: "1FRHGEFuTh4BGrcaJPXggcjF6iQn7VyFd", name: "Lina", description: "Test" }, { id: "1kbTqL3YvwdVCScdGx6fTdPNSg0VqPbAF", name: "Lion", description: "Test" }, { id: "1jhiTkxi8aHH8hlMm3zNaZScAz1uVmr0d", name: "Lone Druid", description: "Test" }, { id: "1uHpX3gsxbZwl9pPcBs8GSKRX7fj9l4Qv", name: "Luna", description: "Test" }, { id: "1YO2Vj9r1_6sUJDbkJAV8RwbhoR1bkGxQ", name: "Lycan", description: "Test" }, { id: "1zMRxXag4PplmWPUCO4FZxEZ1eJvZJW_7", name: "Magnataur", description: "Test" }, { id: "1tQNZSx5zkKnrzEvmzt350zNmnSw4D6Gs", name: "Medusa", description: "Test" }, { id: "1e3qu2g51khOf_5D0JO2h834uw_SYk2pW", name: "Meepo", description: "Test" }, { id: "17kG9YuQ53cUpsH1HHSFo-JdQqFfvzej3", name: "Mirana", description: "Test" }, { id: "1lojiqSo4iK_fYIai19GXLEZp06uu0D0D", name: "Morphling", description: "Test" }, { id: "1_YgoIL1SGClIVGZ7soYKxsIThWIcjjhC", name: "Naga Siren", description: "Test" }, { id: "1xdTAwt-TE-CRaKsqS83V6Tw1rcBzpf_i", name: "Necrolyte", description: "Test" }, { id: "1l9Gs2rfSbLIArAlBg7X5mwEECW8BYpD0", name: "Nevermore", description: "Test" }, { id: "1_rJ9-_HB-HV-PsfGyHPAOOUQYVd8_QPl", name: "Night Stalker", description: "Test" }, { id: "185SUTw98iriACxLCuLQQLMFT_cIii7Kb", name: "Nyx Assassin", description: "Test" }, { id: "1YLGR2mAQMbuZrEtTqarvmX9g4yL_Pu1d", name: "Obsidian Destroyer", description: "Test" }, { id: "11raRXplg6P5HE3XcHhbbHdKUJ7WCKu79", name: "Ogre Magi", description: "Test" }, { id: "1R2-bH9GolAacSid68UuYuzxgOoiyHn5U", name: "Omniknight", description: "Test" }, { id: "1bgcma3a_S-LSMlYfdAK7GdX5fFIBUA9z", name: "Oracle", description: "Test" }, { id: "1ABzu1Ay9VHn0GCrdg9hx7HF-quTCJbNg", name: "Phantom Assassin", description: "Test" }, { id: "1j_3ToAQQl3GB9tWVCikO5lYJiEDMevXv", name: "Phantom Lancer", description: "Test" }, { id: "1s9B1FRz1WrLteb2XDcCTiZdO-dLSF3NH", name: "Phoenix", description: "Test" }, { id: "1onhBtlGtnLe1e_tnXsO94Hajn6PUujUn", name: "Puck", description: "Test" }, { id: "1GbVrzI4SLsc3hvatyMuF89uyyiUN1yQm", name: "Pudge", description: "Test" }, { id: "1NcsExK2Z3KuKRM3PCiFNtb0wxojU9DYx", name: "Pugna", description: "Test" }, { id: "1av5ZhDk9lb5IIRx9hlTMTrYVY_fhhzGf", name: "Queen of Pain", description: "Test" }, { id: "1BBnyy_BaTMgmd8oK4yOLfo8Y8rOQK_4S", name: "Rattletrap", description: "Test" }, { id: "1_s-n2ArUsE_kv5hq2UC994zqog78AeeH", name: "Razor", description: "Test" }, { id: "1g0pBA7FVt-nIewk_HWyYgDOIw1lEBtSI", name: "Riki", description: "Test" }, { id: "1C1PzqWiUt5jrs9WPHEE0W57P37dVWf8z", name: "Rubrick", description: "Test" }, { id: "1J3TgL8i3OYpdtXyOXH3KH8x5KaWD-2H3", name: "Sand King", description: "Test" }, { id: "1DbwTyajOk7JFNJwKttSrOFblIxq7Vmun", name: "Shadow Demon", description: "Test" }, { id: "1NhFpdwE7YuSYN7SEbMOc6cnyWviZsIla", name: "Shadow Shaman", description: "Test" }, { id: "1N4DtvgbxESdOKGEQXdJjaIM1ylnSY69m", name: "Shredder", description: "Test" }, { id: "1Bxmom7XFKre3LJe_D-tCfQavrWzPhRvf", name: "Silencer", description: "Test" }, { id: "1yNGvf76PxLthzrVr6unUdUwwzAn0Vccx", name: "Skeleton King", description: "Test" }, { id: "161WZtRsZuv0cBTQl55nUJaxynapf06C-", name: "Skywrath Mage", description: "Test" }, { id: "1DDG8nWeptKYOga4JCAzC3DlRvxttuxR8", name: "Slardar", description: "Test" }, { id: "1-K_UP4Wzl0QXRruXao3XPvUjKVqcxZp8", name: "Slark", description: "Test" }, { id: "1FGYETrxn3R5vavBBZGmT-Kb3ykVrmqly", name: "Sniper", description: "Test" }, { id: "11TRKBUgtvRR5zFlyqlU6PqSoCclX0v0M", name: "Spectre", description: "Test" }, { id: "1Lcz_4ihC_L73t8OsJUubyQGgSU53BIal", name: "Spirit Breaker", description: "Test" }, { id: "1U2FCMz-ljIFFIjduuOjjfXfcenpWsGt8", name: "Storm Spirit", description: "Test" }, { id: "1KZL5TJq0g6X0o_zR1rL2bcGxZsJ7z3FK", name: "Sven", description: "Test" }, { id: "1Uey5hkGPili2A8WVELzKgfTD9ocmShOl", name: "Techies", description: "Test" }, { id: "1lbDhOoEwFT1Z-RWJHBkMqKN8iUYfdIUP", name: "Templar Assassin", description: "Test" }, { id: "1SitbAvRgW4V74mRF_qzOMbNxUea1nm5w", name: "Terrorblade", description: "Test" }, { id: "1ugu13-W9L3PCWutznYD_skCp5v5GCu-z", name: "Tidehunter", description: "Test" }, { id: "15FKuwzYMDug2BNGkz9WHHjVBWkGZZDUg", name: "Tinker", description: "Test" }, { id: "1MYIJ7ee5D-0FC6HSDX9pottb0UZC8_os", name: "Tiny", description: "Test" }, { id: "1VC3gEwYuoczOpJyfJ9lbdP_9uF_i9B2q", name: "Treant", description: "Test" }, { id: "1NrAAEGu6MnChGRG7kgft6muIY1cb9LdW", name: "Troll Warlord", description: "Test" }, { id: "1SP_ot4SbFUhxykwENTf-01O4uoD5LU3f", name: "Tusk", description: "Test" }, { id: "1tMcisTO16oUVLWD6mvbSsfLrM11rBmDv", name: "Undying", description: "Test" }, { id: "1lFCcu_Gwc5Du_Pq_cwcKfY8iTGlsDSjN", name: "Ursa", description: "Test" }, { id: "1MsmsvIcwIGXUH8ALbv2UfooORfQ4hFBP", name: "Vengeful Spirit", description: "Test" }, { id: "1CfqQqE6iaEO0-RStxEwCeO4nslgWVC2V", name: "Venomancer", description: "Test" }, { id: "17YlnCURi6dlB_hmLbGi4GfX_YDxFMqv1", name: "Viper", description: "Test" }, { id: "1DdNF5z1LY8wab13J6tozUZM-V39fJiFV", name: "Visage", description: "Test" }, { id: "1nmDhIxCyPA-E9chxmtbvd5tk5emLeJzC", name: "Warlock", description: "Test" }, { id: "1mIoR_iigmLfI4LYmn9btnayWFSgI4557", name: "Weaver", description: "Test" }, { id: "1P8R9n5xlVkX6K6ZHIqZOfcZN196TuLk7", name: "Windranger", description: "Test" }, { id: "1hxO4uIKaMpW01OqzQYdz3ctKgu9rOKaa", name: "Winter Wyvern", description: "Test" }, { id: "1LXDhmp5NTB9dXoYDtpAfKObTAIk_TQDZ", name: "Wisp", description: "Test" }, { id: "19U8j0ak_n_L6dnjtMF9tvN6INRS8kZ1_", name: "Witch Doctor", description: "Test" }, { id: "1XTTSqoR2OJ9_PnBOQk50x9YW9CCQ2bxf", name: "Zuus", description: "Test" } ]51:Ta50,function createRadarPlot() { document.querySelector("#plotcontainer").appendChild( Plot.plot({ width: 250, projection: { type: "azimuthal-equidistant", rotate: [0, -90], // Note: 0.625° corresponds to max. length (here, 0.5), plus enough room for the labels domain: d3.geoCircle().center([0, 90]).radius(8)() }, color: { legend: true }, marks: [ // grey discs Plot.geo([5, 4, 3, 2, 1], { geometry: (r) => d3.geoCircle().center([0, 90]).radius(r)(), stroke: "black", fill: "black", strokeOpacity: 0.3, fillOpacity: 0.03, strokeWidth: 0.5 }), // white axes Plot.link(longitude.domain(), { x1: longitude, y1: 90 - 6, x2: 0, y2: 90, stroke: "white", strokeOpacity: 0.5, strokeWidth: 2.5 }), // tick labels Plot.text([1, 2, 3, 4, 5], { x: 180, y: (d) => 90 - d, dx: 2, textAnchor: "start", text: (d) => `${d}`, fill: "currentColor", stroke: "white", fontSize: 8 }), // axes labels Plot.text(longitude.domain(), { x: longitude, y: 90 - 5.8, text: Plot.identity, lineWidth: 5 }), // areas Plot.area(createPoints(), { x1: ({ key }) => longitude(key), y1: ({ value }) => 90 - value, x2: 0, y2: 90, fill: "hero", stroke: "hero", curve: "cardinal-closed" }), // points Plot.dot(createPoints(), { x: ({ key }) => longitude(key), y: ({ value }) => 90 - value, fill: "hero", stroke: "white" }), // interactive labels Plot.text( createPoints(), Plot.pointer({ x: ({ key }) => longitude(key), y: ({ value }) => 90 - value, text: (d) => `${d.value}`, textAnchor: "start", dx: 4, fill: "currentColor", stroke: "white", maxRadius: 10 }) ), // interactive opacity on the areas () => svg`