2b:null 2c:["$","title",null,{"children":"D3.js Football Pitch | cheung927 | Observable"}] 31:T63f,chart = { const svg = d3.select(DOM.svg(width + margin.left + margin.right, height + margin.top + margin.bottom)); const pitch = svg.append('g') .attr('transform', `translate(${margin.left},${margin.right})`) pitch.append('rect') .attr('x', -margin.left) .attr('y', -margin.top) .attr('width', width + margin.left + margin.right) .attr('height', height + margin.top + margin.bottom) .style('fill', pitchColor) const pitchLineData = getPitchLines; pitch.selectAll('.pitchLines') .data(pitchLineData) .enter().append('line') .attr('x1', d => d['x1'] * pitchMultiplier) .attr('x2', d => d['x2'] * pitchMultiplier) .attr('y1', d => d['y1'] * pitchMultiplier) .attr('y2', d => d['y2'] * pitchMultiplier) .style('stroke-width', lineWidth) .style('stroke', lineColor); const pitchCircleData = getPitchCircles; pitch.selectAll('.pitchCircles') .data(pitchCircleData) .enter().append('circle') .attr('cx', d => d['cx'] * pitchMultiplier) .attr('cy', d => d['cy'] * pitchMultiplier) .attr('r', d => d['r'] * pitchMultiplier) .style('stroke-width', lineWidth) .style('stroke', lineColor) .style('fill', d => d['color']); const pitchArcData = getArcs; const arc = d3.arc(); pitch.selectAll('.pitchCorners') .data(pitchArcData) .enter().append('path') .attr('d', d => arc(d['arc'])) .attr('transform', d => `translate(${pitchMultiplier * d.x},${pitchMultiplier * d.y})`) .style('fill', lineColor); return svg.node(); }32:T932,getPitchLines = { const lines = []; // left penalty box lines.push({x1: 0, x2: 16.5, y1: pitchHeight/2 - 11 - 9.15, y2: pitchHeight/2 - 11 - 9.15}); lines.push({x1: 16.5, x2: 16.5, y1: 13.85, y2: pitchHeight/2 + 11 + 9.15}); lines.push({x1: 0, x2: 16.5, y1: pitchHeight/2 + 11 + 9.15, y2: pitchHeight/2 + 11 + 9.15}); // left six-yard box lines.push({x1: 0, x2: 5.5, y1: pitchHeight/2 - 9.15, y2: pitchHeight/2 - 9.15}); lines.push({x1: 5.5, x2: 5.5, y1: pitchHeight/2 - 9.15, y2: pitchHeight/2 + 9.15}); lines.push({x1: 0, x2: 5.5, y1: pitchHeight/2 + 9.15, y2: pitchHeight/2 + 9.15}); // right penalty box lines.push({x1: pitchWidth - 16.5, x2: pitchWidth, y1: pitchHeight/2 - 11 - 9.15, y2: pitchHeight/2 - 11 - 9.15}); lines.push({x1: pitchWidth - 16.5, x2: pitchWidth - 16.5, y1: pitchHeight/2 - 11 - 9.15, y2: pitchHeight/2 + 11 + 9.15}); lines.push({x1: pitchWidth - 16.5, x2: pitchWidth, y1: pitchHeight/2 + 11 + 9.15, y2: pitchHeight/2 + 11 + 9.15}); // right six-yard box lines.push({x1: pitchWidth - 5.5, x2: pitchWidth, y1: pitchHeight/2 - 9.15, y2: pitchHeight/2 - 9.15}); lines.push({x1: pitchWidth - 5.5, x2: pitchWidth - 5.5, y1: pitchHeight/2 - 9.15, y2: pitchHeight/2 + 9.15}); lines.push({x1: pitchWidth - 5.5, x2: pitchWidth, y1: pitchHeight/2 + 9.15, y2: pitchHeight/2 + 9.15}); // outside borders lines.push({x1: 0, x2: pitchWidth, y1: 0, y2: 0}); lines.push({x1: 0, x2: pitchWidth, y1: pitchHeight, y2: pitchHeight}); lines.push({x1: 0, x2: 0, y1: 0, y2: pitchHeight}); lines.push({x1: pitchWidth, x2: pitchWidth, y1: 0, y2: pitchHeight}); // middle line lines.push({x1: pitchWidth/2, x2: pitchWidth/2, y1: 0, y2: pitchHeight}); // left goal lines.push({x1: -1.5, x2: -1.5, y1: pitchHeight/2 - 7.32/2, y2: pitchHeight/2 + 7.32/2}); lines.push({x1: -1.5, x2: 0, y1: pitchHeight/2 - 7.32/2, y2: pitchHeight/2 - 7.32/2}); lines.push({x1: -1.5, x2: 0, y1: pitchHeight/2 + 7.32/2, y2: pitchHeight/2 + 7.32/2}); // right goal lines.push({x1: pitchWidth + 1.5, x2: pitchWidth + 1.5, y1: pitchHeight/2 - 7.32/2, y2: pitchHeight/2 + 7.32/2}); lines.push({x1: pitchWidth, x2: pitchWidth + 1.5, y1: pitchHeight/2 - 7.32/2, y2: pitchHeight/2 - 7.32/2}); lines.push({x1: pitchWidth, x2: pitchWidth + 1.5, y1: pitchHeight/2 + 7.32/2, y2: pitchHeight/2 + 7.32/2}); return lines; }33:T51f,getArcs = { const arcs = []; const cornerRadius = 1 * pitchMultiplier; const penaltyRadius = 9.15 * pitchMultiplier; // left top corner arcs.push({arc: {innerRadius: cornerRadius, outerRadius: cornerRadius + lineWidth, startAngle: 1/2 * Math.PI, endAngle: Math.PI}, 'x': 0, 'y': 0}); // left bottom corner arcs.push({arc: {innerRadius: cornerRadius, outerRadius: cornerRadius + lineWidth, startAngle: 1/2 * Math.PI, endAngle: 0}, 'x': 0, 'y': pitchHeight}); // right top corner arcs.push({arc: {innerRadius: cornerRadius, outerRadius: cornerRadius + lineWidth, startAngle: 3/2 * Math.PI, endAngle: Math.PI}, 'x': pitchWidth, 'y': 0}); // right bottom corner arcs.push({arc: {innerRadius: cornerRadius, outerRadius: cornerRadius + lineWidth, startAngle: 2 * Math.PI, endAngle: 3/2 * Math.PI}, 'x': pitchWidth, 'y': pitchHeight}); // left penalty arc arcs.push({arc: {innerRadius: penaltyRadius, outerRadius: penaltyRadius + lineWidth, startAngle: Math.sin(6.5/9.15), endAngle: Math.PI - Math.sin(6.5/9.15)}, 'x': 11, 'y': pitchHeight/2}); // right penalty arc arcs.push({arc: {innerRadius: penaltyRadius, outerRadius: penaltyRadius + lineWidth, startAngle: -Math.sin(6.5/9.15), endAngle: -(Math.PI - Math.sin(6.5/9.15))}, 'x': pitchWidth - 11, 'y': pitchHeight/2}); return arcs; }34:T14d8,//Usa Vs Portugal, miss(type:13) vs goal(type:16) chart2 = { const svg = d3.select(DOM.svg(width + margin.left + margin.right, height + margin.top + margin.bottom)); const pitch = svg.append('g') .attr('transform', `translate(${margin.left},${margin.right})`) // //tooltip // const tooltip = d3tip() // .style('border', 'solid 3px black') // .style('background-color', 'white') // .style('border-radius', '10px') // .style('float', 'left') // .style('font-family', 'monospace') // // Apply tooltip to our SVG // svg.call(tooltip) pitch.append('rect') .attr('x', -margin.left) .attr('y', -margin.top) .attr('width', width + margin.left + margin.right) .attr('height', height + margin.top + margin.bottom) .style('fill', pitchColor) //background const pitchLineData = getPitchLines; pitch.selectAll('.pitchLines') .data(pitchLineData) .enter().append('line') .attr('x1', d => d['x1'] * pitchMultiplier) .attr('x2', d => d['x2'] * pitchMultiplier) .attr('y1', d => d['y1'] * pitchMultiplier) .attr('y2', d => d['y2'] * pitchMultiplier) .style('stroke-width', lineWidth) .style('stroke', lineColor); //all straight line const shotData = UsaVsPortugal731796; pitch.selectAll('.pitchLines') .data(shotData.filter(function(d){return d.type == 13 && d.side == 'H'})) .enter().append('line') .attr('x1', d => width - d['x'] *8.4) .attr('x2', d => width - d['to_x'] *8.4 ) .attr('y1', d => height - d['y'] *5.44 ) .attr('y2', d => height - d['to_y'] *5.44 ) .style('stroke-width', lineWidth) .style('stroke', 'purple') .attr('opacity', 0.5); pitch.selectAll('.pitchCircles') .data(shotData.filter(function(d){return d.type == 13 && d.side == 'H'})) .enter().append('circle') .attr('cx', d => width - d['x'] * 8.4) .attr('cy', d => height - d['y'] * 5.44) .attr('r', d => 5) .style('stroke-width', lineWidth) .style('stroke', lineColor) .style('fill', d => 'SteelBlue'); //type 13: Miss by home team pitch.selectAll('.pitchLines') .data(shotData.filter(function(d){return d.type == 13 && d.side == 'A'})) .enter().append('line') .attr('x1', d => d['x'] *8.4) .attr('x2', d => d['to_x'] *8.4 ) .attr('y1', d => d['y'] *5.44 ) .attr('y2', d => d['to_y'] *5.44 ) .style('stroke-width', lineWidth) .style('stroke', 'purple') .attr('opacity', 0.5); pitch.selectAll('.pitchCircles') .data(shotData.filter(function(d){return d.type == 13 && d.side == 'A'})) .enter().append('circle') .attr('cx', d => d['x'] * 8.4) .attr('cy', d => d['y'] * 5.44) .attr('r', d => 5) .style('stroke-width', lineWidth) .style('stroke', lineColor) .style('fill', d => 'SteelBlue'); //type 13: Miss by away team pitch.selectAll('.pitchLines') .data(shotData.filter(function(d){return d.type == 16 && d.side == 'H'})) .enter().append('line') .attr('x1', d => width - d['x'] *8.4) .attr('x2', d => width - d['to_x'] *8.4 ) .attr('y1', d => height - d['y'] *5.44 ) .attr('y2', d => height - d['to_y'] *5.44 ) .style('stroke-width', lineWidth) .style('stroke', 'red') .attr('opacity', 0.5); pitch.selectAll('.pitchCircles') .data(shotData.filter(function(d){return d.type == 16 && d.side == 'H'})) .enter().append('circle') .attr('cx', d => width - d['x'] * 8.4) .attr('cy', d => height - d['y'] * 5.44) .attr('r', d => 5) .style('stroke-width', lineWidth) .style('stroke', lineColor) .style('fill', d => 'GoldenRod'); //type 16: goal by home team pitch.selectAll('.pitchLines') .data(shotData.filter(function(d){return d.type == 16 && d.side == 'A'})) .enter().append('line') .attr('x1', d => d['x'] *8.4) .attr('x2', d => d['to_x'] *8.4 ) .attr('y1', d => d['y'] *5.44 ) .attr('y2', d => d['to_y'] *5.44 ) .style('stroke-width', lineWidth) .style('stroke', 'red') .attr('opacity', 0.5); pitch.selectAll('.pitchCircles') .data(shotData.filter(function(d){return d.type == 16 && d.side == 'A'})) .enter().append('circle') .attr('cx', d => d['x'] * 8.4) .attr('cy', d => d['y'] * 5.44) .attr('r', d => 5) .style('stroke-width', lineWidth) .style('stroke', lineColor) .style('fill', d => 'GoldenRod'); //type 16: goal by away team const pitchCircleData = getPitchCircles2; pitch.selectAll('.pitchCircles') .data(pitchCircleData) .enter().append('circle') .attr('cx', d => d['cx'] * pitchMultiplier) .attr('cy', d => d['cy'] * pitchMultiplier) .attr('r', d => d['r'] * pitchMultiplier) .style('stroke-width', lineWidth) .style('stroke', lineColor) .style('fill', d => d['color']); //circle const pitchArcData = getArcs; const arc = d3.arc(); pitch.selectAll('.pitchCorners') .data(pitchArcData) .enter().append('path') .attr('d', d => arc(d['arc'])) .attr('transform', d => `translate(${pitchMultiplier * d.x},${pitchMultiplier * d.y})`) .style('fill', lineColor); //curve return svg.node(); }35:Tff0,////all matches, miss(type:13) vs goal(type:16) chart4 = { const svg = d3.select(DOM.svg(width + margin.left + margin.right, height + margin.top + margin.bottom)); const pitch = svg.append('g') .attr('transform', `translate(${margin.left},${margin.right})`) //tooltip const tooltip = d3tip() .style('border', 'solid 3px black') .style('background-color', 'white') .style('border-radius', '10px') .style('float', 'left') .style('font-family', 'arial') .html(d => ` Type: ${(typeconvert(d.type))}
xPosition: ${Math.round(d.x)}
yPosition: ${Math.round(d.y)}
Distance to goal : ${Math.round(finddistance(d.x,d.to_x,d.y,d.to_y))}
`) // Apply tooltip to our SVG svg.call(tooltip) pitch.append('rect') .attr('x', -margin.left) .attr('y', -margin.top) .attr('width', width + margin.left + margin.right) .attr('height', height + margin.top + margin.bottom) //.style('fill', pitchColor) .style('fill', 'green') .attr('opacity', 0.7); //background const pitchLineData = getPitchLines; pitch.selectAll('.pitchLines') .data(pitchLineData) .enter().append('line') .attr('x1', d => d['x1'] * pitchMultiplier) .attr('x2', d => d['x2'] * pitchMultiplier) .attr('y1', d => d['y1'] * pitchMultiplier) .attr('y2', d => d['y2'] * pitchMultiplier) .style('stroke-width', lineWidth) //.style('stroke', lineColor); .style('stroke', 'white'); //all straight line const shotData2 = events_merged_all; pitch.selectAll('.pitchLines') .data(shotData2.filter(function(d){return d.type == 13})) .enter().append('line') .attr('x1', d => d['x'] *8.4) .attr('x2', d => d['to_x'] *8.4 ) .attr('y1', d => d['y'] *5.44 ) .attr('y2', d => d['to_y'] *5.44 ) .style('stroke-width', lineWidth) .style('stroke', 'purple') .attr('opacity', 0.15); pitch.selectAll('.pitchCircles') .data(shotData2.filter(function(d){return d.type == 13})) .enter().append('circle') .attr('cx', d => d['x'] * 8.4) .attr('cy', d => d['y'] * 5.44) .attr('r', d => 5) .style('stroke-width', lineWidth) .style('stroke', lineColor) .style('fill', d => 'SteelBlue') .on('mouseover', tooltip.show) .on('mouseout', tooltip.hide); //type 13: Miss pitch.selectAll('.pitchLines') .data(shotData2.filter(function(d){return d.type == 16})) .enter().append('line') .attr('x1', d => d['x'] *8.4) .attr('x2', d => d['to_x'] *8.4 ) .attr('y1', d => d['y'] *5.44 ) .attr('y2', d => d['to_y'] *5.44 ) .style('stroke-width', lineWidth) .style('stroke', 'red') .attr('opacity', 0.15); pitch.selectAll('.pitchCircles') .data(shotData2.filter(function(d){return d.type == 16})) .enter().append('circle') .attr('cx', d => d['x'] * 8.4) .attr('cy', d => d['y'] * 5.44) .attr('r', d => 5) .style('stroke-width', lineWidth) .style('stroke', lineColor) .style('fill', d => 'GoldenRod') .on('mouseover', tooltip.show) .on('mouseout', tooltip.hide); //type 13: Miss const pitchCircleData = getPitchCircles2; pitch.selectAll('.pitchCircles') .data(pitchCircleData) .enter().append('circle') .attr('cx', d => d['cx'] * pitchMultiplier) .attr('cy', d => d['cy'] * pitchMultiplier) .attr('r', d => d['r'] * pitchMultiplier) .style('stroke-width', lineWidth) //.style('stroke', lineColor) .style('fill', d => d['color']) .style('stroke', 'white'); //circle const pitchArcData = getArcs; const arc = d3.arc(); pitch.selectAll('.pitchCorners') .data(pitchArcData) .enter().append('path') .attr('d', d => arc(d['arc'])) .attr('transform', d => `translate(${pitchMultiplier * d.x},${pitchMultiplier * d.y})`) //.style('fill', lineColor) .style('stroke', 'white'); //curve return svg.node(); }36:Tff2,////saved (type:15) vs goal(type:16) in all matches chart5 = { const svg = d3.select(DOM.svg(width + margin.left + margin.right, height + margin.top + margin.bottom)); const pitch = svg.append('g') .attr('transform', `translate(${margin.left},${margin.right})`) //tooltip const tooltip = d3tip() .style('border', 'solid 3px black') .style('background-color', 'white') .style('border-radius', '10px') .style('float', 'left') .style('font-family', 'arial') .html(d => ` Type: ${(typeconvert(d.type))}
xPosition: ${Math.round(d.x)}
yPosition: ${Math.round(d.y)}
Distance to goal : ${Math.round(finddistance(d.x,d.to_x,d.y,d.to_y))}
`) // Apply tooltip to our SVG svg.call(tooltip) pitch.append('rect') .attr('x', -margin.left) .attr('y', -margin.top) .attr('width', width + margin.left + margin.right) .attr('height', height + margin.top + margin.bottom) //.style('fill', pitchColor) .style('fill', 'green') .attr('opacity', 0.7); //background const pitchLineData = getPitchLines; pitch.selectAll('.pitchLines') .data(pitchLineData) .enter().append('line') .attr('x1', d => d['x1'] * pitchMultiplier) .attr('x2', d => d['x2'] * pitchMultiplier) .attr('y1', d => d['y1'] * pitchMultiplier) .attr('y2', d => d['y2'] * pitchMultiplier) .style('stroke-width', lineWidth) //.style('stroke', lineColor); .style('stroke', 'white'); //all straight line const shotData2 = events_merged_all; pitch.selectAll('.pitchLines') .data(shotData2.filter(function(d){return d.type == 15})) .enter().append('line') .attr('x1', d => d['x'] *8.4) .attr('x2', d => d['to_x'] *8.4 ) .attr('y1', d => d['y'] *5.44 ) .attr('y2', d => d['to_y'] *5.44 ) .style('stroke-width', lineWidth) .style('stroke', 'purple') .attr('opacity', 0.25); pitch.selectAll('.pitchCircles') .data(shotData2.filter(function(d){return d.type == 15})) .enter().append('circle') .attr('cx', d => d['x'] * 8.4) .attr('cy', d => d['y'] * 5.44) .attr('r', d => 5) .style('stroke-width', lineWidth) .style('stroke', lineColor) .style('fill', d => 'pink') .on('mouseover', tooltip.show) .on('mouseout', tooltip.hide); //type 15: saved pitch.selectAll('.pitchLines') .data(shotData2.filter(function(d){return d.type == 16})) .enter().append('line') .attr('x1', d => d['x'] *8.4) .attr('x2', d => d['to_x'] *8.4 ) .attr('y1', d => d['y'] *5.44 ) .attr('y2', d => d['to_y'] *5.44 ) .style('stroke-width', lineWidth) .style('stroke', 'red') .attr('opacity', 0.5); pitch.selectAll('.pitchCircles') .data(shotData2.filter(function(d){return d.type == 16})) .enter().append('circle') .attr('cx', d => d['x'] * 8.4) .attr('cy', d => d['y'] * 5.44) .attr('r', d => 5) .style('stroke-width', lineWidth) .style('stroke', lineColor) .style('fill', d => 'GoldenRod') .on('mouseover', tooltip.show) .on('mouseout', tooltip.hide); //type 16: goal const pitchCircleData = getPitchCircles2; pitch.selectAll('.pitchCircles') .data(pitchCircleData) .enter().append('circle') .attr('cx', d => d['cx'] * pitchMultiplier) .attr('cy', d => d['cy'] * pitchMultiplier) .attr('r', d => d['r'] * pitchMultiplier) .style('stroke-width', lineWidth) //.style('stroke', lineColor) .style('fill', d => d['color']) .style('stroke', 'white'); //circle const pitchArcData = getArcs; const arc = d3.arc(); pitch.selectAll('.pitchCorners') .data(pitchArcData) .enter().append('path') .attr('d', d => arc(d['arc'])) .attr('transform', d => `translate(${pitchMultiplier * d.x},${pitchMultiplier * d.y})`) //.style('fill', lineColor) .style('stroke', 'white'); //curve return svg.node(); }37:T5d9,chart6 = { const shotData3 = events_merged_all; const height = 600 const svg = d3.select(DOM.svg(width, height)) const margin = { left: 30, top: 10, right: 10, bottom: 20 } // Use d3.scaleTime() instead of d3.scaleLinear() for datetime const xScale = d3.scaleLinear() .range([margin.left, width - margin.right]) // .domain(d3.extent(shotData3.map(d => d.min))) .domain([0,120]) svg.append('g') .call(d3.axisBottom(xScale)) .attr('transform', `translate(0,${height - margin.bottom})`) const yScale = d3.scaleLinear() .range([height - margin.bottom, margin.top]) // Substitute dataset .domain(d3.extent(shotData3.map(d => d.y))) svg.append('g') .call(d3.axisLeft(yScale)) .attr('transform', `translate(${margin.left},0)`) svg.selectAll('circle') .data(goal_vs_time_data2) .enter() .append('circle') // Circles are distributed across x-axis .attr('cx', d => xScale(d.time)) // Across y-axis as well, and it becomes two dimensional .attr('cy', d => yScale(d.distance)) .attr('r', 5) .attr('opacity',0.5) .attr('fill', 'GoldenRod') // .append('circle') // // Circles are distributed across x-axis // .attr('cx', d => xScale(d.mtime)) // // Across y-axis as well, and it becomes two dimensional // .attr('cy', d => yScale(d.mdistance)) // .attr('r', 5) // .attr('opacity',0.5) // .attr('fill', 'SteelBlue') return svg.node() }38:T1003,//selected match chart12 = { const svg = d3.select(DOM.svg(width + margin.left + margin.right, height + margin.top + margin.bottom)); const pitch = svg.append('g') .attr('transform', `translate(${margin.left},${margin.right})`) //tooltip const tooltip = d3tip() .style('border', 'solid 3px black') .style('background-color', 'white') .style('border-radius', '10px') .style('float', 'left') .style('font-family', 'arial') .html(d => ` Type: ${(typeconvert(d.type))}
Home/Away: ${d.side}
xPosition: ${Math.round(d.x)}
yPosition: ${Math.round(d.y)}
Pass Distance : ${Math.round(finddistance(d.x,d.to_x,d.y,d.to_y))}
`) // Apply tooltip to our SVG svg.call(tooltip) pitch.append('rect') .attr('x', -margin.left) .attr('y', -margin.top) .attr('width', width + margin.left + margin.right) .attr('height', height + margin.top + margin.bottom) //.style('fill', pitchColor) .style('fill', 'green') .attr('opacity', 0.7); //background const pitchLineData = getPitchLines; pitch.selectAll('.pitchLines') .data(pitchLineData) .enter().append('line') .attr('x1', d => d['x1'] * pitchMultiplier) .attr('x2', d => d['x2'] * pitchMultiplier) .attr('y1', d => d['y1'] * pitchMultiplier) .attr('y2', d => d['y2'] * pitchMultiplier) .style('stroke-width', lineWidth) //.style('stroke', lineColor); .style('stroke', 'white'); //all straight line pitch.selectAll('.pitchLines') .data(data_matched.filter(function(d){return d.side == "H"})) .enter().append('line') .attr('x1', d => d.x *8.4) .attr('x2', d => d.to_x *8.4 ) .attr('y1', d => d.y *5.44 ) .attr('y2', d => d.to_y *5.44 ) .style('stroke-width', lineWidth) .style('stroke', 'blue') .attr('opacity', 0.15); pitch.selectAll('.pitchCircles') .data(data_matched.filter(function(d){return d.side == "H"})) .enter().append('circle') .attr('cx', d => d.x * 8.4) .attr('cy', d => d.y * 5.44) .attr('r', d => 5) .style('stroke-width', lineWidth) .style('stroke', lineColor) .style('fill', d => 'SteelBlue') .attr('opacity', 0.75) .on('mouseover', tooltip.show) .on('mouseout', tooltip.hide); //type 1 , side = home team pitch.selectAll('.pitchLines') .data(data_matched.filter(function(d){return d.side == "A"})) .enter().append('line') .attr('x1', d => d.x *8.4) .attr('x2', d => d.to_x *8.4 ) .attr('y1', d => d.y *5.44 ) .attr('y2', d => d.to_y *5.44 ) .style('stroke-width', lineWidth) .style('stroke', 'red') .attr('opacity', 0.15); pitch.selectAll('.pitchCircles') .data(data_matched.filter(function(d){return d.side == "A"})) .enter().append('circle') .attr('cx', d => d.x * 8.4) .attr('cy', d => d.y * 5.44) .attr('r', d => 5) .style('stroke-width', lineWidth) .style('stroke', lineColor) .style('fill', d => 'pink') .attr('opacity', 0.75) .on('mouseover', tooltip.show) .on('mouseout', tooltip.hide); //type 1 , side = away team const pitchCircleData = getPitchCircles2; pitch.selectAll('.pitchCircles') .data(pitchCircleData) .enter().append('circle') .attr('cx', d => d['cx'] * pitchMultiplier) .attr('cy', d => d['cy'] * pitchMultiplier) .attr('r', d => d['r'] * pitchMultiplier) .style('stroke-width', lineWidth) //.style('stroke', lineColor) .style('fill', d => d['color']) .style('stroke', 'white'); //circle const pitchArcData = getArcs; const arc = d3.arc(); pitch.selectAll('.pitchCorners') .data(pitchArcData) .enter().append('path') .attr('d', d => arc(d['arc'])) .attr('transform', d => `translate(${pitchMultiplier * d.x},${pitchMultiplier * d.y})`) //.style('fill', lineColor) .style('stroke', 'white'); //curve return svg.node(); }39:T10d4,//selected match chart13 = { const svg = d3.select(DOM.svg(width + margin.left + margin.right, height + margin.top + margin.bottom)); const pitch = svg.append('g') .attr('transform', `translate(${margin.left},${margin.right})`) //tooltip const tooltip = d3tip() .style('border', 'solid 3px black') .style('background-color', 'white') .style('border-radius', '10px') .style('float', 'left') .style('font-family', 'arial') .html(d => ` Type: ${(typeconvert(d.type))}
Name: ${selected_player}
Home/Away: ${d.side}
xPosition: ${Math.round(d.x)}
yPosition: ${Math.round(d.y)}
Pass Distance : ${Math.round(finddistance(d.x,d.to_x,d.y,d.to_y))}
`) // Apply tooltip to our SVG svg.call(tooltip) pitch.append('rect') .attr('x', -margin.left) .attr('y', -margin.top) .attr('width', width + margin.left + margin.right) .attr('height', height + margin.top + margin.bottom) //.style('fill', pitchColor) .style('fill', 'green') .attr('opacity', 0.7); //background const pitchLineData = getPitchLines; pitch.selectAll('.pitchLines') .data(pitchLineData) .enter().append('line') .attr('x1', d => d['x1'] * pitchMultiplier) .attr('x2', d => d['x2'] * pitchMultiplier) .attr('y1', d => d['y1'] * pitchMultiplier) .attr('y2', d => d['y2'] * pitchMultiplier) .style('stroke-width', lineWidth) //.style('stroke', lineColor); .style('stroke', 'white'); //all straight line pitch.selectAll('.pitchLines') .data(data_matched.filter(function(d){return (d.side == "H") && (d.play_id == selected_player_id) })) .enter().append('line') .attr('x1', d => d.x *8.4) .attr('x2', d => d.to_x *8.4 ) .attr('y1', d => d.y *5.44 ) .attr('y2', d => d.to_y *5.44 ) .style('stroke-width', lineWidth) .style('stroke', 'red') .attr('opacity', 0.5); pitch.selectAll('.pitchCircles') .data(data_matched.filter(function(d){return (d.side == "H") && (d.play_id == selected_player_id) })) .enter().append('circle') .attr('cx', d => d.x * 8.4) .attr('cy', d => d.y * 5.44) .attr('r', d => 8) .style('stroke-width', lineWidth) .style('stroke', lineColor) .style('fill', d => 'SteelBlue') .attr('opacity', 0.75) .on('mouseover', tooltip.show) .on('mouseout', tooltip.hide); //type 1 , side = home team pitch.selectAll('.pitchLines') .data(data_matched.filter(function(d){return (d.side == "A") && (d.play_id == selected_player_id) })) .enter().append('line') .attr('x1', d => d.x *8.4) .attr('x2', d => d.to_x *8.4 ) .attr('y1', d => d.y *5.44 ) .attr('y2', d => d.to_y *5.44 ) .style('stroke-width', lineWidth) .style('stroke', 'red') .attr('opacity', 0.75); pitch.selectAll('.pitchCircles') .data(data_matched.filter(function(d){return (d.side == "A") && (d.play_id == selected_player_id) })) .enter().append('circle') .attr('cx', d => d.x * 8.4) .attr('cy', d => d.y * 5.44) .attr('r', d => 8) .style('stroke-width', lineWidth) .style('stroke', lineColor) .style('fill', d => 'SteelBlue') .attr('opacity', 0.75) .on('mouseover', tooltip.show) .on('mouseout', tooltip.hide); //type 1 , side = away team const pitchCircleData = getPitchCircles2; pitch.selectAll('.pitchCircles') .data(pitchCircleData) .enter().append('circle') .attr('cx', d => d['cx'] * pitchMultiplier) .attr('cy', d => d['cy'] * pitchMultiplier) .attr('r', d => d['r'] * pitchMultiplier) .style('stroke-width', lineWidth) //.style('stroke', lineColor) .style('fill', d => d['color']) .style('stroke', 'white'); //circle const pitchArcData = getArcs; const arc = d3.arc(); pitch.selectAll('.pitchCorners') .data(pitchArcData) .enter().append('path') .attr('d', d => arc(d['arc'])) .attr('transform', d => `translate(${pitchMultiplier * d.x},${pitchMultiplier * d.y})`) //.style('fill', lineColor) .style('stroke', 'white'); //curve return svg.node(); }3a:[] 2f:{"id":"088aa9a341078616","slug":"d3-js-football-pitch","title":"D3.js Football Pitch","thumbnail":"648fdb6f893a0e9b5c1b1f6c66297430ee73a699f7729806469491d7a537eda9","access_level":"public","create_time":"$D2019-04-29T14:59:38.206Z","update_time":"$D2019-05-02T10:49:19.660Z","view_time":null,"first_public_time":"$D2019-04-29T15:06:45.593Z","fork":{"id":"909af5e126715cd6","slug":"d3-js-football-pitch","title":"D3.js Football Pitch","owner":{"id":"1ad19d4c48664158","login":"mhleungah","name":"LEUNG, Ming Hong"}},"stars":4,"starred":false,"owner":{"type":"team","id":"95f75df5ea2c4e8f","login":"cheung927","name":"","avatar_url":"https://avatars-next.observableusercontent.com/41e093906a7615585829342f13859abf79e53af2d834dbe686b439c53d2fe8eb","tier":"starter_2024"},"version":1213,"publish_version":1213,"role":null,"authored":false,"authors":[{"type":"individual","id":"8b69b7356e0dfccc","login":"cheung927","name":"","avatar_url":"https://avatars-next.observableusercontent.com/41e093906a7615585829342f13859abf79e53af2d834dbe686b439c53d2fe8eb","tier":null}],"members":[{"type":"individual","id":"8b69b7356e0dfccc","login":"cheung927","name":"","avatar_url":"https://avatars-next.observableusercontent.com/41e093906a7615585829342f13859abf79e53af2d834dbe686b439c53d2fe8eb","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":6,"collection":null,"type":"notebook","body":{"title":"D3.js Football Pitch","cells":[{"id":0,"value":"md`# D3.js Football Pitch`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"lineColor = '#000'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"lineWidth = 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"pitchColor = '#eee'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":24,"value":"pitchMultiplier = 8","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":330,"value":"pitchWidth = 105","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":331,"value":"pitchHeight = 68","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":70,"value":"margin = ({top: 20, right: 20, bottom: 20, left: 20})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":26,"value":"width = pitchWidth * pitchMultiplier","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"height = pitchHeight * pitchMultiplier","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":413,"value":"d3tip = require('d3-tip')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":689,"value":"vegaEmbed = require(\"vega-embed@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":692,"value":"import { vz } from '@gjmcn/vizsla-and-vega-lite'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":60,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":79,"value":"getPitchCircles = {\n const circles = [];\n // center circle\n circles.push({cx: pitchWidth/2, cy: pitchHeight/2, r: 9.15, color: 'none'});\n // left penalty spot\n circles.push({cx: 11, cy: pitchHeight/2, r: 0.3, color: lineColor});\n // right penalty spot\n circles.push({cx: pitchWidth - 11, cy: pitchHeight/2, r: 0.3, color: lineColor});\n // kick-off circle\n circles.push({cx: pitchWidth/2, cy: pitchHeight/2, r: 0.3, color: lineColor});\n return circles;\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":402,"value":"getPitchCircles2 = {\n const circles = [];\n // center circle\n circles.push({cx: pitchWidth/2, cy: pitchHeight/2, r: 9.15, color: 'none'});\n // // left penalty spot\n // circles.push({cx: 11, cy: pitchHeight/2, r: 0.3, color: lineColor});\n // // right penalty spot\n // circles.push({cx: pitchWidth - 11, cy: pitchHeight/2, r: 0.3, color: lineColor});\n // // kick-off circle\n circles.push({cx: pitchWidth/2, cy: pitchHeight/2, r: 0.3, color: lineColor});\n return circles;\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":86,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":35,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":326,"value":"md`Pitch dimensions are 105x68 but can be easily changed.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":708,"value":"// goal_vs_time_data = d3.csv(\"https://gist.githubusercontent.com/cheung927/bee0838a281f5bb97a9ee220c1c099c6/raw/92f690b03b5aa886bc96c4887bb2d4ec0257df06/goal_vs_time_array.csv\")\n//Not use","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":991,"value":"a = d3.csv('https://gist.githubusercontent.com/whtsead213/9e84c3e9194427641d937ea24bb8b253/raw/9449fb763e0e55a5c5595c95b9eb913f7fc63391/merged_event.csv', d => {return {\"play_id\": d.player_id, \"x\": d.x, \"y\": d.y, \"to_x\": d.to_x, \"to_y\": d.to_y, \"type\": d.type, \"outcome\": d.outcome, \"side\": d.side, \"match_name\": d.match_name}})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":994,"value":"f1 = function (a) {\n var output = [];\n a.forEach(function (d) {\n if (output.indexOf(d.match_name) === -1) {\n output.push(d.match_name);\n }\n });\n return output;\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":996,"value":"data1 = f1(a)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":998,"value":"f2 = function(match_name){\n var output = [];\n \n match_name.forEach(function (d) {\n if (output.indexOf(d) === -1) {\n output.push({\"match_name\": d, children: []});\n }\n });\n return output;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1000,"value":"data2 = f2(data1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1002,"value":"f3 = function(output, a){ \n for(var i=0; i`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":344,"value":"UsaVsPortugal731796 = d3.csv('https://gist.githubusercontent.com/cheung927/4b7bf42c0aee3b26c6594471398bc912/raw/69be9047f80438e5eaaa1cf01997c43a1bab8228/usa-vs-portugal-731796.csv')\n// for testing purpose, one match in World Cup 2014","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":446,"value":"events_merged_all = d3.csv('https://gist.githubusercontent.com/cheung927/4dfd25af0cfefe2886902902817f5a92/raw/a186a02a5834a84190e12624a5d0a4a94f77f9d7/events_merge_all.csv')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":493,"value":"//function for finding the distance\nfunction finddistance (x1,x2,y1,y2){\n return Math.pow(Math.pow((x2-x1),2)+Math.pow((y2-y1),2),0.5)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":512,"value":"r = finddistance(92.5,52.2,100,39.4)\n//example","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":924,"value":"md` ### Calculate goal activities`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":570,"value":"{\n let total_goal = 0\n let total_miss = 0\n let total_post = 0\n let total_saved = 0\n for (let i = 0; i < events_merged_all.length; i++){\n if (events_merged_all[i].type === '16')\n total_goal += 1\n else if (events_merged_all[i].type === '13')\n total_miss += 1\n else if (events_merged_all[i].type === '14')\n total_post += 1\n else if (events_merged_all[i].type === '15')\n total_saved += 1\n }\n return [total_miss, total_post, total_saved, total_goal]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":616,"value":"function get_distance_array(r) {\n let goala = ({\n time: [],\n distance: []\n})\n for (let i = 0; i < events_merged_all.length; i++)\n if (events_merged_all[i].type === r){\n goala.time.push(events_merged_all[i].min)\n goala.distance.push(finddistance(events_merged_all[i].x,events_merged_all[i].to_x,events_merged_all[i].y,events_merged_all[i].to_y))\n }\n return goala\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":624,"value":"goal_array = get_distance_array(\"16\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":643,"value":"miss_array = get_distance_array(\"13\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":651,"value":"post_array = get_distance_array(\"14\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":649,"value":"saved_array = get_distance_array(\"15\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":587,"value":"total_miss = 677","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":590,"value":"total_post = 23","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":592,"value":"total_saved = 836","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":575,"value":"total_goal = 171","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":495,"value":"// {\n// for (let i = 0; i < events_merged_all.length; i++){\n// if (events_merged_all[i].type === '13'||events_merged_all[i].type === '14' || events_merged_all[i].type === '15'||events_merged_all[i].type === '16'){\n// events_merged_all[i].field_pass = finddistance(events_merged_all[i].x,events_merged_all[i].to_x,events_merged_all[i].y,events_merged_all[i].to_y) \n// }\n// }\n// } --------not use----------","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":478,"value":"{\n for (let i = 0; i < events_merged_all.length; i++){\n if (events_merged_all[i].side === 'A' && (events_merged_all[i].type === '13'||events_merged_all[i].type === '14' || events_merged_all[i].type === '15'||events_merged_all[i].type === '16')){\n events_merged_all[i].x = 100 - events_merged_all[i].x\n events_merged_all[i].to_x = 100 - events_merged_all[i].to_x\n }\n }//convert the away team data to the left \n return events_merged_all\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":547,"value":"function typeconvert (x){\n if (x === \"1\") return \"Pass\"\n if (x === \"13\") return \"Miss\"\n if (x === \"14\") return \"Post\"\n if (x === \"15\") return \"Saved\"\n if (x === \"16\") return \"Goal\"\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":354,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":855,"value":"md`## Total miss and total goal in World Cup 2014`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":458,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":853,"value":"md`## Total Saved and total goal in World Cup 2014`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":544,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":595,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":850,"value":"md`## Comparing goal activities' distanace to the goal along with the time`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":719,"value":"vegaEmbed({\n data: { values: goal_vs_time_data2 },\n width: 800,\n height: 600,\n title: 'Goal vs time',\n mark: 'point',\n encoding: {\n x: { field: 'time' },\n y: { field: 'distance' },\n color: { field: 'type' }\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":848,"value":"md`## Total amount of goal activities in 2014 World Cup`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":786,"value":"chart8 = {\n \n var data=[\n {x:\"total_miss\", y:total_miss},\n {x:\"total_post\", y:total_post},\n {x:\"total_saved\", y:total_saved},\n {x:\"total_goal\", y:total_goal},\n];\n const height = 600\n const svg = d3.select(DOM.svg(width, height))\n \n const margin = { left: 30, top: 10, right: 10, bottom: 20 }\n \nconst xScale = d3.scaleBand()\n .range([0, width])\n .domain(data.map((s) => s.x))\n .padding(0.5)\n \n svg.append('g')\n .call(d3.axisBottom(xScale))\n .attr('transform', `translate(0,${height - margin.bottom})`)\n \n const yScale = d3.scaleLinear()\n .range([height - margin.bottom, margin.top])\n .domain([0,1000])\n \n svg.append('g')\n .call(d3.axisLeft(yScale))\n .attr('transform', `translate(${margin.left},0)`)\n\nsvg.selectAll('rect')\n .data(data)\n .enter()\n .append('rect')\n .attr('x', d => xScale(d.x))\n .attr('y', d => yScale(d.y))\n .attr('height', d => yScale(0) - yScale(d.y))\n .attr('width', 100)\n .attr('fill', 'SteelBlue')\n \n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":890,"value":"md`## Total goal activities in World Cup 2014`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":871,"value":"// Total goal activities in World Cup 2014\nvchart1 = vegaEmbed({\n data: {\nvalues: [\n {\"Activity\": \"total miss\",\"Number\": total_miss}, \n {\"Activity\": \"total post\",\"Number\": total_post}, \n {\"Activity\": \"total saved\",\"Number\": total_saved},\n {\"Activity\": \"total goal\",\"Number\": total_goal},\n ]\n },\n encoding: {\n y: {\"field\": \"Activity\", \"type\": \"ordinal\"},\n x: {\"field\": \"Number\", \"type\": \"quantitative\"}\n },\n layer: [{\n mark: \"bar\"\n }, {\n mark: {\n type: \"text\",\n align: \"left\",\n baseline: \"middle\",\n dx: 3\n },\n encoding: {\n text: {\"field\": \"Number\", \"type\": \"quantitative\"}\n }\n }]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":922,"value":"md`## Precentage of goal activities in World Cup 2014`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":886,"value":"vchart2 = vegaEmbed({\n data: {\nvalues: [\n {\"Activity\": \"total miss\",\"Number\": total_miss}, \n {\"Activity\": \"total post\",\"Number\": total_post}, \n {\"Activity\": \"total saved\",\"Number\": total_saved},\n {\"Activity\": \"total goal\",\"Number\": total_goal},\n ]\n },\n transform: [{\n window: [{\n op: \"sum\",\n field: \"Number\",\n as: \"TotalNumber\"\n }],\n frame: [null, null]\n },\n {\n calculate: \"datum.Number/datum.TotalNumber * 100\",\n as: \"PercentOfTotal\"\n }],\n mark: \"bar\",\n encoding: {\n x: {\n field: \"PercentOfTotal\",\n type: \"quantitative\",\n axis: {\n title: \"% of total Time\"\n }\n },\n y: {\n field: \"Activity\",\n type: \"ordinal\",\n scale: {\n rangeStep: 12\n }\n }\n }\n})\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":964,"value":"import {select} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1154,"value":"WorldCup2014Players = d3.csv('https://gist.githubusercontent.com/wingchu/c44283c2975cbdd32ef65454052d5e56/raw/d2b321163bf98dc50916147e0f121d1475f92243/player.csv', d => {return {\"id\": d.id, \"name\": d.name}})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":953,"value":" viewof selected_match = select({\n title: 'Pick a match:',\n options: data1,\n value: data1\n});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1116,"value":"followByMatch = function(d, m){\n var list = [];\n for(var i=0; i`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1070,"value":"md`### ${teamsplit[0]} : Blue (Home Team) | ${teamsplit[2]} : Pink (Away Team)`\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":941,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1087,"value":"md`### Using vegaEmbed to show Pass Event coordinate`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1104,"value":"md`### ${teamsplit[0]} : Gold (Home Team) | ${teamsplit[2]} : Blue (Away Team)`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1072,"value":"vegaEmbed({\n data: { values: data_matched },\n width: 840,\n height: 544,\n title: 'Pass Events happened place ',\n mark: 'point',\n encoding: {\n x: { field: 'x' },\n y: { field: 'y' },\n color: { field: 'side' }\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1210,"value":"md`## player pass activities in the match`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1208,"value":"md`### player name: ${selected_player} | Match: ${selected_match}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1180,"value":"$39","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W3a","stdlib":"1","titling":"auto"}} 30:"$2f:body"