Soccer visualization

This section contains some examples of the JS code that can be used to visualize custom graphs related to soccer.

GVR and heatmap

In order to draw a GVR or a heatmap, outData should be an array of arrays, where the sub-arrays represent the rows. Each element of this structure represents the value in a certain position (that will be shown as a color with a certain intensity).

Scatter graph in two dimensions

In order to draw a bidimensional scatter graph, outData should be an array of arrays, where a sub-array encodes the coordinates of a position. For example

outData = [[1, 2, 3], [3, 2, 1]];

represents two points, one with coordinates (x, y, z) = (1, 2, 3) and the other with coordinates (x, y, z) = (3, 2, 1).

GVR representing the unsorted eccentricity of the players

let outData = [];
outData.push(calculateGlobalEccAll(inData));

Plot a bidimensional scatter graph representing the average eccentricity

It is possible to use the following code:

let frame = [];
let averageEccentricity = arrayAverage(calculateGlobalEccAll(inData))[0];
for(let i=0; i<averageEccentricity.length; ++i) {
   frame.push([i, averageEccentricity[i]]);
}
let outData = [];
outData.push(frame); 

Then, to plot the scatter graph, choose "Plot 2D scatter" in the custom graphs modal window.

Box plot for the eccentricity

The code used to draw a box plot for the eccentricity of the players is:

let outData = [];
outData.push(calculateGlobalEccAll(inData));

Then, to plot the box plot the user has to choose "Box plot" in the custom graphs modal window.