30:T440,parameters = ({ lines_width: 0.12, circular_marks_radius: 0.3, touch_lines_length: 105, goal_lines_length: 68, goal_nets_depth: 2.44, fixed: { unit: 'm', field_color: 'green', posts_color: 'white', crossbar_color: 'white', lines_width_max: 0.12, touch_lines_length_uefa: 105, touch_lines_length_min: 90, touch_lines_length_max: 120, touch_lines_length_international_min: 100, touch_lines_length_international_max: 110, goal_lines_length_uefa: 68, goal_lines_length_min: 45, goal_lines_length_max: 90, goal_lines_length_international_min: 64, goal_lines_length_international_max: 75, center_circle_radius: 9.15, goal_between_posts: 7.32, goal_ground_to_crossbar: 2.44, goal_posts_width_max: 0.12, goal_area_inner_post_to_side_line: 5.5, goal_area_to_line_inside_field: 5.5, penalty_area_inner_post_to_side_line: 16.5, penalty_area_to_line_inside_field: 16.5, penalty_mark: 11, penalty_mark_arc_radius: 9.15, corner_area_radius: 1, corner_flagpost_height_max: 1.5 } })31:T22b9,function pitch({ size = 960, parameters: params = parameters } = {}) { const parameters = params; const dimX = parameters.touch_lines_length; const dimY = parameters.goal_lines_length; const scale = v => v * (size / dimX), x = scale, y = scale, XX0 = x(-dimX / 2), XX1 = x(0), XX2 = x(dimX / 2), YY0 = y(-dimY / 2), YY1 = y(0), YY2 = y(+dimY / 2), radius = x(parameters.fixed.center_circle_radius) - x(0), penaltyAreaX = x(parameters.fixed.penalty_area_to_line_inside_field) - x(0), penaltyAreaY = y( parameters.fixed.penalty_area_inner_post_to_side_line + parameters.fixed.goal_between_posts / 2 ) - y(0), goalAreaX = x(parameters.fixed.goal_area_to_line_inside_field) - x(0), goalAreaY = y( parameters.fixed.goal_area_inner_post_to_side_line + parameters.fixed.goal_between_posts / 2 ) - y(0), goalW = y(parameters.fixed.goal_between_posts / 2) - y(0), goalD = x(parameters.goal_nets_depth) - x(0), penalty = x(parameters.fixed.penalty_mark) - x(0), lineW = x(parameters.lines_width) - x(0), pointR = x(parameters.circular_marks_radius) - x(0), cornerR = x(parameters.fixed.corner_area_radius) - x(0), penaltyToAreaXExt = penaltyAreaX - penalty, penaltyToAreaAngle = Math.acos(penaltyToAreaXExt / radius), penaltyToAreaYExt = Math.sin(penaltyToAreaAngle) * radius, penaltyToAreaXInt = Math.cos(penaltyToAreaAngle) * (radius - lineW), penaltyToAreaYInt = Math.sin(penaltyToAreaAngle) * (radius - lineW); const straightLine = function(x0, x1, y0, y1) { // we could use .rect() instead return context => { context.moveTo(x0, y0); context.lineTo(x1, y0); context.lineTo(x1, y1); context.lineTo(x0, y1); context.closePath(); return context; }; }; return { paths: [ // touchlines straightLine(XX0, XX2, YY0, YY0 + lineW), straightLine(XX0, XX2, YY2, YY2 - lineW), // goal lines straightLine(XX0, XX0 + lineW, YY0, YY2), straightLine(XX2, XX2 - lineW, YY0, YY2), // center line straightLine(XX1 - lineW / 2, XX1 + lineW / 2, YY0, YY2), // left penalty area straightLine( XX0, XX0 + penaltyAreaX, YY1 + penaltyAreaY, YY1 + penaltyAreaY - lineW ), straightLine( XX0, XX0 + penaltyAreaX, YY1 - penaltyAreaY, YY1 - penaltyAreaY + lineW ), straightLine( XX0 + penaltyAreaX, XX0 + penaltyAreaX - lineW, YY1 - penaltyAreaY, YY1 + penaltyAreaY ), // right penalty area straightLine( XX2, XX2 - penaltyAreaX, YY1 + penaltyAreaY, YY1 + penaltyAreaY - lineW ), straightLine( XX2, XX2 - penaltyAreaX, YY1 - penaltyAreaY, YY1 - penaltyAreaY + lineW ), straightLine( XX2 - penaltyAreaX, XX2 - penaltyAreaX + lineW, YY1 - penaltyAreaY, YY1 + penaltyAreaY ), // left goal area straightLine( XX0, XX0 + goalAreaX, YY1 + goalAreaY, YY1 + goalAreaY - lineW ), straightLine( XX0, XX0 + goalAreaX, YY1 - goalAreaY, YY1 - goalAreaY + lineW ), straightLine( XX0 + goalAreaX, XX0 + goalAreaX - lineW, YY1 - goalAreaY, YY1 + goalAreaY ), // right goal area straightLine( XX2, XX2 - goalAreaX, YY1 + goalAreaY, YY1 + goalAreaY - lineW ), straightLine( XX2, XX2 - goalAreaX, YY1 - goalAreaY, YY1 - goalAreaY + lineW ), straightLine( XX2 - goalAreaX, XX2 - goalAreaX + lineW, YY1 - goalAreaY, YY1 + goalAreaY ), // left goal nets (no official dims for that) straightLine(XX0, XX0 - goalD, YY1 + goalW + lineW, YY1 + goalW), straightLine(XX0, XX0 - goalD, YY1 - goalW - lineW, YY1 - goalW), straightLine( XX0 - goalD, XX0 - goalD + lineW, YY1 + goalW + lineW, YY1 - goalW - lineW ), // right goal nets (no official dims for that) straightLine(XX2, XX2 + goalD, YY1 + goalW + lineW, YY1 + goalW), straightLine(XX2, XX2 + goalD, YY1 - goalW - lineW, YY1 - goalW), straightLine( XX2 + goalD, XX2 + goalD - lineW, YY1 + goalW + lineW, YY1 - goalW - lineW ), // Left penalty point context => { context.moveTo(XX0 + penalty + pointR, YY1); context.arc(XX0 + penalty, YY1, pointR, 0, 2 * Math.PI, false); return context; }, // Left penalty arc context => { context.moveTo( XX0 + penalty + penaltyToAreaXExt, YY1 + penaltyToAreaYExt ); context.arc( XX0 + penalty, YY1, radius, penaltyToAreaAngle, -penaltyToAreaAngle, true ); context.lineTo( XX0 + penalty + penaltyToAreaXInt, YY1 - penaltyToAreaYInt ); context.arc( XX0 + penalty, YY1, radius - lineW, -penaltyToAreaAngle, +penaltyToAreaAngle, false ); context.closePath(); return context; }, // Right penalty point context => { context.moveTo(XX2 - penalty + pointR, YY1); context.arc(XX2 - penalty, YY1, pointR, 0, 2 * Math.PI, false); return context; }, // Right penalty arc context => { context.moveTo( XX2 - penalty - penaltyToAreaXExt, YY1 - penaltyToAreaYExt ); context.arc( XX2 - penalty, YY1, radius, Math.Pi + penaltyToAreaAngle, Math.Pi - penaltyToAreaAngle, false ); context.lineTo( XX2 - penalty - penaltyToAreaXInt, YY1 + penaltyToAreaYInt ); context.arc( XX2 - penalty, YY1, radius - lineW, Math.Pi - penaltyToAreaAngle, Math.Pi + penaltyToAreaAngle, true ); context.closePath(); return context; }, context => { context.moveTo( XX2 - penalty - penaltyToAreaXExt, YY1 - penaltyToAreaYExt ); context.arc( XX2 - penalty, YY1, radius, Math.PI + penaltyToAreaAngle, Math.PI - penaltyToAreaAngle, true ); context.lineTo( XX2 - penalty - penaltyToAreaXInt, YY1 + penaltyToAreaYInt ); context.arc( XX2 - penalty, YY1, radius - lineW, Math.PI - penaltyToAreaAngle, Math.PI + penaltyToAreaAngle, false ); context.closePath(); return context; }, // Midfield point context => { context.moveTo(XX1, YY1); context.arc(XX1, YY1, pointR, 0, 2 * Math.PI, false); return context; }, // Midfield circle context => { context.moveTo(XX1 + radius - lineW, YY1); context.arc(XX1, YY1, radius - lineW, 0, 2 * Math.PI, true); context.lineTo(XX1 + radius, YY1); context.arc(XX1, YY1, radius, 0, 2 * Math.PI, false); context.closePath(); return context; }, // Corners context => { context.moveTo(XX0 + cornerR, YY0); context.arc(XX0, YY0, cornerR, 0, +Math.PI / 2, false); context.lineTo(XX0, YY0 + cornerR - lineW); context.arc(XX0, YY0, cornerR - lineW, +Math.PI / 2, 0, true); context.closePath(); return context; }, context => { context.moveTo(XX2 - cornerR, YY0); context.arc(XX2, YY0, cornerR, Math.PI, Math.PI / 2, true); context.lineTo(XX2, YY0 + cornerR - lineW); context.arc(XX2, YY0, cornerR - lineW, Math.PI / 2, Math.PI, false); context.closePath(); return context; }, context => { context.moveTo(XX2 - cornerR, YY2); context.arc(XX2, YY2, cornerR, Math.PI, -Math.PI / 2, false); context.lineTo(XX2, YY2 - cornerR + lineW); context.arc(XX2, YY2, cornerR - lineW, -Math.PI / 2, Math.PI, true); context.closePath(); return context; }, context => { context.moveTo(XX0, YY2 - cornerR); context.arc(XX0, YY2, cornerR, -Math.PI / 2, 0, false); context.lineTo(XX0 + cornerR - lineW, YY2); context.arc(XX0, YY2, cornerR - lineW, 0, -Math.PI / 2, true); context.closePath(); return context; } // Limits ] }; }32:[{"id":"a09af763d925321732affd7af16ff2b5f3d70511b2957996b1d7fa35d756a8072ed1700d14b648046afbc9ae6c2b18f03867fa42d275d9ab2e7ae10777af0f97","href":"https://static.observableusercontent.com/files/a09af763d925321732affd7af16ff2b5f3d70511b2957996b1d7fa35d756a8072ed1700d14b648046afbc9ae6c2b18f03867fa42d275d9ab2e7ae10777af0f97","name":"football_pitch_dimensions.png","type":"image/png","lastModified":1580413749889.515,"size":76784}] 2e:{"title":"Soccer pitch","cells":[{"id":0,"value":"md`# Soccer pitch\n\nThe soccer pitch dimension and marks are officially described in the [International Football Assocation Board](http://www.theifab.com) in the [1st Law of the Game](http://www.theifab.com/laws/chapter/21/section/16/).\n\n[

](http://www.theifab.com/laws/chapter/21/section/19/)\n\nField size is [not always the same](https://www.marca.com/2014/01/01/en/football/spanish_football/1388600653.html), but there are some standards. For example, [UEFA regulation](https://en.wikipedia.org/wiki/UEFA_stadium_categories) requires all high-level European competitions to take place on soccer pitches of size 105m x 68m, and fields for international matches have min and max dimensions.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1132,"value":"{\n const gutter = 40;\n const w = (width - 2 * gutter) / 3;\n\n const p = (tl, gl, title) => `\n

\n ${svgPitch((w * tl) / parameters.fixed.touch_lines_length_max, {\n ...parameters,\n touch_lines_length: tl,\n goal_lines_length: gl\n })}\n

${title}
`${tl} x ${gl}`

`;\n return html`\n

\n ${p(\n parameters.fixed.touch_lines_length_international_min,\n parameters.fixed.goal_lines_length_international_min,\n \"Smallest allowed (Int'l)\"\n )} \n ${p(\n parameters.fixed.touch_lines_length_uefa,\n parameters.fixed.goal_lines_length_uefa,\n \"Official UEFA size\"\n )} \n ${p(\n parameters.fixed.touch_lines_length_international_max,\n parameters.fixed.goal_lines_length_international_max,\n \"Largest allowed (Int'l)\"\n )} \n

\n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1177,"value":"md`But all the following pitches are also valid for lower-level competitions!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1172,"value":"{\n const gutter = 40;\n const w = (width - 2 * gutter) / 3;\n\n const p = (tl, gl, title) => `\n

\n ${svgPitch((w * tl) / parameters.fixed.touch_lines_length_max, {\n ...parameters,\n touch_lines_length: tl,\n goal_lines_length: gl\n })}\n

${title}
`${tl} x ${gl}`

`;\n return html`\n

\n ${p(\n parameters.fixed.touch_lines_length_min,\n parameters.fixed.goal_lines_length_min,\n 'Smallest pitch'\n )}\n ${p(\n parameters.fixed.touch_lines_length_max,\n parameters.fixed.goal_lines_length_min,\n 'Narrowest pitch'\n )}\n ${p(\n parameters.fixed.touch_lines_length_min,\n parameters.fixed.goal_lines_length_max,\n 'Broadest pitch'\n )} \n ${p(\n parameters.fixed.touch_lines_length_max,\n parameters.fixed.goal_lines_length_max,\n 'Largest pitch'\n )}\n

\n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1157,"value":"md`---\n\n## Credits\n\nDeveloped for the [LIRIS M2i project](https://projet.liris.cnrs.fr/mi2/) by Sylvain Lesage.\n\nBased on code by Philippe Rivière.\n\n---\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":902,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":905,"value":"md`Some rules:\n- the length and width of the field are the only variable parameters (with the width of the painting)\n- measurements are from the outside of the lines as the lines are part of the area they enclose (touchlines, goal lines, penalty area, goal area) are part of the field, and thus their width must be included in the total length.\n\nPosition of players and of the ball are generally given in meters from the center mark, with x being the dimension along the touch line, and y along the goal line. In that coordinates system (and using the standard dimensions):\n- center mark: (0, 0)\n- left goal line: (-52.5, -34) to (-52.5, 34)\n- right goal line: (52.5, -34) to (52.5, 34)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"md`## Setup`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1198,"value":"pitch()","pinned":true,"hidden":false,"mode":"ojs"},{"id":251,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"d3 = require(\"d3@5\", \"d3-array@2\", \"d3-delaunay@5.1.2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":380,"value":"md`Use [d3.path](https://observablehq.com/@d3/d3-path) to use the soccer field’s shapes with SVG:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"svgPitch = (width, parameters) => {\n const margin = width * 0.05,\n height =\n ((width - 2 * margin) * parameters.goal_lines_length) /\n parameters.touch_lines_length +\n 2 * margin;\n\n const p = pitch({ size: width - 2 * margin, parameters });\n return ``;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}

${title}${tl} x ${gl}

${title}${tl} x ${gl}

${title}
`${tl} x ${gl}`

${title}
`${tl} x ${gl}`