Skip to main content
100%

Something a bit more visually appealing

✓ Published0🌍 Public
VVanBantam
Last edited Mar 3, 2017
Created on Mar 3, 2017

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.

AI-generated description

Ok here's the deal... use it. Just use it. If you make some really cool changes then you have to let me know. This is the liscence for using this code: if you use it to do something cool you have to let me know so I can see it and learn more and give you your high five.

Otherwise enjoy!

BTW this still isn't getting at what I really want which is have several SVG elements and then positioning using d3. I'm sure one day I'll learn how to do that.

Cheers!

Jean Claude VanBantam

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/5fb38fc64ea7bfcbf61197d94f990723'>fresh block</a>

forked from <a href='http://bl.ocks.org/mscbuck/'>mscbuck</a>'s block: <a href='http://bl.ocks.org/mscbuck/36bf7733d9402cfa641a47ba4cf44bab'>fresh block</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
80% 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…

PitchMapping

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.

TTollyCoburn
75% 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
73% match
Loading thumbnail…

Some fun with SVG

A static SVG scene demonstrates primitive shapes without data binding. A blue outlined circle, a thick blue diagonal line, and a navy rectangle are positioned explicitly on a 1024x768 canvas. The page also uses the D3 v7 `select` API to insert the text "Hello D3@7" into the body. This example highlights hand-coded SVG markup rather than programmatic generation, with all geometry defined in the HTML file.

GGiuseppe
72% match
Loading thumbnail…

circles in D3

This example displays a static collection of thirteen colored circles scattered across a 600-by-400 SVG canvas, with varying radii, positions, and fills in blue, orange, and purple. The visualization uses no D3 or JavaScript logic, relying solely on hand-coded SVG elements inside an HTML document, with each circle defined by explicit `cx`, `cy`, `r`, and `fill` attributes. The rendering approach is direct SVG markup, and the code includes no data binding, interaction, or transitions.

Ee.rossi100@campus.unimib.it
72% match
Loading thumbnail…

circles in D3

This example displays a static collection of thirteen colored circles scattered across a 600-by-400 SVG canvas, with varying radii, positions, and fills in blue, orange, and purple. The visualization uses no D3 or JavaScript logic, relying solely on hand-coded SVG elements inside an HTML document, with each circle defined by explicit `cx`, `cy`, `r`, and `fill` attributes. The rendering approach is direct SVG markup, and the code includes no data binding, interaction, or transitions.

Ee.rossi100@campus.unimib.it
72% match
Loading thumbnail…

circles in D3

This example displays a static collection of thirteen colored circles scattered across a 600-by-400 SVG canvas, with varying radii, positions, and fills in blue, orange, and purple. The visualization uses no D3 or JavaScript logic, relying solely on hand-coded SVG elements inside an HTML document, with each circle defined by explicit `cx`, `cy`, `r`, and `fill` attributes. The rendering approach is direct SVG markup, and the code includes no data binding, interaction, or transitions.

Ee.rossi100@campus.unimib.it
72% match