3e:null 3f:["$","title",null,{"children":"UFC Fight Analysis Dashboard | Venkata Naga Sai Aditya Gandavarapu | Observable"}] 45:T1016,heatmap = { // Filter data based on the selected year, if applicable const filteredData = selectedYear === "All Years" ? data : data.filter(d => new Date(d.Date).getFullYear() === selectedYear); // Aggregate wins by weight class and month const winsByWeightClassAndMonth = d3.rollups( filteredData, (v) => v.length, // Count the number of wins (d) => new Date(d.Date).getMonth() + 1, // Group by month (1-12) (d) => d.WeightClass // Group by weight class ); // Convert aggregated data into a flat array for easier plotting const heatmapData = []; const weightClasses = Array.from(new Set(filteredData.map(d => d.WeightClass))); const months = Array.from({ length: 12 }, (_, i) => i + 1); const monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; for (const [month, wcGroup] of winsByWeightClassAndMonth) { for (const [weightClass, count] of wcGroup) { heatmapData.push({ month, weightClass, count }); } } // Fill missing combinations with 0 counts for (const month of months) { for (const weightClass of weightClasses) { if (!heatmapData.find(d => d.month === month && d.weightClass === weightClass)) { heatmapData.push({ month, weightClass, count: 0 }); } } } // Set up SVG dimensions const svg = d3.create("svg").attr("width", 800).attr("height", 600); const margin = { top: 50, right: 30, bottom: 50, left: 100 }; const width = 800 - margin.left - margin.right; const height = 600 - margin.top - margin.bottom; // Create scales const x = d3.scaleBand() .domain(monthNames) // Use month names instead of numbers .range([margin.left, width + margin.left]) .padding(0.05); const y = d3.scaleBand() .domain(weightClasses) // Weight classes .range([margin.top, height + margin.top]) .padding(0.05); const color = d3.scaleSequential(d3.interpolateBlues) // Gradient for heatmap .domain([0, d3.max(heatmapData, d => d.count)]); // Draw heatmap rectangles svg.selectAll("rect") .data(heatmapData) .join("rect") .attr("x", d => x(monthNames[d.month - 1])) // Map month number to name .attr("y", d => y(d.weightClass)) .attr("width", x.bandwidth()) .attr("height", y.bandwidth()) .attr("fill", d => color(d.count)) .on("mouseover", (event, d) => { // Show tooltip tooltip.style("visibility", "visible") .html(`Weight Class: ${d.weightClass}
Month: ${monthNames[d.month - 1]}
Wins: ${d.count}`) .style("top", `${event.pageY + 10}px`) .style("left", `${event.pageX + 10}px`); }) .on("mousemove", (event) => { // Move tooltip with mouse tooltip.style("top", `${event.pageY + 10}px`).style("left", `${event.pageX + 10}px`); }) .on("mouseout", () => { // Hide tooltip tooltip.style("visibility", "hidden"); }); // Add X-axis (Months) svg.append("g") .attr("transform", `translate(0,${height + margin.top})`) .call(d3.axisBottom(x)) .selectAll("text") .style("text-anchor", "middle") .style("font-size", "12px"); // Add Y-axis (Weight Classes) svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)); // Add chart title svg.append("text") .attr("x", width / 2 + margin.left) .attr("y", margin.top / 2) .attr("text-anchor", "middle") .style("font-size", "20px") .style("font-weight", "bold") .text(`Heatmap of Wins by Weight Class and Month (${selectedYear === "All Years" ? "All Years" : selectedYear})`); // Add tooltip const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("position", "absolute") .style("visibility", "hidden") .style("background-color", "rgba(0, 0, 0, 0.8)") .style("color", "white") .style("border-radius", "5px") .style("padding", "10px") .style("font-size", "12px"); return svg.node(); }; 46:Te55,pieChart = { // Filter data based on the selected weight class and year const filteredData = data.filter(d => { const isWeightClassMatch = selectedWeightClass === "All Classes" || d.WeightClass === selectedWeightClass; const isYearMatch = selectedYear1 === "All Years" || new Date(d.Date).getFullYear() === selectedYear1; return isWeightClassMatch && isYearMatch; }); // Aggregate wins by Winner (Red and Blue corners) const winsByCorner = d3.rollups( filteredData, v => v.length, // Count the number of wins d => d.Winner // Group by Winner (e.g., Red, Blue) ).filter(([winner]) => winner === "Red" || winner === "Blue"); // Focus only on Red and Blue // Set up SVG dimensions const svgWidth = 600; const svgHeight = 600; const radius = Math.min(svgWidth, svgHeight) / 2 - 40; // Create SVG container const svg = d3.create("svg").attr("width", svgWidth).attr("height", svgHeight); // Create a group element for the pie chart const g = svg .append("g") .attr("transform", `translate(${svgWidth / 2}, ${svgHeight / 2})`); // Create color scale (Red for Red corner, Blue for Blue corner) const color = d3.scaleOrdinal() .domain(["Red", "Blue"]) .range(["#FF4136", "#0074D9"]); // Red and Blue colors // Create pie and arc generators const pie = d3.pie() .sort(null) // Keep original order .value(d => d[1]); // Use the count of wins as the value const arc = d3.arc() .innerRadius(0) // Full pie (no donut hole) .outerRadius(radius); // Draw pie chart slices g.selectAll("path") .data(pie(winsByCorner)) .join("path") .attr("d", arc) .attr("fill", d => color(d.data[0])) // Assign color based on Winner (Red or Blue) .attr("stroke", "white") .attr("stroke-width", 2) .on("mouseover", (event, d) => { // Show tooltip tooltip.style("visibility", "visible") .html(`Winner: ${d.data[0]}
Wins: ${d.data[1]}
Weight Class: ${selectedWeightClass === "All Classes" ? "All Classes" : selectedWeightClass}
Year: ${selectedYear1 === "All Years" ? "All Years" : selectedYear1}`) .style("left", `${event.pageX + 10}px`) .style("top", `${event.pageY + 10}px`); }) .on("mousemove", event => { tooltip.style("left", `${event.pageX + 10}px`).style("top", `${event.pageY + 10}px`); }) .on("mouseout", () => { // Hide tooltip tooltip.style("visibility", "hidden"); }); // Add labels to each pie slice g.selectAll("text") .data(pie(winsByCorner)) .join("text") .attr("transform", d => `translate(${arc.centroid(d)})`) .attr("text-anchor", "middle") .attr("font-size", "12px") .text(d => `${d.data[0]} (${((d.data[1] / d3.sum(winsByCorner, v => v[1])) * 100).toFixed(1)}%)`); // Add a chart title svg.append("text") .attr("x", svgWidth / 2) .attr("y", 30) .attr("text-anchor", "middle") .style("font-size", "20px") .style("font-weight", "bold") .text(`Proportion of Wins by Corner (${selectedWeightClass === "All Classes" ? "All Classes" : selectedWeightClass} - ${selectedYear1 === "All Years" ? "All Years" : selectedYear1})`); // Add tooltip const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("position", "absolute") .style("visibility", "hidden") .style("background-color", "rgba(0, 0, 0, 0.8)") .style("color", "white") .style("border-radius", "5px") .style("padding", "10px") .style("font-size", "12px"); return svg.node(); }; 47:T1658,// Function to render the stacked bar graph stackedBarGraph = { // Filter data based on the selected year and location const filteredData = data.filter(d => { const isYearMatch = selectedYear2 === "All Years" || new Date(d.Date).getFullYear() === selectedYear2; const isLocationMatch = selectedLocation === "All Locations" || d.Location === selectedLocation; return isYearMatch && isLocationMatch; }); // Aggregate wins by location, weight class, and Winner (Red/Blue corners) const winsByLocation = d3.rollup( filteredData, group => d3.rollup( group, g => g.length, // Count the number of wins d => d.WeightClass, // Group by Weight Class d => d.Winner // Group by Winner (Red or Blue) ), d => d.Location // Group by Location ); // Prepare data for stacked bar graph const locations = Array.from(winsByLocation.keys()); // All locations const weightClasses = Array.from(new Set(data.map(d => d.WeightClass))).sort(); // All weight classes const stackedData = locations.map(location => { const winsByClass = winsByLocation.get(location) || new Map(); const aggregatedWins = Object.fromEntries( weightClasses.map(weightClass => { const redWins = (winsByClass.get(weightClass)?.get("Red")) || 0; const blueWins = (winsByClass.get(weightClass)?.get("Blue")) || 0; return [weightClass, { totalWins: redWins + blueWins, dominantCorner: redWins >= blueWins ? "Red" : "Blue" }]; }) ); return { location, ...aggregatedWins }; }); // Set up SVG dimensions const svgWidth = 1000; const svgHeight = 600; const margin = { top: 50, right: 200, bottom: 150, left: 100 }; // Add space for legend const width = svgWidth - margin.left - margin.right; const height = svgHeight - margin.top - margin.bottom; const svg = d3.create("svg").attr("width", svgWidth).attr("height", svgHeight); const g = svg.append("g").attr("transform", `translate(${margin.left}, ${margin.top})`); // Create scales const x = d3.scaleBand() .domain(locations) // Location names .range([0, width]) .padding(0.1); const y = d3.scaleLinear() .domain([0, d3.max(stackedData, d => d3.sum(weightClasses.map(cls => d[cls]?.totalWins || 0)))]) .nice() .range([height, 0]); const color = d3.scaleOrdinal() .domain(weightClasses) .range(d3.schemeCategory10); // Assign a color to each weight class // Stack data for bars const stack = d3.stack() .keys(weightClasses) .value((d, key) => d[key]?.totalWins || 0)(stackedData); // Draw stacked bars g.selectAll("g") .data(stack) .join("g") .attr("fill", d => color(d.key)) // Color by weight class .selectAll("rect") .data(d => d) .join("rect") .attr("x", d => x(d.data.location)) .attr("y", d => y(d[1])) .attr("height", d => y(d[0]) - y(d[1])) .attr("width", x.bandwidth()) .on("mouseover", (event, d) => { // Get the weight class and dominant corner const weightClass = d3.select(event.target.parentNode).datum()?.key; // Key of the parent group const totalWins = d[1] - d[0]; // Height of the bar segment const dominantCorner = d.data[weightClass]?.dominantCorner || "N/A"; // Display the tooltip with relevant information tooltip.style("visibility", "visible") .html(`Location: ${d.data.location}
Weight Class: ${weightClass}
Total Wins: ${totalWins}
Dominant Corner: ${dominantCorner}`); }) .on("mousemove", event => { // Move tooltip with mouse tooltip.style("left", `${event.pageX + 10}px`).style("top", `${event.pageY + 10}px`); }) .on("mouseout", () => { // Hide tooltip tooltip.style("visibility", "hidden"); }); // Add axes g.append("g") .attr("transform", `translate(0, ${height})`) .call(d3.axisBottom(x)) .selectAll("text") .attr("transform", "rotate(-45)") .style("text-anchor", "end"); g.append("g").call(d3.axisLeft(y)); // Add labels svg.append("text") .attr("x", width / 2 + margin.left) .attr("y", svgHeight - 10) .attr("text-anchor", "middle") .text("Locations"); svg.append("text") .attr("x", -(height / 2)) .attr("y", 20) .attr("text-anchor", "middle") .attr("transform", "rotate(-90)") .text("Number of Wins"); // Add title svg.append("text") .attr("x", svgWidth / 2) .attr("y", 20) .attr("text-anchor", "middle") .style("font-size", "16px") .style("font-weight", "bold") .text(`Wins by Location and Weight Class (${selectedYear2 === "All Years" ? "All Years" : selectedYear2}, ${selectedLocation === "All Locations" ? "All Locations" : selectedLocation})`); // Add legend const legend = svg.append("g") .attr("transform", `translate(${width + margin.left + 10}, ${margin.top})`); weightClasses.forEach((cls, i) => { legend.append("rect") .attr("x", 0) .attr("y", i * 20) .attr("width", 15) .attr("height", 15) .attr("fill", color(cls)); legend.append("text") .attr("x", 20) .attr("y", i * 20 + 12) .text(cls) .style("font-size", "12px") .attr("alignment-baseline", "middle"); }); // Tooltip const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("position", "absolute") .style("visibility", "hidden") .style("background-color", "rgba(0, 0, 0, 0.8)") .style("color", "white") .style("border-radius", "5px") .style("padding", "10px") .style("font-size", "12px"); return svg.node(); };48:[{"id":"d0ddbf1bf280243532b643918cc9f178d351f1359cc04879f3e72747e93ee2f97b8c060e0d68f6db495a5972be384c2a036fceae7e24d3a5aa2872bf2ab3bd3a","href":"https://static.observableusercontent.com/files/d0ddbf1bf280243532b643918cc9f178d351f1359cc04879f3e72747e93ee2f97b8c060e0d68f6db495a5972be384c2a036fceae7e24d3a5aa2872bf2ab3bd3a","name":"ufc-master.csv","type":"text/csv","lastModified":1733340817276.638,"size":2753604}] 43:{"id":"e1ebecc41930b3e4","slug":null,"title":"UFC Fight Analysis Dashboard","thumbnail":"de7d7a619e6f0efff0ddfac1bd5102dac9814a53f59da5f537dd983222690813","access_level":"public","create_time":"$D2024-12-04T19:31:43.524Z","update_time":"$D2024-12-12T15:18:17.667Z","view_time":null,"first_public_time":"$D2024-12-04T20:10:23.764Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"9ed36d0a95b34ad8","login":"venkata-naga-sai-aditya-gandavarapu","name":"Venkata Naga Sai Aditya Gandavarapu","avatar_url":"https://avatars-next.observableusercontent.com/cbbf2db29d4d143ca0abbd7ba91f56bb2c34dc57ffc45873b6b66fbd110365cd","tier":"starter_2024","bio":"","following":false},"version":135,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3c288affb6abc737","login":"venkata-naga-sai-aditya-gandavarapu","name":"Venkata Naga Sai Aditya Gandavarapu","avatar_url":"https://avatars-next.observableusercontent.com/7a54219c0559bf33e609650cfd295681a311daa9233cd219d8e319e87d0e1137","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"3c288affb6abc737","login":"venkata-naga-sai-aditya-gandavarapu","name":"Venkata Naga Sai Aditya Gandavarapu","avatar_url":"https://avatars-next.observableusercontent.com/7a54219c0559bf33e609650cfd295681a311daa9233cd219d8e319e87d0e1137","tier":null,"role":"editor"},{"type":"team","id":"9ed36d0a95b34ad8","login":"venkata-naga-sai-aditya-gandavarapu","name":"Venkata Naga Sai Aditya Gandavarapu","avatar_url":"https://avatars-next.observableusercontent.com/cbbf2db29d4d143ca0abbd7ba91f56bb2c34dc57ffc45873b6b66fbd110365cd","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"UFC Fight Analysis Dashboard","cells":[{"id":128,"value":"# UFC Fight Analysis Dashboard\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":39,"value":"## Venkata Naga Sai Aditya Gandavarapu\n**Student ID**: 801367160","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":33,"value":"## UFC Fight Analysis Dashboard\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3,"value":"ufcMaster = await FileAttachment(\"ufc-master.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"ufcMaster","database":"$undefined"},{"id":5,"value":"data = FileAttachment(\"ufc-master.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"### About the Dataset \nThe uploaded dataset contains **6,188 records** related to UFC fights. Each record includes detailed information about the fights, fighters, and outcomes. Key details include:\n\n- **RedFighter:** Name of the fighter in the red corner.\n- **BlueFighter:** Name of the fighter in the blue corner.\n- **RedOdds & BlueOdds:** Betting odds for the respective fighters.\n- **Date:** The date on which the fight occurred.\n- **Location:** Venue and city where the fight took place.\n- **Country:** The country where the fight was held.\n- **Winner:** Indicates the winner of the fight (Red, Blue, or Draw).\n- **FinishDetails:** Description of how the fight ended (e.g., Punch, Submission).\n- **FinishRound:** The round in which the fight concluded.\n- **TotalFightTimeSecs:** Total time of the fight in seconds.\n\nThis dataset is well-suited for sports analytics, understanding fighter performance, betting insights, and historical trend analysis in mixed martial arts (MMA).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":111,"value":"### Wins by weight class and month, which weight classes demonstrate the most consistent activity across the year ?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"viewof selectedYear = Inputs.select(\n [\"All Years\", 2016, 2017, 2018, 2019, 2020, 2021, 2022, 2023], // Replace with relevant years from your dataset\n { label: \"Select Year\", value: \"All Years\" } // Default value\n);\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"### Example Key Observations:\n\n1. **High Activity**: Middleweight and Welterweight classes show the highest wins, especially in March, July, and November. \n2. **Low Representation**: Women's Featherweight and Flyweight have fewer wins overall. \n3. **Seasonal Trends**: Win counts peak in spring and late fall, aligning with UFC event schedules. \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":113,"value":"### Proportion of Wins by Corner across weight classes over the years","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":67,"value":"viewof selectedYear1 = Inputs.select(\n [\"All Years\", 2016, 2017, 2018, 2019, 2020, 2021, 2022, 2023], // Replace with relevant years from your dataset\n { label: \"Select Year\", value: \"All Years\" } // Default value\n);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"viewof selectedWeightClass = Inputs.select(\n Array.from(new Set(data.map(d => d.WeightClass))).sort(), // Extract unique weight classes\n { label: \"Select Weight Class\", value: \"All Classes\" } // Default value\n);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"### Analysis of weight class statistics across the Locations over the Years","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":94,"value":"viewof selectedYear2 = Inputs.select(\n [\"All Years\", 2016, 2017, 2018, 2019, 2020, 2021, 2022, 2023],\n { label: \"Select Year\", value: \"All Years\" }\n);\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"viewof selectedLocation = Inputs.select(\n [\"All Locations\", ...new Set(data.map(d => d.Location))],\n { label: \"Select Location\", value: \"All Locations\" }\n);\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"$47","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W48","stdlib":"1"}} 44:"$43:body"