NBA Player Shot ChartsPlot: LeBron James’ shotsU.S. Major League Sports TeamsWhich NBA Basketball Team is ACTUALLY the GOAT?Shortest F1 Races by DistanceIMSA 2022 Championship Race DurationsIs Connor McDavid Really THAT Good?World Stadium Location Visualization TutorialCustom Match Picture GeneratorResults of international football matches from 1872 to 2021FIFA World Cups, 1930 - 2018NBA Referee MovementZones data visualisation from conflict zone model: soccer applicationVisualising and Quantifying Space Control in SoccerBump Charts: English Premier LeagueVisualizing Running - Part IVisualizing Running - SplitsWatch the NBA Finals Players Data Jam on Observable
Worldcup 2022 visualisation
archive = FileAttachment("archive.zip")
fifa_world_cup_matches = FileAttachment("Fifa_world_cup_matches.csv").csv()
fifa_world_cup_matches
Type Table, then Shift-Enter. Ctrl-space for more options.
newData = addColumn(fifa_world_cup_matches, 'games', row => row['team1'] + " : " + row['team2'])
ids = Object.keys(newData).length
viewof selectedGame = Inputs.select(newData, {
label: "Select Game",
value: d => d['games']
})
selectedGame
score = selectedGame['team1'] + " " + selectedGame['number of goals team1'] + " : " + selectedGame['number of goals team2'] + " " + selectedGame['team2']
chart = PieChart(Array(Object({name: selectedGame['team1'], value: selectedGame['possession team1']}),Object({name: selectedGame['team2'], value: selectedGame['possession team2']}),Object({name: "in contest", value: selectedGame['possession in contest']})), {
name: d => d.name,
value: d => parseInt(d.value),
width,
height: 500
})
cards = Array(Object({name: selectedGame['team1'], value: selectedGame['yellow cards team1'], card:'yellow'}),Object({name: selectedGame['team2'], value: selectedGame['yellow cards team2'],card:'yellow'}),Object({name: selectedGame['team1'], value: selectedGame['red cards team1'],card:'red'}),Object({name: selectedGame['team2'], value: selectedGame['red cards team2'],card:'red'}))
BarchartCards = GroupedBarChart(cards,{
x: d => d.name,
y: d => parseInt(d.value),
z: d => d.card,
xDomain: d3.groupSort(cards, D => d3.sum(D, d => parseInt(-d.value)), d => d.name).slice(0, 6), // top 6
yLabel: "↑ Amount of Cards (per team)",
zDomain: Array("yellow","red"),
colors: d3.schemeSpectral[2],
width,
height: 500,
})
shootAttemps = Array(Object({name: selectedGame['team1'], value: selectedGame['on target attempts team1'], target:'on target'}),Object({name: selectedGame['team2'], value: selectedGame['on target attempts team2'],target:'on target'}),Object({name: selectedGame['team1'], value: selectedGame['off target attempts team1'],target:'off target'}),Object({name: selectedGame['team2'], value: selectedGame['off target attempts team2'],target:'off target'}))
BarchartShots = GroupedBarChart(shootAttemps,{
x: d => d.name,
y: d => d.value,
z: d => d.target,
xDomain: d3.groupSort(shootAttemps, D => d3.sum(D, d => parseInt(-d.value)), d => d.name).slice(0, 6), // top 6
yLabel: "↑ Amount of shots (per team)",
//zDomain: Array("yellow","red"),
colors: d3.schemeSpectral[2],
width,
height: 500,
})
fieldlong = FileAttachment("fieldlong.png").url()
arrow_right = FileAttachment("arrow_right.png").url()
channelVals = [parseInt(selectedGame['left channel team1']) + parseInt(selectedGame['left inside channel team1']),
parseInt(selectedGame['central channel team1']),
parseInt(selectedGame['right channel team1']) + parseInt(selectedGame['right inside channel team1'])]
{
const field = d3.select(DOM.svg(width, 500))
field.append("svg:image")
.attr("xlink:href", fieldlong)
.attr('width', 600)
.attr('height', 500)
.attr('id', 'svg')
const group = field.selectAll('g')
.data(channelVals)
.enter().append('g')
.attr('transform', function(d, i){
return 'translate(0,0)';
})
var colors = ['#c30010', '#d1001f', '#de0a26', '#f01e2c', '#ff2c2c', '#f94449', '#ee6b6e', '#f69697', '#ffcbd1']
group.append("svg:image")
.attr("xlink:href", arrow_right)
.attr('width', function(d,i){
return channelVals[i] + 75;
})
.attr('height',function(d,i){
return channelVals[i] + 75;
})
.attr('x', function(d, i){
return i + 260;
})
.attr('y', function(d,i){
return i * 100 + 110;
})
.attr('class', 'arrows')
group.append("text")
.attr("x", function(d,i) {
return i + 290; })
.attr("y", function(d,i){
return i * 100 + 150;
})
.attr("dy", ".35em")
.attr('fill', 'white')
.attr('stroke','yellow')
.attr('stroke-width','0.5px')
.attr('font-size','25px')
.text
(function(d)
{ return d; });
return field.node();
}
htl.hmtl`<style type="text/css">
.arrows {
fill: red;
color: red;
filter: invert(75%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
}
</style>`
goal = FileAttachment("goal1.png").url()
goalAttempsVals = [parseInt(selectedGame['attempts inside the penalty area team1']),
parseInt(selectedGame['attempts outside the penalty area team1'])]
{
var colors = ["#e27c7c", "#a86464", "#6d4b4b", "#503f3f", "#333333", "#3c4e4b", "#466964", "#599e94", "#6cd4c5"]
const field = d3.select(DOM.svg(width, 500))
const groupOutside = field.selectAll('g')
.data(goalAttempsVals)
.enter().append('g')
.attr('transform', function(d, i){
return 'translate(0,0)';
})
groupOutside.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("height", 400)
.attr("width", 600)
.style('fill', function(d, i){
console.log("datum " + d + " has the index " + i)
return colors[i];
})
const groupInside = field.selectAll('g')
.data([parseInt(selectedGame['attempts inside the penalty area team1'])])
.enter().append('g')
.attr('transform', function(d, i){
return 'translate(0,0)';
})
groupInside.append("rect")
.attr("x", 70)
.attr("y", 110)
.attr("height", 200)
.attr("width", 450)
.style('fill', function(d, i){
return colors[i];
})
field.append("image")
.attr("xlink:href", goal)
.attr('width', 600)
.attr('height', 500)
.attr('id', 'svg')
const group = field.selectAll('g')
.data(goalAttempsVals)
.enter().append('g')
.attr('transform', function(d, i){
return 'translate(0,0)';
})
group.append("text")
.attr("x", function(d,i) {
return i + 290; })
.attr("y", function(d,i){
return i * 150 + 50;
})
.attr("dy", ".35em")
.attr('fill', 'white')
.attr('stroke', 'yellow')
.attr('stroke-width', '0.5px')
.attr('font-size', '45px')
.text
(function(d)
{ return d; })
return field.node();
}
function addColumn(tableData, newColumnName, newColumnFunction) {
return tableData.map(row => {
let returnObject = row;
returnObject[newColumnName] = newColumnFunction(row)
return returnObject
})
}
import {GroupedBarChart} from "@d3/grouped-bar-chart"
import { SummaryTable } from "@observablehq/summary-table"
import {PieChart} from "@d3/pie-chart"
import {Legend, Swatches} from "@d3/color-legend"
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.
