d3-soccer

KO | EN

gitlite — search

#nodejs #python #java #library #rust #golang #react #redux #atom #php #build #docker

★ 75 Open GitHub ↗

📊⚽️ A D3 plugin for visualizing event stream soccer data.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# d3-soccer

A D3 plugin for visualizing event stream soccer data.

## Installing

If you use NPM, `npm install d3-soccer`. Otherwise, download the [latest release](https://github.com/probberechts/d3-soccer/releases/latest). AMD, CommonJS, and vanilla environments are supported. In vanilla, a d3 global is exported:

```html
<link rel='stylesheet' href='https://unpkg.com/d3-soccer@0.2.0/dist/d3-soccer.css' />
<script src="https://d3js.org/d3.v5.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/d3-soccer@0.2.0/dist/d3-soccer.js"></script>
<script type="text/javascript">
var pitch = d3.pitch();
var svg = d3.select("#chart").call(pitch);
</script>
```

## Examples

An introduction to the features and basic usage of d3-soccer can found in [this notebook](https://observablehq.com/@probberechts/d3-soccer). For additional examples, see the [examples folder in this repo](example) or [this collection of notebooks](https://observablehq.com/collection/@probberechts/d3-soccer).

## API Reference

<a name="pitch" href="#pitch">#</a> d3.pitch()

Creates a new pitch generator with the default configuration values. The pitch contains two layers (`#below` and `#above`) which can be used to plot additional markers respectively below and above the pitch markers. The origin is located in the top-left corner of the pitch and the default dimensions are (105, 68).

<a name="_pitch" href="#_pitch">#</a> pitch(context)

Render the pitch to the given *context*, which may be either a [selection](https://github.com/d3/d3-selection) of containers (either HTML, SVG or G elements) or a corresponding [transition](https://github.com/d3/d3-transition).

<a name="pitch_height" href="#pitch_height">#</a> pitch.height([height])

If a _height_ is specified, it sets the height of the corresponding SVG element and computes the adequate width. If _height_ is not specified, returns the current height, which defaults to 300 px.

<a name="pitch_width" href="#pitch_width">#</a> pitch.width()

Returns the current width of the SVG element.

<a name="pitch_rotate" href="#pitch_rotate">#</a> pitch.rotate([bool])

If _bool_ is specified and set to `true`, rotate the plot by 90 degrees. If _bool_ is not specified, returns the current setting, which defaults to false.

<a name="pitch_showDirOfPlay" href="#pitch_showDirOfPlay">#</a> pitch.showDirOfPlay([bool])

If _bool_ is specified and set to `true`, shows an arrow on the plot from left to right to indicate the direction of play. If _bool_ is not specified, returns the current setting, which defaults to false.

<a name="pitch_shadeMiddleThird" href="#pitch_shadeMiddleThird">#</a> pitch.shadeMiddleThird([bool])

If _bool_ is specified and set to `true`, the middle third of the pitch is shaded. If _bool_ is not specified, returns the current setting, which defaults to false.

<a name="pitch_goals" href="#pitch_goals">#</a> pitch.goals([goals])

The standard goal markings can be customized by supplying a function to the _goals_ argument. Additionally, the _goals_ argument supports the strings "line" and "box", which correspond to line-style and box-style goal markings. 
If _goals_ is not specified, returns the current setting, which defaults to line-style markings.

<a name="pitch_clip" href="#pitch_clip">#</a> pitch.clip([clip])

If _clip_ is specified, sets the clipping rectangle and computes the adequate [_width_](#pitch_width). _clip_ is specified as a pair of 2D coordinates \[x, y\]. If _clip_ is not specified, returns the current clipping rectangle, which defaults to: `[[0, 0], [105, 68]]`

<a name="pitch_pitchStrokeWidth" href="#pitch_pitchStrokeWidth">#</a> pitch.pitchStrokeWidth([width])

If _width_ is specified, it sets the stroke width of the pitch markers. If _width_ is not specified, returns the current stroke width, which defaults to 0.5 px.

<hr>

<a name="heatmap" href="#heatmap">#</a> d3.heatmap(pitch)

Creates a new heatmap generator with the default configuration values and the specified [pitch](#pitch) configuration.

<a name="_heatmap" href="#_heatmap">#</a> heatmap(context)

Render the heatmap to the given *context*, which may be either a [selection](https://github.com/d3/d3-selection) of containers (either HTML, SVG or G elements) or a corresponding [transition](https://github.com/d3/d3-transition). Reads the data for the heatmap from the datum property on the container. This data should be in the following format:

```
[
  {
    height: 0.99,  // height of the cell
    width: 0.99,   // width of the cell
    x: 4.95,       // x-position of the cell
    y: 54.20,      // y-position of the cell
    i: 5,          // x-index of the cell
    j: 55,         // y-index of the cell
    value: 0       // value of the cell
  },
  ...
]
```

D3 soccer provides two layouts to convert data to this format: <a href="#grid">d3.grid()</a> and <a href="#rectbin">d3.rectbin()</a> .

<a name="heatmap_colorScale" href="#heatmap_colorScale">#</a> heatmap.colorScale([scale])

If _scale_ is specified, sets the color scale, which should be an instance of [d3-scale](https://github.com/d3/d3-scale). If _scale_ is not specified, returns the current color scale, which defaults to `d3.scaleSequential(d3.interpolateGreens)`.

<a name="heatmap_enableInteraction" href="#heatmap_enableInteraction">#</a> heatmap.enableInteraction([enable])

If _enable_ is set to true, a border will be drawn around a cell of the heatmap when hovered. Additional actions can be assigned trough [onSelect](#heatmap_onSelect) and [onDeselect](#heatmap_onDeselect). If not set, returns the current configuration. Interaction is disabled by default.

<a name="heatmap_interpolate" href="#heatmap_interpolate">#</a> heatmap.interpolate([interpolate])

If _interpolate_ is set to true, the heatmap will be interpolated using bicubic interpolation. If not set, returns the current configuration, which defaults to false.

<a name="heatmap_selected" href="#heatmap_selected">#</a> heatmap.selected([cell])

If _cell_ is specified, sets the selected cell. _cell_ should be specified as 2D coordinates \[x, y\], where (0,0) corresponds to the top left corner cell. If _cell_ is not specified, returns the current selection. Returns `[undefined, undefined]` if no cell is selected, which is the default.

<a name="heatmap_onSelect" href="#heatmap_onSelect">#</a> heatmap.onSelect([f])

If _f_ is specified, hovering over a cell will trigger execution of _f(x, y, v)_, where _x_ and _y_ are the coordinates of the selected cell and _v_ the cell value.

<a name="heatmap_onDeselect" href="#heatmap_onDeselect">#</a> heatmap.onDeselect([f])

If _f_ is specified, stopping hovering over a cell will trigger execution of _f()_.

<a name="heatmap_showValues" href="#heatmap_showValues">#</a> heatmap.showValues([show])

If _show_ is set to true, the value of each cell will we displayed. If not set, returns the default configuration, which defaults to false.

<a name="heatmap_valueFormatter" href="#heatmap_valueFormatter">#</a> heatmap.heatmap_valueFormatter([f])

If _f_ is specified, the cell values will be formatted as a string using _f(v)_, where _v_ is the cell value.

<a name="heatmap_valueFontSize" href="#heatmap_valueFontSize">#</a> heatmap.heatmap_valueFontSize([f])

If _f_ is specified, the font size of a cell value will be set using _f(h, w, v)_, where _h_ and _w_ are the height and width of the cell and _v_ the cell value. Defaults to 20% of the cell height.

<hr>

<a name="actions" href="#actions">#</a> d3.actions(pitch)

Creates a new generator for plotting soccer actions in the [SPADL format](https://github.com/ML-KULeuven/socceraction) with the default configuration values and the specified [pitch](#pitch) configuration.

<a name="_actions" href="#_actions">#</a> actions(context)

Render the actions to the given *context*, which may be either a [selection](https://github.com/d3/d3-selection) of containers (either HTML, SVG or G elements) or a corresponding [transition](https://github.com/d3/d3-transition). Reads the data for the actions from the datum property on the container.

<a name="actions_showTooltip" href="#actions_showTooltip">#</a> actions.showTooltip([show])

If _show_ is set to an instance of [actionTooltip](#actionTooltip), will show a tooltip upon hovering an action. If not specified, will return a reference to the current tooltip or false if no tooltip is attached. Defaults to false.

<a name="actions_scale" href="#actions_scale">#</a> actions.scale([scale])

If _scale_ is specified, will set the scale of the action markers. If not specified, will return the current scale, which defaults to 4.

<a name="actions_teamColors" href="#actions_teamColors">#</a> actions.teamColors([colors])

If _colors_ is specified, will set the colors used for the markers of both teams. Excepts a mapping between team ID and a color hex code, for example `{782:"#EF3340", 781:"#FDB913"}`. If _colors_ is not specified, returns the current mapping between teams and colors, which defaults to `{0: "#FDB913", 1: "#87CEEB"}`.

<a name="actions_draggable" href="#actions_draggable">#</a> actions.draggable([draggable])

If _draggable_ is set to true, will enable dragging the action markers around and trigger [onUpdate](#actions_onUpdate). If not specified, returns the current setting which defaults to false.

<a name="actions_onUpdate" href="#actions_onUpdate">#</a> actions.onUpdate([f])

If _f_ is specified, dragging an action's marker will trigger execution of _f(data)_, where _data_ are the updated actions.

<hr>

<a name="actionsTable" href="#actionsTable">#</a> d3.actionsTable()

<a name="_actionsTable" href="#_actionsTable">#</a> actionsTable(context)

<a name="actionsTable_tableColumns" href="#actionsTable_tableColumns">#</a> actionsTable.tableColumns([columns])

<a name="actionsTable_scale" href="#actionsTable_scale">#</a> actionsTable.scale([scale])

<a name="actionsTable_teamColors" href="#actionsTable_teamColors">#</a> actionsTable.teamColors([colors])

<hr>

<a name="actionTooltip" href="#actionTooltip">#</a> d3.actionTooltip()

<a name="_actionTooltip" href="#_actionTooltip">#</a> actionTooltip(context)

<a name="actionTooltip_show" href="#actionTooltip_show">#</a> actionTooltip.show([data])

<a name="actionTooltip_hide" href="#actionTooltip_hide">#</a> actionTooltip.hide()

<hr>

<a name="scoreline" href="#scoreline">#</a> d3.scoreline()

<a name="_scoreline" href="#_scoreline">#</a> scoreline(context)

<a name="scoreline_height" href="#scoreline_height">#</a> scoreline.height([height])

<a name="scoreline_teams" href="#scoreline_teams">#</a> scoreline.teams([teams])

<a name="scoreline_score" href="#scoreline_score">#</a> scoreline.score([score])

<a name="scoreline_clock" href="#scoreline_clock">#</a> scoreline.clock([clock])

<hr>

<a name="grid" href="#grid">#</a> d3.grid()

Constructs a new default grid layout, which can be used to generate data for the heatmap.

<a name="_grid" href="#_grid">#</a> grid(values)

Evaluates the grid layout on the specified 2d array of *values*, returning a 1d array corresponding to the data format required by the <a href="#heatmap">heatmap</a>.

<hr>

<a name="rectbin" href="#rectbin">#</a> d3.rectbin()

Constructs a new default rectbin layout, which can be used to generate data for the heatmap.

<a name="rectbin" href="#_rectbin">#</a> rectbin(points)

Evaluates the rectbin layout on the specified array of *points*, returning an array of rectangular *bins*. Each bin is an array containing the bin’s points, as well as some additional properties which are required by the <a href="#heatmap">heatmap</a>.

Bins that are empty are not omitted. The origin bin at ⟨0,0⟩ is in the top-left.

<a name="x" href="#x">#</a> rectbin.x([accessor])

If *accessor* is specified, sets the *x*-accessor function and returns the rectbin layout; if *accessor* is not specified, returns the current *x*-accessor function, which defaults to `function(d) { return d[0]; }`.

<a name="y" href="#y">#</a> rectbin.y([accessor])

If *accessor* is specified, sets the *y*-accessor function and returns the rectbin layout; if *accessor* is not specified, returns the current *y*-accessor function, which defaults to `function(d) { return d[1]; }`.

<a href="dx" href="#dx">#</a> rectbin.dx([dx])

If *dx* is specified, sets the horizontal bin size to the specified value. If *dx* is not specified, returns the current value, which defaults to 0.1.

<a href="dy" href="#dy">#</a> rectbin.dy([dy])

If *dy* is specified, sets the vertical bin size to the specified value. If *dy* is not specified, returns the current value, which defaults to 0.1.

d3-soccer

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README