31:T4b3,{ // Create main container const mainContainer = d3.create("div") // create div for title const titleContainer = mainContainer.append("div") .attr("id", "title") .attr("class", "title-container") // Append an image element titleContainer.append("img") .attr("class", "title-image") .attr("src", title_url) .attr("alt", "Title Image") const bodyContainer = mainContainer.append("div") .attr("class", "body-container") const containerWorld = bodyContainer.append("div") .attr("class", "left") .attr("id", "globeViz") .style("height", `${height}px`) const containerStats = bodyContainer.append("div") .attr("class", "right") .classed("centered-svg", true) // Add class for centering SVG .style("height", `${height}px`) // Append the SVG soccer field to containerStats // const svgContainer = containerStats.append(() => svgField()); let divStats = containerStats.append("div") .attr("class", "overlay") .attr("width", width) .attr("height", height) .style("position", "absolute"); setWorld(containerWorld.node(), width * globe_div_width/100, height, divStats); return mainContainer.node() }32:T6d0,html` `33:T16ce,function setWorld(container, containerWidth, containerHeight, containerStats) { // polygon params const ALTITUDE_SELECTED = 0.04; const ALTITUDE_DEFAULT = 0.01; const SIDE_COLOR = 'rgba(0, 50, 50, 0.5)'; const ALPHA_SELECTED = 1; const ALPHA_DEFAULT = 0.75; const polygonClickedState = {}; // arc consts const OPACITY = 1; let arcMode = false; // active only after clicking on a Polygon // point of view consts const POV_ALTITUDE = 1.5; const POV_TRANSITION_MS = 2000 // transition consts const FADE_OUT_DURATION = 500 // containerStats dims const containerStatsWidth = width * (100 - globe_div_width) / 100 const world = Globe() (container) .width(containerWidth) .height(containerHeight) .globeImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/earth-blue-marble.jpg') .backgroundImageUrl('//unpkg.com/three-globe/example/img/night-sky.png') .bumpImageUrl('//unpkg.com/three-globe/example/img/earth-topology.png') .pointOfView(getPoVByCountry("ARGENTINA", 2.5), POV_TRANSITION_MS) const getCountryName = d => remapNameIfNeeded(d.ADMIN) const getColor = (d, alpha) => getColorByCountry(getCountryName(d.properties), alpha) fetch('https://raw.githubusercontent.com/vasturiano/globe.gl/master/example/datasets/ne_110m_admin_0_countries.geojson').then(res => res.json()).then(countries => { world .polygonsData(countries.features) .polygonCapColor(feat => getColor(feat, ALPHA_DEFAULT)) .polygonSideColor(() => SIDE_COLOR) .polygonStrokeColor(() => '#111') .polygonAltitude(() => ALTITUDE_DEFAULT) //.polygonLabel(({properties: d}) => getMatchesSummary(getCountryName(d))) .polygonLabel(({properties: d}) => getGoalsSummary(getCountryName(d))) .onPolygonHover(hoverD => polyHoverFn(hoverD)) .onPolygonClick(clickedD => arcModeToggle(clickedD)) .polygonsTransitionDuration(150) // arcs stuff .arcColor(d => convertToRGBA(d.color, OPACITY)) .arcDashLength('dashLength') .arcDashGap('dashGap') .arcDashAnimateTime('dashAnimateTime') .arcLabel('label') .onArcHover(hoverArc => arcHoverFn(hoverArc)) .onArcClick(d => arcClick(d.selectedCountry, d.opponentCountry, d.date)); // Auto-rotate world.controls().autoRotate = true; world.controls().autoRotateSpeed = 0.3; }); // default message on stats container writeOnContainerStats(containerStats, width * (100 - globe_div_width) / 100, containerHeight, "Select a Country"); function arcModeToggle(clickedD) { const countryName = remapNameIfNeeded(clickedD.properties.ADMIN); if (getColorByCountry(countryName) === "rgba(255, 255, 255, 0.5)") { return null; // country not participating in world cup } world.controls().autoRotate = false; if (arcMode && polygonClickedState[countryName]) { // polygon with arcMode enabled was clicked, disable arcMode arcModeOFF() arcMode = false; polygonClickedState[countryName] = false; } else if (!arcMode) { arcModeON(clickedD) arcMode = true; polygonClickedState[countryName] = true; } }; function arcModeOFF() { world .arcsData([]) // disable arcs // set default hovering functions .polygonAltitude(() => ALTITUDE_DEFAULT) .polygonCapColor(feat => getColor(feat, ALPHA_DEFAULT)) //.polygonLabel(({properties: d}) => getMatchesSummary(getCountryName(d))) .polygonLabel(({properties: d}) => getGoalsSummary(getCountryName(d))) .onPolygonHover(hoverD => polyHoverFn(hoverD)) // update right container cleanContainer(containerStats); writeOnContainerStats(containerStats, containerStatsWidth, containerHeight, "Select a Country"); }; function arcModeON(clickedD) { const countryName = getCountryName(clickedD.properties); world // disable hovering and labels .onPolygonHover(null) .polygonLabel(null) // keep polygon highlighted .polygonCapColor(d => d === clickedD ? getColor(d, ALPHA_SELECTED): getColor(d, ALPHA_DEFAULT)) .pointOfView( getPoVByCountry(countryName, POV_ALTITUDE), POV_TRANSITION_MS ); emitArcs(clickedD.properties); const mainText = "Select a Match" const subText = `Click on ${countryName} again to go back` // update right container cleanContainer(containerStats); writeOnContainerStats(containerStats, containerStatsWidth, containerHeight, mainText, subText); } function polyHoverFn(hoverD) { world .polygonAltitude(d => d === hoverD ? ALTITUDE_SELECTED : ALTITUDE_DEFAULT) .polygonCapColor(d => d === hoverD ? getColor(d, ALPHA_SELECTED) : getColor(d, ALPHA_DEFAULT)) }; function arcHoverFn(hoverArc) { world .arcColor(d => { const op = !hoverArc ? OPACITY : d === hoverArc ? OPACITY : OPACITY / 3; return convertToRGBA(d.color, op) }) }; function emitArcs(d) { const countryName = remapNameIfNeeded(d.ADMIN); const arcsData = getArcsData(countryName, OPACITY); world.arcsData(arcsData); }; function arcClick(selectedTeam, opponentTeam) { const stats = getMatchStats(selectedTeam, opponentTeam) cleanContainer(containerStats) setMatchStats(stats, containerStats, width * (100 - globe_div_width) / 100, containerHeight); } // utils functions function cleanContainer(selection, duration) { selection.selectAll("*").remove() } function convertToRGBA(rgbColors, opacity) { return rgbColors.map(rgbColor => { const rgbValues = rgbColor.match(/\d+/g); const red = rgbValues[0]; const green = rgbValues[1]; const blue = rgbValues[2]; return `rgba(${red}, ${green}, ${blue}, ${opacity})`; }); } }34:T58e,function writeOnContainerStats(selection, width, height, text, subtext) { const fadeInDuration = 1500; const svg = selection.append("svg") .attr("viewBox", [-width / 2, -height / 2, width, height]) .attr("width", width) .attr("height", height); const textElement = svg.append("text") .attr("transform", `translate(${-width*0.5},-${height*0.5})`) .attr('class', 'title') .attr('x', width * 0.5) .attr('y', height * 0.45) .attr('font-size', width * 0.1) .attr('text-anchor', 'middle') .attr('fill', 'white') .text(text) // Set the initial opacity to 0 textElement.style("opacity", 0); // Animate the opacity to 1 over the specified duration for fade-in effect textElement.transition() .duration(fadeInDuration) .style("opacity", 1); // Add smaller text const smallerTextElement = svg.append("text") .attr("transform", `translate(${-width * 0.5},-${height * 0.5})`) .attr('class', 'sub-title') .attr('x', width * 0.5) .attr('y', height * 0.55) .attr('font-size', width * 0.05) .attr('text-anchor', 'middle') .attr('fill', 'white') .text(subtext); // Set the initial opacity to 0 smallerTextElement.style("opacity", 0); // Animate the opacity to 1 over the specified duration for fade-in effect smallerTextElement.transition() .duration(fadeInDuration) .style("opacity", 1); return svg.node(); }35:T1823,function setMatchStats(stats, selection, containerWidth, containerHeight) { const margin = { top: 0, right: 20, bottom: 20, left: 20 }; const chartWidth = containerWidth - margin.left - margin.right; const chartHeight = containerHeight - margin.top - margin.bottom; // get colors const colorTeam1 = getColorByCountry(stats.metadata.nameTeam1); const colorTeam2 = getColorByCountry(stats.metadata.nameTeam2); const invColorTeam1 = getInverseColor(colorTeam1, 0.5); const invColorTeam2 = getInverseColor(colorTeam2, 0.5); // prepend stuff to stats.data to have space for the title when doing the scaleBand() stats.data.unshift( {Metric: "datetime-category"}, {Metric: "names"}, {Metric: "score"} ) // Define the scales for x and y axes const xScale = d3.scaleLinear().domain([-1, 1]).range([0, chartWidth]); const yScale = d3 .scaleBand() .domain(stats.data.map((d) => d.Metric)) .range([0.5, chartHeight]) .padding(0.6); // util functions const denormalise = (d, total) => total * d; const numFormatWrapper = (val, numType) => { if (numType === "percentage") { return d3.format(".1%")(val/100); } else if (numType === "integer") { return Math.round(val); } else if (numType === "float") { return d3.format(".1")(val); } else { return val; } } const lrWrapper = (countryName, left) => { const emojiStr = getWinnersEmoji(countryName) if (emojiStr.length == 0) { return countryName; } else if (left) { return `${emojiStr} ${countryName}`; } else { return `${countryName} ${emojiStr}`; } } // get main SVG container const svg = selection .append("svg") .attr("width", containerWidth) .attr("height", containerHeight); // Create a group for the chart const chart = svg .append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); // add category and datetime chart .append("text") .attr("class", "datetime-cat-stats") .attr("x", d => (xScale(-1)) ) .attr("y", d => yScale(stats.data[0].Metric)) .attr("text-anchor", "start") .attr("alignment-baseline", "middle") .text(stats.metadata.category); chart .append("text") .attr("class", "datetime-cat-stats") .attr("x", d => (xScale(1))) .attr("y", d => yScale(stats.data[0].Metric)) .attr("text-anchor", "end") .attr("alignment-baseline", "middle") .text(`${stats.metadata.date} - ${stats.metadata.hour}`); // add country names chart .append("text") .attr("class", "title-stats") .attr("x", d => (xScale(0 - 0.5)) ) .attr("y", d => yScale(stats.data[1].Metric)) .attr("text-anchor", "middle") .attr("alignment-baseline", "middle") .attr("fill", colorTeam1) .text(lrWrapper(stats.metadata.nameTeam1, true)); chart .append("text") .attr("class", "title-stats") .attr("x", d => (xScale(0 + 0.5))) .attr("y", d => yScale(stats.data[1].Metric)) .attr("text-anchor", "middle") .attr("alignment-baseline", "middle") .attr("fill", colorTeam2) .text(lrWrapper(stats.metadata.nameTeam2)); // add scores const [scoreTeam1, scoreTeam2] = stats.metadata.score chart .append("text") .attr("class", "score-stats") .attr("x", d => (xScale(0) - 10)) .attr("y", d => yScale(stats.data[2].Metric)) .attr("text-anchor", "end") .attr("alignment-baseline", "middle") .text(scoreTeam1); chart .append("text") .attr("class", "score-stats") .attr("x", d => (xScale(0))) .attr("y", d => yScale(stats.data[2].Metric)) .attr("text-anchor", "middle") .attr("alignment-baseline", "middle") .attr("fill", "white") .text("-"); chart .append("text") .attr("class", "score-stats") .attr("x", d => (xScale(0) + 10)) .attr("y", d => yScale(stats.data[2].Metric)) .attr("text-anchor", "start") .attr("alignment-baseline", "middle") .text(scoreTeam2); // remove non-barplot stuff stats.data.shift() // datetime-category stats.data.shift() // names stats.data.shift() // score // Create the bars const lbars = chart .selectAll("team1-rect") .data(stats.data) .enter() .append("rect") .attr("class", "bar rect-stats") .attr("x", d => xScale(0 - d.team1)) .attr("y", d => yScale(d.Metric)) .attr("width", d => Math.abs(xScale(d.team1) - xScale(0))) .attr("height", yScale.bandwidth()) .attr("fill", colorTeam1); const rbars = chart .selectAll("team2-rect") .data(stats.data) .enter() .append("rect") .attr("class", "bar rect-stats") .attr("x", d => xScale(0)) .attr("y", d => yScale(d.Metric)) .attr("width", d => Math.abs(xScale(d.team2) - xScale(0))) .attr("height", yScale.bandwidth()) .attr("fill", colorTeam2); // Add metric labels chart .selectAll(".metric-label") .data(stats.data) .enter() .append("text") .attr("class", "text-rect-stats") .attr("x", d => (xScale(0))) .attr("y", d => yScale(d.Metric) - yScale.bandwidth() / 2) .attr("text-anchor", "middle") .attr("alignment-baseline", "middle") .attr("fill", "white") .text(d => d.Metric); // Add labels for team1 values chart .selectAll(".team1-label") .data(stats.data) .enter() .append("text") .attr("class", "text-rect-stats") .attr("x", d => (xScale(0)) - 10) .attr("y", d => yScale(d.Metric) + yScale.bandwidth() / 1.75) .attr("text-anchor", "end") .attr("alignment-baseline", "middle") .attr("fill", invColorTeam1) .text(d => numFormatWrapper(denormalise(d.team1, d.total), d.numType)); // Add labels for team2 values chart .selectAll(".metric-label") .data(stats.data) .enter() .append("text") .attr("class", "text-rect-stats") .attr("x", d => (xScale(0)) + 10) .attr("y", d => yScale(d.Metric) + yScale.bandwidth() / 1.75) .attr("text-anchor", "start") .attr("alignment-baseline", "middle") .attr("fill", invColorTeam2) .text(d => numFormatWrapper(denormalise(d.team2, d.total), d.numType)); return svg.node(); }36:T506,function getSimpleScoreStr(match, teamName) { const selectedTeam = match['team1'] === teamName ? 'team1' : 'team2'; const selectedScore = match['number of goals ' + selectedTeam]; const opponentTeam = match['team1'] === teamName ? 'team2' : 'team1'; const opponentScore = match['number of goals ' + opponentTeam]; const selectedPenaltiesScore = match['penalty shootouts ' + selectedTeam]; const opponentPenaltiesScore = match['penalty shootouts ' + opponentTeam]; let score; if (selectedPenaltiesScore === 0 && opponentPenaltiesScore === 0) { score = `${selectedScore} - ${opponentScore}` } else { score = `${selectedScore} (${selectedPenaltiesScore}) - (${opponentPenaltiesScore}) ${opponentScore}` } // Check which team won and apply bold formatting to the winning team let scoreStr; if ((selectedScore + selectedPenaltiesScore) > (opponentScore + opponentPenaltiesScore)) { scoreStr = `${match[selectedTeam]} ${score} ${match[opponentTeam]}`; } else if ((selectedScore + selectedPenaltiesScore) < (opponentScore + opponentPenaltiesScore)) { scoreStr = `${match[selectedTeam]} ${score} ${match[opponentTeam]}`; } else { scoreStr = `${match[selectedTeam]} ${score} ${match[opponentTeam]}`; } return scoreStr; }37:T532,function getGoalsSummary(teamName) { teamName = teamName.toUpperCase(); const teamMatches = fifa_world_cup_matches.filter(row => { return row['team1'] === teamName || row['team2'] === teamName; }); const matchCount = teamMatches.length; if (matchCount === 0) { return `

${teamName} did not participate

`; } let numGoalsFavor = 0; let numGoalsAgainst = 0; const matchList = teamMatches.map(match => { const selectedTeam = match['team1'] === teamName ? 'team1' : 'team2'; const selectedScore = match['number of goals ' + selectedTeam]; const opponentTeam = match['team1'] === teamName ? 'team2' : 'team1'; const opponentScore = match['number of goals ' + opponentTeam]; const selectedPenaltiesScore = match['penalty shootouts ' + selectedTeam]; const opponentPenaltiesScore = match['penalty shootouts ' + opponentTeam]; // Update goals statistics numGoalsFavor += selectedScore; numGoalsAgainst += opponentScore; }); return `

${getWinnersEmoji(teamName)} ${teamName} played ${matchCount} matches.
GF: ${'⚽️'.repeat(numGoalsFavor)}
GA: ${'⚽️'.repeat(numGoalsAgainst)}

`; } 38:Tc42,function getArcsData(countryName) { // Create an empty array to store the coordinates data const coordinatesArray = []; const teamMatches = fifa_world_cup_matches.filter(row => { return row['team1'] === countryName.toUpperCase() || row['team2'] === countryName.toUpperCase(); }); // Iterate over each row in the fifa_matches data teamMatches.forEach(row => { const team1 = row['team1']; const team2 = row['team2']; const scoreTeam1 = parseInt(row['number of goals team1']); const scoreTeam2 = parseInt(row['number of goals team2']); const penaltyScoreTeam1 = parseInt(row['penalty shootouts team1']); const penaltyScoreTeam2 = parseInt(row['penalty shootouts team2']); // Determine the winning and losing teams based on scores const goalsTeam1 = scoreTeam1 + penaltyScoreTeam1; const goalsTeam2 = scoreTeam2 + penaltyScoreTeam2; let winningTeam, losingTeam, color, dashAnimateTime, dashGap, dashLength; if (goalsTeam1 > goalsTeam2) { winningTeam = team1; losingTeam = team2; color = [`rgb(0, 255, 0)`, `rgb(255, 0, 0)`]; dashAnimateTime = 3000 / (goalsTeam1 - goalsTeam2) dashGap = 0.1 dashLength = 0.9 } else if (goalsTeam1 < goalsTeam2) { winningTeam = team2; losingTeam = team1; color = [`rgb(0, 255, 0)`, `rgb(255, 0, 0)`] dashAnimateTime = 3000 / (goalsTeam2 - goalsTeam1) dashGap = 0.1 dashLength = 0.9 } else { // Handle the case of a tie, you can decide how to handle it based on your requirement winningTeam = countryName.toUpperCase() === team1 ? team1 : team2; losingTeam = countryName.toUpperCase() === team1 ? team2 : team1; color = [`rgb(255, 255, 255)`, `rgb(255, 255, 255)`] dashAnimateTime = 0 dashGap = 0 dashLength = 1 } // Find the coordinates for the winning and losing teams const winningCountry = concap.find(row => row['CountryName'].toUpperCase() === winningTeam); const losingCountry = concap.find(row => row['CountryName'].toUpperCase() === losingTeam); const selectedCountry = (countryName.toUpperCase() === team1) ? team1 : team2; const opponentCountry = (countryName.toUpperCase() === team1) ? team2 : team1; const date = row['date']; const hour = row['hour']; // If both coordinates are found, add them to the coordinates array if (winningCountry && losingCountry) { const startLat = winningCountry['CapitalLatitude']; const startLng = winningCountry['CapitalLongitude']; const endLat = losingCountry['CapitalLatitude']; const endLng = losingCountry['CapitalLongitude']; const label = `

${getSimpleScoreStr(row, countryName.toUpperCase())}

`; // Add the coordinates to the array coordinatesArray.push({ // coordinates startLat, startLng, endLat, endLng, // style color, label, dashAnimateTime, dashGap, dashLength, // for match stats selectedCountry, opponentCountry, date, hour }); } }); return coordinatesArray; }39:T8fd,function getMatchStats(team1, team2, date) { date = date || ""; let teamMatch; if (date.length === 0) { // no date nor hour provided, use only team1 and team2 to find match teamMatch = fifa_world_cup_matches.filter(row => { return ( (row['team1'] === team1.toUpperCase() && row['team2'] === team2.toUpperCase()) || (row['team1'] === team2.toUpperCase() && row['team2'] === team1.toUpperCase()) ); }); } else { // no date provided, use only team1 and team2 to find match teamMatch = fifa_world_cup_matches.filter(row => { return ( ( (row['team1'] === team1.toUpperCase() && row['team2'] === team2.toUpperCase()) || (row['team1'] === team2.toUpperCase() && row['team2'] === team1.toUpperCase()) ) && (row['date'] === date) ); }); } const match = teamMatch[0] const team1Key = (team1.toUpperCase() === match['team1']) ? 'team1' : 'team2' const team2Key = (team1.toUpperCase() === match['team1']) ? 'team2' : 'team1' const normalise = (d, total) => total === 0 ? 0 : d/total; const determineNumberType = (str) => { if (/%$/.test(str)) { return "percentage"; } else if (/^\d+$/.test(str)) { return "integer"; } else if (/^\d+(\.\d+)?$/.test(str)) { return "float"; } else { return "unknown"; } } // team1 will be the selectedTeam and team2 the opponentTeam const result = metrics.map(metric => { const team1Value = parseFloat(teamMatch[0][`${metric} ${team1Key}`]); const team2Value = parseFloat(teamMatch[0][`${metric} ${team2Key}`]); const totalValue = team1Value + team2Value; return { Metric: metric, team1: isNaN(team1Value) ? null : normalise(team1Value, totalValue), team2: isNaN(team2Value) ? null : normalise(team2Value, totalValue), total: isNaN(totalValue) ? null : totalValue, numType: isNaN(totalValue) ? null : determineNumberType(teamMatch[0][`${metric} team1`]), } }); return { metadata: { nameTeam1: team1, nameTeam2: team2, date: teamMatch[0].date, hour: teamMatch[0].hour, category: teamMatch[0].category, score: getMatchScoreWithEmojis(match, team1Key, team2Key) }, data: result }; }3a:T74f,function svgField (field_scale) { const svg = d3.create("svg") .attr("xmlns", "http://www.w3.org/2000/svg") .attr("xmlns:xlink", "http://www.w3.org/1999/xlink") .attr("width", 740*field_scale) .attr("height", 1110*field_scale) .attr("viewBox", "0 0 74 111"); const rect = svg.append("rect") .attr("width", 74) .attr("height", 111) .attr("fill", "#00a000"); const g = svg.append("g") .attr("fill", "none") .attr("stroke", "#fff") .attr("stroke-width", 0.5) .attr("transform", "translate(3 3)"); g.append("path") .attr("id", "Border") .attr("d", "M 0 0 h 68 v 105 h -68 Z"); g.append("path") .attr("id", "Centre line") .attr("d", "M 0 52.5 h 68"); g.append("circle") .attr("id", "Centre circle") .attr("r", 9.15) .attr("cx", 34) .attr("cy", 52.5); g.append("circle") .attr("id", "Centre mark") .attr("r", 0.75) .attr("cx", 34) .attr("cy", 52.5) .attr("fill", "#fff") .attr("stroke", "none"); const penaltyArea = g.append("g") .attr("id", "Penalty area"); penaltyArea.append("path") .attr("id", "Penalty area line") .attr("d", "M 13.84 0 v 16.5 h 40.32 v -16.5"); penaltyArea.append("path") .attr("id", "Goal area line") .attr("d", "M 24.84 0 v 5.5 h 18.32 v -5.5"); penaltyArea.append("circle") .attr("id", "Penalty mark") .attr("r", 0.75) .attr("cx", 34) .attr("cy", 10.94) .attr("fill", "#fff") .attr("stroke", "none"); penaltyArea.append("path") .attr("id", "Penalty arc") .attr("d", "M 26.733027 16.5 a 9.15 9.15 0 0 0 14.533946 0"); g.append("use") .attr("xlink:href", "#Penalty area") .attr("transform", "rotate(180,34,52.5)"); g.append("path") .attr("id", "Corner arcs") .attr("d", "M 0 2 a 2 2 0 0 0 2 -2M 66 0 a 2 2 0 0 0 2 2M 68 103 a 2 2 0 0 0 -2 2M 2 105 a 2 2 0 0 0 -2 -2"); // Append the SVG to a container element in the HTML document return svg.node() }3b:[{"id":"92af16b3ff7774057027586c65b396392dc9f302b63c0a2f2f3beb269e4b00158b0f1d5c45c73c16543cf24d228482990323433f6994298e7d5dfedbab090f07","href":"https://static.observableusercontent.com/files/92af16b3ff7774057027586c65b396392dc9f302b63c0a2f2f3beb269e4b00158b0f1d5c45c73c16543cf24d228482990323433f6994298e7d5dfedbab090f07","name":"country_colours@6.csv","type":"text/csv","lastModified":1686511349451.07,"size":3694},{"id":"6a0d50adb325a7c1bd86de21e83a2c2c374cf73021a961198684b802c9ad43b6d6565787020a588e5f2551f8635e8c3fca0b8509104912a25c982e95a23ca451","href":"https://static.observableusercontent.com/files/6a0d50adb325a7c1bd86de21e83a2c2c374cf73021a961198684b802c9ad43b6d6565787020a588e5f2551f8635e8c3fca0b8509104912a25c982e95a23ca451","name":"Fifa_world_cup_matches@4.csv","type":"text/csv","lastModified":1686698436929.357,"size":20049},{"id":"f70f4838cf1a9b61805fdfa4384ebc640f5f03f270df37144f8c6008a5c691ba7b060fd22721b1379da839dbd5605eb7ff60056faea83216314c1d2c33e1e646","href":"https://static.observableusercontent.com/files/f70f4838cf1a9b61805fdfa4384ebc640f5f03f270df37144f8c6008a5c691ba7b060fd22721b1379da839dbd5605eb7ff60056faea83216314c1d2c33e1e646","name":"concap@3.csv","type":"text/csv","lastModified":1686531718889.635,"size":13966}] 2f:{"title":"FIFA World Cup 2022 Globe","cells":[{"id":783,"value":"# FIFA World Cup 2022 Globe\n\nWe have developed a unique and immersive way to explore the tournament's results and statistics. Through a 3-dimensional globe ([globe.gl](https://globe.gl/)), you can navigate and select any of the participating countries. As you choose a country, visual arcs will dynamically emerge, representing the matches it played against other nations. By clicking on these arcs, you can delve into detailed match statistics such as possession, attempts, corners, and red cards. Our aim was to provide a novel and engaging perspective on the World Cup, allowing you to uncover intriguing connections and give your geography knowledge a friendly boost.","pinned":false,"hidden":false,"mode":"md"},{"id":1613,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1617,"value":"metrics = [\n \"possession\",\n \"total attempts\",\n \"on target attempts\",\n \"passes\",\n \"passes completed\",\n \"corners\",\n \"offsides\",\n \"yellow cards\",\n \"red cards\"\n // Add more metrics as needed from the Fifa_world_cup_matches@4.csv\n];","pinned":false,"hidden":false,"mode":"ojs"},{"id":1530,"value":"** Globe.gl dependencies **","pinned":false,"hidden":false,"mode":"md"},{"id":0,"value":"Globe = require(\"globe.gl\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1534,"value":"**Global variables**","pinned":false,"hidden":false,"mode":"md"},{"id":1431,"value":"title_height_frac = 0.12","pinned":false,"hidden":false,"mode":"ojs"},{"id":786,"value":"height = Math.round(width / 16 * 10 * (1 - title_height_frac))","pinned":false,"hidden":false,"mode":"ojs"},{"id":847,"value":"globe_div_width = 60;","pinned":false,"hidden":false,"mode":"ojs"},{"id":876,"value":"title_url = \"https://digitalhub.fifa.com/transform/3a170b69-b0b5-4d0c-bca0-85880a60ea1a/World-Cup-logo-landscape-on-dark?io=transform:fill&quality=75\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1543,"value":"**CSS style**","pinned":false,"hidden":false,"mode":"md"},{"id":908,"value":"fontName = \"Exo\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":574,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1557,"value":"**Globe-plotting functions**","pinned":false,"hidden":false,"mode":"md"},{"id":1563,"value":"fetch('https://raw.githubusercontent.com/vasturiano/globe.gl/master/example/datasets/ne_110m_admin_0_countries.geojson').then(res => res.json())","pinned":true,"hidden":false,"mode":"ojs"},{"id":1566,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1559,"value":"**Stats-plotting functions**","pinned":false,"hidden":false,"mode":"md"},{"id":994,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1606,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1609,"value":"**Load data**","pinned":false,"hidden":false,"mode":"md"},{"id":63,"value":"fifa_world_cup_matches = await FileAttachment(\"Fifa_world_cup_matches@4.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":148,"value":"country_colours = await FileAttachment(\"country_colours@6.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":362,"value":"concap = await FileAttachment(\"concap@3.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1621,"value":"**Utils functions**","pinned":false,"hidden":false,"mode":"md"},{"id":312,"value":"function capFirstLetter(str) {\n str = str.toLowerCase()\n return str.replace(/\\b\\w/g, function(match) {\n return match.toUpperCase();\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"capFirstLetter(\"SOUTH KOREA\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":401,"value":"function remapNameIfNeeded(countryName) {\n if (countryName.toUpperCase() === \"REPUBLIC OF SERBIA\") {\n return \"Serbia\"\n } else if (countryName.toUpperCase() === \"UNITED STATES OF AMERICA\") {\n return \"United States\"\n } \n return countryName\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":412,"value":"remapNameIfNeeded(\"Mexico\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":981,"value":"function getWinnersEmoji(teamName) {\n if (teamName.toUpperCase() === \"ARGENTINA\")\n return `🏆`\n if (teamName.toUpperCase() === \"FRANCE\")\n return `🥈`\n if (teamName.toUpperCase() === \"CROATIA\")\n return `🥉`\n return ``\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":561,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"function getMatchesSummary(teamName) {\n teamName = teamName.toUpperCase()\n \n const teamMatches = fifa_world_cup_matches.filter(row => {\n return row['team1'] === teamName || row['team2'] === teamName;\n });\n\n const matchCount = teamMatches.length;\n\n if (matchCount === 0) {\n return `\n

\n ${teamName} did not participate\n

\n `;\n }\n\n const matchList = teamMatches.map(match => {\n return getSimpleScoreStr(match, teamName)\n });\n \n return `\n

\n ${getWinnersEmoji(teamName)} ${matchCount} matches played:\n

${matchList.join('
')}

\n `;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"getMatchesSummary(\"Brazil\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":969,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":1013,"value":"getGoalsSummary(\"Mexico\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":297,"value":"function getColorByCountry(countryName, alpha) {\n alpha = alpha || 1; // default value = 1\n \n countryName = countryName.toUpperCase()\n \n // Find the color for the given country\n const countryColor = country_colours.find(d => d.country.toUpperCase() === countryName);\n\n const teamMatches = fifa_world_cup_matches.filter(row => {\n return row['team1'] === countryName || row['team2'] === countryName;\n });\n\n const matchCount = teamMatches.length;\n\n if (matchCount === 0) {\n return `rgba(255, 255, 255, 0.5)`; \n } else {\n const { R, G, B } = countryColor;\n return `rgba(${R}, ${G}, ${B}, ${alpha})`;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":417,"value":"getColorByCountry(\"United States\") //, 0.5)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1595,"value":"function getInverseColor(rgbaColor) {\n // Parse the RGB values and alpha from the RGBA color string\n const [R, G, B, alpha] = rgbaColor.match(/\\d+/g);\n\n // Calculate the inverse RGB values\n const inverseR = 255 - R;\n const inverseG = 255 - G;\n const inverseB = 255 - B;\n\n // Return the inverse color in RGBA format\n return `rgba(${inverseR}, ${inverseG}, ${inverseB}, ${alpha})`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1603,"value":"getInverseColor(getColorByCountry(\"Argentina\"))","pinned":true,"hidden":false,"mode":"ojs"},{"id":360,"value":"function getPoVByCountry(countryName, altitude) {\n countryName = countryName.toUpperCase();\n const countryData = concap.find((row) => row.CountryName.toUpperCase() === countryName);\n\n if (countryData) {\n return {\n lat: countryData.CapitalLatitude, \n lng: countryData.CapitalLongitude, \n altitude: altitude\n };\n };\n\n return {\n lat: 0, \n lng: 0, \n altitude: altitude\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"getPoVByCountry(\"Mexico\", 2.5)","pinned":true,"hidden":false,"mode":"ojs"},{"id":389,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":392,"value":"getArcsData(\"Mexico\", 0.9)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1464,"value":"function getMatchScoreWithEmojis(match, team1Key, team2Key) {\n const goalsTeam1 = match[`number of goals ${team1Key}`];\n const goalsTeam2 = match[`number of goals ${team2Key}`];\n //const penaltiesTeam1 = match[`penalties scored ${team1Key}`];\n //const penaltiesTeam2 = match[`penalties scored ${team2Key}`];\n const shootoutTeam1 = match[`penalty shootouts ${team1Key}`];\n const shootoutTeam2 = match[`penalty shootouts ${team2Key}`];\n\n function getGoalsEmojis(goals) {\n if (goals === 0) {\n return '0️⃣'\n } else {\n return '⚽️'.repeat(goals)\n }\n }\n\n if ((shootoutTeam1 + shootoutTeam2) === 0) {\n return [\n getGoalsEmojis(goalsTeam1), \n getGoalsEmojis(goalsTeam2)\n ];\n } else {\n return [\n `${getGoalsEmojis(goalsTeam1)} (${getGoalsEmojis(shootoutTeam1)})`, \n `(${getGoalsEmojis(shootoutTeam2)}) ${getGoalsEmojis(goalsTeam2)}`\n ]\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1025,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":1028,"value":"getMatchStats(\"Argentina\", \"France\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1626,"value":"**Playing and experimenting**","pinned":false,"hidden":false,"mode":"md"},{"id":1023,"value":"{\n // Assuming you have the normalized data in the `result` array as shown in the previous example.\n const stats = getMatchStats(\"Mexico\", \"Argentina\")\n \n // Set up the SVG container and dimensions\n const svgWidth = 500;\n const svgHeight = 500;\n\n // Create an SVG container inside a div\n const div = d3.create(\"div\").attr(\"class\", \"right\")\n\n setMatchStats(stats, div, svgWidth, svgHeight);\n\n yield div.node();\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":990,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":992,"value":"svgField(0.5)","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W3b","stdlib":"1","titling":"auto"}