PitchMapping

100%

✓ Published0🌍 Public

Last edited Sep 13, 2018

Created on Sep 13, 2018

The visualization maps a soccer pitch using an SVG overlay on a fixed background image of a field, loaded from an external URL via CSS. The code renders a single text element that prompts editing, positioned at the top of the 600-by-392-pixel canvas. It relies on D3 v4’s `d3.select` and `append` methods to construct the SVG structure. The pitch background is applied through SVG CSS properties, while the text uses monospace styling. The example demonstrates a static, annotated field diagram rather than dynamic data, with the source being the background image itself.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Pitch

An SVG rendering of a soccer pitch, drawn to scale with D3.js v5, displays the field’s markings including the halfway circle, corner arcs, goal areas, six-yard boxes, and penalty spots. The visualization uses D3’s `arc` generator to create the curved elements and `line` and `rect` primitives for straight lines and the field base. A green rectangle represents the playing surface, with white markings for official dimensions and black strokes for the goals. The code demonstrates a static, non-interactive layout built with SVG attributes and D3 selections.

MMihir Sawant

85% match

Loading thumbnail…

Pitch

This example draws a soccer pitch using D3.js version 5, with SVG rendering. It constructs the field markings—including the halfway circle, corner arcs, penalty area, and six-yard box—by combining D3’s `arc()` generator for curved paths and appended `rect` and `line` elements for straight boundaries. The layout uses hardcoded dimensions scaled by a factor of six, and all shapes are filled with white strokes atop a green background, creating a static, schematic visualization.

MMihir Sawant

83% match

Loading thumbnail…

drawpitch

This visualization displays the locations and outcomes of soccer shots during matches, plotted on a scaled pitch. Each shot is represented by a circle, with the x and y coordinates mapped from the CSV data onto the field. The size of each circle encodes the expected goal (xG) value, while color distinguishes whether the shot resulted in a goal or not. Hovering or interacting with the circles reveals player names, teams, and shot details. The SVG rendering uses D3 v4 to draw the pitch outline and position the shots, providing a clear spatial overview of shot distribution and quality across teams.

TTollyCoburn

82% match

Loading thumbnail…

Football Pitch

This interactive tactics board displays a Premier League regulation-size soccer pitch with player markers positioned for a match. The visualization uses an SVG rendered through D3.js, with a green grass background, white pitch markings, and draggable elements loaded from a tab-separated dataset containing player coordinates and team assignments. The code constructs the pitch geometry using D3’s `append` and `attr` methods to draw rectangles, circles, and lines, while player positions come from the provided dots.txt file with team colors mapped via the kits.txt data.

SSaminu

80% match

Loading thumbnail…

mod Pitch4

This visualization displays football (soccer) shot data from a JSON dataset, plotting each shot's starting location and trajectory on a scaled pitch. Users can filter shots by team via a color legend or by time range using a dual-handle slider. Clicking a shot reveals player and shot details in a stats box, and a freeze-frame of player positions at the shot's moment can be shown. The visualization is built with D3 v5, using SVG elements, a custom slider with `d3.drag`, and arrow markers to indicate shot direction.

MMihir Sawant

76% match

Loading thumbnail…

Something a bit more visually appealing

This example draws a static sports field visualization using D3 v3, rendering a green pitch with a white left section, a center circle, and a right-side penalty box as SVG rectangles and circles. It loads point data from a local `dots.txt` file, but the code does not yet bind that data to the SVG elements—instead, all shapes are positioned manually with fixed `attr` values. The visualization uses basic D3 selection and append methods, along with SVG styling, to construct the scene without any interactive or animated behavior.

VVanBantam

75% match

Loading thumbnail…

mod Pitch2

The visualization shows shot locations and arrow trajectories for the 2018 FIFA World Cup final between France and Croatia on a scaled soccer pitch. Clicking a shot reveals its freeze-frame player positions. A slider filters shots by match minute, and clicking the legend toggles team visibility. Built with D3 v5, it uses SVG rendering, custom modules for pitch drawing and shot plotting, and drag interactions to filter data.

MMihir Sawant

73% match

Loading thumbnail…

Shotplot

This interactive SVG visualization plots every shot taken by a single soccer player across a season, with each shot positioned on a pitch diagram and colored by outcome (goal, blocked, off target, etc.). Hovering over a shot reveals a tooltip with the opponent, match minute, and home/away status. The visualization uses D3.js version 3.5 to draw the pitch, render the shot data points, and handle the d3-tip tooltips, with the data displayed in a static text file.

SSaintat1

72% match