Skip to main content
SimilarExport ZIP
100%

Football Pitch

✓ Published0🌍 Public
SSaminu
Last edited Mar 20, 2017
Created on Mar 20, 2017

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.

AI-generated description

Built with blockbuilder.org

A draggable tactics board for soccer (Think Andy Townsend circa late 1990s).

forked from <a href='http://bl.ocks.org/jalapic/'>jalapic</a>'s block: <a href='http://bl.ocks.org/jalapic/df90b219b9443e457e0d'>James' tactics board</a>

Changes made:

  1. Football added

  2. Dimensions metricised and changed to the premier league standard 68m x 105m pitch

More info here: http://jalapic.github.io/tacticsboard

forked from <a href='http://bl.ocks.org/balders93/'>balders93</a>'s block: <a href='http://bl.ocks.org/balders93/bc36d0af347f32152e07'>Tactics board with ball</a>

forked from <a href='http://bl.ocks.org/balders93/'>balders93</a>'s block: <a href='http://bl.ocks.org/balders93/98ff5f77b82eea28f47c72e1e256286d'>Football Pitch</a>

forked from <a href='http://bl.ocks.org/mhfcb/'>mhfcb</a>'s block: <a href='http://bl.ocks.org/mhfcb/c9ee040f33a91c97bc1ff5395b4d83f8'>Football Pitch</a>

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
82% 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
79% 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
73% match
Loading thumbnail…

Premier League Interactive

This interactive visualization presents Premier League standings with a focus on league tables and match data. Built with D3 v4, it renders an SVG-based table that displays team statistics such as position, points, goals for/against, and goal difference. Users can click on column headers to dynamically sort the table, triggering smooth transitions that reorder rows. The visualization also includes a league selector, allowing viewers to switch between the English Premier League, La Liga, Serie A, and the Bundesliga, with the table updating accordingly. Hover effects highlight menu items, and the design uses a clean, minimal aesthetic with subtle color scaling for numerical columns.

FFootyNumb3rs
72% match
Loading thumbnail…

Premier League Interactive

Premier League Interactive is an SVG-based data visualization that lets users explore football league standings across multiple competitions, including the Premier League, La Liga, Serie A, and the Bundesliga. Built with D3 v4, it renders sortable league tables from CSV data and animates row transitions when reordering by statistical columns such as points, goals, or goal difference. Hovering over league selectors highlights the menu and swaps datasets with smooth animated transitions, while the minimalist grey interface and custom typography keep the focus on the data.

FFootyNumb3rs
72% match
Loading thumbnail…

Premier League Interactive

This interactive visualization presents football league tables and match data across multiple European leagues, including the Premier League, La Liga, Serie A, and the Bundesliga. Users can switch between leagues via clickable headers, which triggers a smooth D3 v4 transition that reorders table rows by position. The table is rendered as SVG with dynamic highlighting and filtering, while a subtle animation effect repositions teams when sorting by different columns. The visualization is built with D3.js and includes custom styling with Google Fonts, with team crests and match data displayed in an interactive, sortable table format. The color scheme uses a light grey background with black text and interactive elements that highlight on hover.

FFootyNumb3rs
72% match
Loading thumbnail…

Fork of D3 Soccer Starter

This visualization displays every shot taken during a Brazil–Belgium soccer match on a pitch diagram, with markers colored by outcome: green for successful goals, gray for failures, and red for own goals. Lines connect each shot’s start and end coordinates. Built with D3.js and the d3-soccer pitch component, it uses scaleLinear for coordinate mapping and scaleOrdinal for outcome colors. The underlying data includes player names and team information, presented via hover tooltips.

Nnatecoursey-mck
72% match
Loading thumbnail…

Soccer Play-by-Play

This visualization animates soccer play-by-play data from a match between Belgium and Brazil, showing passes and dribbles as moving circles and trailing lines on a pitch. Each action is color-coded by team, with the current action labeled above the field and results like failures or offsides distinguished by color. The animation advances through time using d3.interval, updating the circle position every 800 milliseconds and drawing lines for the five most recent actions. It uses the d3-soccer pitch layout, d3.scaleLinear for coordinates, and d3.transition for smooth movement.

Nnatecoursey-mck
72% match