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})`)
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);
//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();
}