3e:null 3f:["$","title",null,{"children":"Untitled | Duong | Observable"}] 45:Tb20, 46:Tac9,function Boxplot(rawData, selectedPlayer, statistics) { const maxValues = {}; rawData.forEach(player => { const league = player.Comp; if (!maxValues[league]) maxValues[league] = {}; statistics.forEach(stat => { const value = +player[stat.key]; if (!maxValues[league][stat.key] || value > maxValues[league][stat.key]) { maxValues[league][stat.key] = value; } }); }); // Transform data into a format suitable for visualization const data = []; rawData.forEach(player => { statistics.forEach(stat => { const league = player.Comp; const value = +player[stat.key]; const maxValue = maxValues[league][stat.key]; const percentage = (value / maxValue) * 100; data.push({ player: player.Player, category: stat.category, value: percentage, selected: player.Player === selectedPlayer }); }); }); const margin = { top: 20, right: 30, bottom: 40, left: 200 }; const width = 600 - margin.left - margin.right; const height = 400 - margin.top - margin.bottom; const svg = d3.select(DOM.svg(width + margin.left + margin.right, height + margin.top + margin.bottom)) .attr("viewBox", [80, 0, width + margin.left + margin.right, height + margin.top + margin.bottom]) .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); const x = d3.scaleLinear() .domain([0, d3.max(data, d => d.value)]) .range([0, width]); const y = d3.scaleBand() .domain(data.map(d => d.category).filter((value, index, self) => self.indexOf(value) === index)) // Remove duplicates .range([0, height]) .padding(1); const xAxis = d3.axisBottom(x); const yAxis = d3.axisLeft(y); svg.append("g") .attr("transform", `translate(0,${height})`) .call(xAxis); svg.append("g") .call(yAxis); // Draw circles for all players svg.selectAll("circle") .data(data) .enter() .append("circle") .attr("cx", d => x(d.value)) .attr("cy", d => y(d.category)) .attr("r", d => d.selected ? 10 : 5) // Larger radius for selected player .style("fill", d => d.selected ? "#69b3a2" : "#ccc") // Different color for selected player .style("stroke", "black") .style("stroke-width", 2); // svg.append("text") // .attr("x", width / 2) // .attr("y", 0) // .attr("text-anchor", "middle") // .style("font-size", "20px") // .text("Player Scoring Statistics"); // svg.append("g") // .attr("transform", `translate(0,${height + 20})`) // Adjust the position to be below the chart // .append("text") // .attr("x", width / 2) // .attr("y", margin.bottom / 2) // .attr("text-anchor", "middle") // .style("font-size", "20px") // .text("Player Scoring Statistics"); return svg.node().parentNode; }47:Tc9a,function heatmap(playerData, min_color, max_color) { const imageUrl = "https://clipart-library.com/images/AibrpL5BT.jpg"; // Check if playerData is defined if (!playerData) { // If playerData is undefined, show only the image const width = 430; const height = 270; const svg = d3.create("svg") .attr("width", width) .attr("height", height) .style("border", "0px solid black"); svg.append("image") .attr("xlink:href", imageUrl) .attr("width", width) .attr("height", height); return svg.node(); } const TouDef3rd = +playerData.TouDef3rd; const TouMid3rd = +playerData.TouMid3rd; const TouAtt3rd = +playerData.TouAtt3rd; // Define a color scale from min to max const colorScale = d3.scaleLinear() .domain([0, 100]) .range([min_color, max_color]); // Define the width and height of the SVG canvas const width = 430; const height = 270; // Append an SVG element to the notebook cell const svg = d3.create("svg") .attr("width", width) .attr("height", height) .style("border", "0px solid black"); // Define the width, height, and spacing of the rectangles const rectWidth = width / 3; const rectHeight = height; const spacing = 0; // Append the football pitch image svg.append("image") .attr("xlink:href", imageUrl) .attr("width", width) .attr("height", height); const rectangles = [ { x: spacing, y: spacing, width: rectWidth, height: rectHeight, color: colorScale(TouDef3rd), label: `Defense: ${(TouDef3rd * 100 / (TouDef3rd + TouMid3rd + TouAtt3rd)).toFixed(1)}%` }, { x: spacing + rectWidth, y: spacing, width: rectWidth, height: rectHeight, color: colorScale(TouMid3rd), label: `Middle: ${(TouMid3rd * 100 / (TouDef3rd + TouMid3rd + TouAtt3rd)).toFixed(1)}%` }, { x: spacing + rectWidth * 2, y: spacing, width: rectWidth, height: rectHeight, color: colorScale(TouAtt3rd), label: `Attack: ${(TouAtt3rd * 100 / (TouDef3rd + TouMid3rd + TouAtt3rd)).toFixed(1)}%` } ]; // Append rectangles to the SVG svg.selectAll("rect") .data(rectangles) .enter() .append("rect") .attr("x", d => d.x) .attr("y", d => d.y) .attr("width", d => d.width) .attr("height", d => d.height) .attr("fill", d => { // Change opacity to 0.5 (you can adjust the value as needed) return d3.rgb(d.color).toString().replace("rgb", "rgba").replace(")", ", 0.7)"); }); // Append text labels to the SVG svg.selectAll("text") .data(rectangles) .enter() .append("text") .attr("x", d => d.x + d.width / 2) .attr("y", d => d.y + d.height / 2 + 100 ) .attr("dy", ".35em") .attr("text-anchor", "middle") .attr("fill", "black") .text(d => d.label); // Return the SVG element to display it in the notebook return svg.node(); }48:T651,function gradient_legend(min_color, max_color) { // Define a color scale from min to max const colorScale = d3.scaleLinear() .domain([0, 100]) .range([min_color, max_color]); // Define the width and height of the SVG canvas const width = 430; const height = 50; const spacing = 0; // Append an SVG element to the notebook cell const svg = d3.create("svg") .attr("width", width) .attr("height", height) .style("border", "0px solid black"); // Append a gradient legend const gradientWidth = width - 2 * spacing; const gradientHeight = height/2; const gradient = svg.append("defs") .append("linearGradient") .attr("id", "gradient") .attr("x1", "0%") .attr("y1", "0%") .attr("x2", "100%") .attr("y2", "0%"); gradient.append("stop") .attr("offset", "0%") .attr("stop-color", min_color); gradient.append("stop") .attr("offset", "100%") .attr("stop-color", max_color); svg.append("rect") .attr("x", 0) .attr("y", spacing) .attr("width", gradientWidth) .attr("height", gradientHeight) .style("fill", "url(#gradient)"); svg.append("text") .attr("x", gradientWidth*95/100) .attr("y", gradientHeight) .attr("text-anchor", "middle") .attr("alignment-baseline", "hanging") .attr("fill", "black") .text("100%"); svg.append("text") .attr("x", 15) .attr("y", gradientHeight) .attr("text-anchor", "middle") .attr("alignment-baseline", "hanging") .attr("fill", "black") .text("0%"); // Return the SVG element to display it in the notebook return svg.node(); }49:T8f3,radar = Plot.plot({ width: 700, 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(1.5)() }, color: { legend: true }, marks: [ // grey discs Plot.geo([1.0, 0.8, 0.6, 0.4, 0.2], { 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 - 1, x2: 0, y2: 90, stroke: "white", strokeOpacity: 0.5, strokeWidth: 2.5 }), // tick labels // Plot.text([0.6, 0.8, 1.0], { // x: 180, // y: (d) => 90 - d, // dx: 2, // textAnchor: "start", // text: (d) => `${100 * d}%`, // fill: "currentColor", // stroke: "white", // fontSize: 8 // }), // axes labels Plot.text(longitude.domain(), { x: longitude, y: 90 - 1.1, // label coodinate text: Plot.identity, lineWidth: 5., fontSize:20, }), // areas Plot.area(points, { x1: ({ key }) => longitude(key), y1: ({ value }) => 90 - value, x2: 0, y2: 90, fill: "Player", stroke: "Player", curve: "cardinal-closed" }), // points Plot.dot(points, { x: ({ key }) => longitude(key), y: ({ value }) => 90 - value, fill: "Player", stroke: "white" }), // interactive labels Plot.text( points, 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`