FileAttachment("shotdata.csv").text()
FileAttachment("shotdata.csv").url()
d3.text(FileAttachment("shotdata.csv").url());
d3.text(await FileAttachment("shotdata.csv").url());
wdata = d3.csv(await FileAttachment("shotdata.csv").url());
wdata[0]
wdata[0].time
wdata[1].time
wdata[0].time + wdata[1].time
data = d3.csv(await FileAttachment("shotdata.csv").url(), d3.autoType);
data[0].time + data[1].time
d3.text(await FileAttachment("shotdata.json").url());
d3.json(await FileAttachment("shotdata.json").url());
d3.text(await FileAttachment("shotdata@2.xml").url());
d3.xml(await FileAttachment("shotdata@2.xml").url());
zahlen.map(d => d + 3);
data.map(d => d.type);
new Set(data.map(d => d.type));
[...new Set(data.map(d => d.type))];
distances = data.map(d => d.distance);
Math.max(distances);
Math.max(...distances);
d3.max(distances);
d3.max(...distances)
data.filter(d => d.type == "goal")
data.filter(d => d.type == "goal").map(d => d.time)
types = [...new Set(data.map(d => d.type))];
viewof selected_types = checkbox({
options: types,
value: [types[0]],
title: 'Schusstyp auswählen'})
data.filter(d => selected_types.includes(d.type)).map(d => d.time + ": " + d.type)
{
let svg = html`<svg></svg>`;
let colors = {'goal' : "#AAFFAA", // grün
'miss' : "#FFAAAA", // rot
'post' : "#CCCCCC", // grau
'saved' : "#FFFFAA"} // gelb
d3.select(svg)
.attr("width",width)
.attr("height",height);
d3.select(svg).selectAll("circle")
.data(data)
.join("circle")
.attr("cx", d => margin.left + d.time / 90 * (width - margin.left - margin.right))
.attr("cy", d => height - margin.bottom - d.distance / 40 * (height - margin.top - margin.bottom))
.attr("r","10")
.attr("stroke","black")
.attr("fill", d => colors[d.type]);
return svg;
}
scale = d3.scaleLinear()
.domain([0,1])
.range([10,20])
scale(0) + "," + scale(0.5) + "," + scale(0.7) + "," + scale(1)
scale2 = d3.scaleLinear()
.domain([0,1])
.range([20,10])
scale2(0) + "," + scale2(0.5) + "," + scale2(0.7) + "," + scale2(1)
y = d3.scaleLinear()
.domain([0,Math.max(...distances)])
.range([height - margin.bottom, margin.top])
x = d3.scaleLinear()
.domain([0,90])
.range([margin.left, width - margin.right])
{
let svg = html`<svg></svg>`;
let colors = {'goal' : "#AAFFAA", // grün
'miss' : "#FFAAAA", // rot
'post' : "#CCCCCC", // grau
'saved' : "#FFFFAA"} // gelb
d3.select(svg)
.attr("width",width)
.attr("height",height);
d3.select(svg).selectAll("circle")
.data(data)
.join("circle")
.attr("cx", d => x(d.time))
.attr("cy", d => y(d.distance))
.attr("r","10")
.attr("stroke","black")
.attr("fill", d => colors[d.type]);
return svg;
}
{
let svg = html`<svg></svg>`;
let colors = {'goal' : "#AAFFAA", // grün
'miss' : "#FFAAAA", // rot
'post' : "#CCCCCC", // grau
'saved' : "#FFFFAA"} // gelb
d3.select(svg)
.attr("width",width)
.attr("height",height);
d3.select(svg).selectAll("circle")
.data(data)
.join("circle")
.attr("cx", d => x(d.time))
.attr("cy", d => y(d.distance))
.attr("r","10")
.attr("stroke","black")
.attr("fill", d => colors[d.type]);
d3.select(svg).append("g")
.attr("transform", "translate(0," + (height - margin.bottom) + ")")
.call(d3.axisBottom(x).ticks(8))
d3.select(svg).append("g")
.attr("transform", "translate(" + margin.left + ")")
.call(d3.axisLeft(y).ticks(8))
return svg;
}
data.filter(d => d.time > 45)
md`2: Gebt alle Distanzen in Yards aus (1 Meter = 1,09361 Yards)`
data.map(d => d.distance * 1.09361)
Math.max(...data.filter(d => d.type == "post" || d.type == "miss").map(d => d.distance))
rawData = d3.csv("https://raw.githubusercontent.com/Friends-of-Tracking-Data-FoTD/Last-Row/master/datasets/positional_data/liverpool_2019.csv")
dataMatch = rawData.filter(object => object.play == "Liverpool [2] - 1 Newcastle");
n_frames = Math.max(...dataMatch.map(d => d.frame))
viewof n_frame = Scrubber([...Array(n_frames).keys()], {
loop: false,
autoplay: false,
delay: 50,
description: "Frame"});
frame = [...dataMatch.filter(d => parseFloat(d.frame) == n_frame)]
posX = d3.scaleLinear().domain([0, 100]).range([0, pitchWidth]);
posY = d3.scaleLinear().domain([100, 0]).range([0, pitchHeight]);
{
let svg = d3.create('svg')
.attr('width', width)
.attr('height', height);
erstelle_spielfeld(svg);
svg.append("g").attr("id","players");
return svg.node();
}
d3.select("#players")
.selectAll("circle")
.data(frame)
.join("circle")
.attr('class', 'points')
.attr('r', (d,i) => (i == 0) ? pitchWidth / 100 : pitchWidth / 50 )
.style('fill', (d,i) => (i == 21) ? '#CCCCFF' // Torwart
: (d.team == 'attack') ? '#FF7777' // Angreifer
: (d.team == 'defense') ? '#7777FF' // Verteidiger
: 'white' // Ball
)
.style('stroke', "black" )
.style('stroke-width', lineWidth / 4)
.style('opacity', 0.9)
.transition()
.duration(50)
.attr('cx', d => posX(d.x))
.attr('cy', d => posY(d.y));
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.
