spreadFactor = match == "Liverpool [2] - 1 Newcastle" ? 5 : 3;
widthA = MZ.length*spreadFactor+marginA.left+marginA.right
heightA = MZ[0].length*50+marginA.top+marginA.bottom
marginA = ({left: 25, right: 25, top: 25, bottom: 50})
dataMatch = rawData.filter(object => object.play == match)
getFrame = (dataMatch, n_frame) => {
let temp = [...dataMatch.filter(object => parseFloat(object.frame) == n_frame)];
temp.forEach((A, i) => {
let B = Object.assign({}, A);
B.y = 100 - B.y;
B.dy = -B.dy;
temp[i] = B;
})
return temp;
}
frame = getFrame(dataMatch, n_frame)
Agents = frameToAgent(frame);
rawData = d3.csv("https://raw.githubusercontent.com/Friends-of-Tracking-Data-FoTD/Last-Row/master/datasets/positional_data/liverpool_2019.csv");
d3 = require('d3', 'd3-polygon')
textures = require('textures@1.2.0/dist/textures.js')
embed = require("vega-embed@6")
import {multipleZones2, getNodes, timeNodes, drawZone, barycenter} from '@julesallegre/conflict-zone-model'
import {frameToAgent, innerSize, width, height} from '@julesallegre/conflict-zone-model-soccer-application'
import {drawfield, drawPlayer, margin, addSpeedPlayer, line, xReal, yReal, closer, posX, posY} from '@julesallegre/liverpool-goal-2019'
import {checkbox, select} from "@jashkenas/inputs";
import {Scrubber} from "@mbostock/scrubber"
import {vl} from '@vega/vega-lite-api'
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
