{
const roundNames = ["Group stage 1","Group stage 2","Group stage3", "Winners", "Losers1", "Losers2", "Final"];
function getGameName(roundno, gameno) {
let x = '';
if (gameno === 0) {
x += roundNames[roundno];
}
x += "-" + gameno;
return x;
}
let plotdata = game_scores.filter(x=>x.name === selectedTeam).map(function(x){
return {roundidx:x.roundidx,
gameidx0:x.gameidx0,
points:x.points,
imgy: x.points+5,
gamemap:x.gamemap, gameName: getGameName(x.roundidx, x.gameidx),
img: x.gamemap === 'Storm Point' ? blueDonutUrl : orangeDonutUrl}
});
let layer_points = vl.markBar({width:13, align:'left', tooltip:true})
.data(plotdata)
.encode(
vl.x().fieldQ('gameidx0').axis({titleFontSize:20, labelFontSize:20, values:[0,6,12,18, 24,30, 36], title:false,
labelExpr:'datum.label == 0 ? "Group 1": datum.label == 18 ? "Winners": datum.label==24?"Losers1" : datum.label==36 ? "Final": datum.label==30?"Losers2": datum.label==6 ? "2" : datum.label==12 ? "3":"" ', labelAlign:"left",gridWidth:5}),
vl.y().fieldQ('points'),
vl.color().fieldN('gamemap').legend({labelFontSize:15, title: 'Game Map', titleFontSize:14})
.scale({range:['#5d8d74','#fc6c7b']})
);
let layer_donut = vl.markImage({width:17, align:'left'})
.data(
plotdata.filter(x=> x.points===0)
)
.encode(
vl.x().fieldQ('gameidx0').scale({domainMin:0, rangeMin:0, domainMax:44}),
vl.y().fieldQ('imgy').axis({title:'Points', labelFontSize:15, titleFontSize:20}),
vl.url().fieldN('img')
);
let chart_allgame_scores = vl.layer([layer_points, layer_donut])
.width(650).height(200);
let rounds = vl.data(
round_standings.filter(x=>x.name === selectedTeam).map(function (x) {
return {roundidx:x.roundidx, round_rank:x.round_rank+1,
roundName:roundNames[x.roundidx]};
})
)
.encode(
vl.x().fieldN('roundName').sort(roundNames).axis({labelAngle:-45, labelFontSize:15, title:false})
.scale({domain:roundNames}),
vl.y().fieldQ('round_rank').sort('descending').axis({
values:[1, 5, 10, 15, 20], titleFontSize:20, title: "Rank",
labelFontSize:15}).scale({domainMax:20})
)
.layer(
vl.markLine({strokeWidth:3}),
vl.markCircle({size:150, tooltip:true})
)
.width(200)
.height(200)
return vl.concat([rounds, chart_allgame_scores,]).render();
}
graphCompare = {
const height = 500;
const width = 180;
let chartMeanPoints = vl.data(teamsummary)
.encode(
vl.x().fieldQ('meanPoints').axis({format:".0f", labelFontSize:20, titleFontSize:20, title:"Average points per game"}),
vl.y().fieldN('name').sort("-x").axis({title:"",labels:true,ticks:false, labelFontSize:13}),
).layer(
vl.markBar({tooltip:true})
.encode(
vl.color({scale:{range: ["DarkGray", "OrangeRed"]}}).fieldN('selected').legend({disable:true}),
vl.tooltip([vl.fieldN('name'), vl.fieldQ('meanPoints')])
),
).height(height).width(width);
let chartMeanKills = vl.data(teamsummary)
.encode(
vl.x().fieldQ('meanKills').axis({format:".0f", labelFontSize:20, titleFontSize:20, title:"Average kills per game"}),
vl.y().fieldN('name').sort("-x").axis({title:"",labels:true,ticks:false, labelFontSize:13}),
).layer(
vl.markBar({tooltip:true})
.encode(
vl.color({scale:{range: ["gray", "black", "teal"]}}).fieldN('selected').legend({disable:true}),
vl.tooltip([vl.fieldN('name'), vl.fieldQ('meanKills')])
),
).height(height).width(width);
let chartMeanPlacement = vl.data(teamsummary)
.encode(
vl.x().fieldQ('meanPlacement').axis({format:".0f", labelFontSize:20, titleFontSize:20, title:"Average Placement"}),
vl.y().fieldN('name').sort("x").axis({title:"",labels:true,ticks:false, labelFontSize:13}),
).layer(
vl.markBar({tooltip:true})
.encode(
vl.color({scale:{range: ["gray", "FF4E62", "teal"]}}).fieldN('selected').legend({disable:true}),
vl.tooltip([vl.fieldN('name'), vl.fieldQ('meanPlacement')])
),
).height(height).width(width);
return vl.hconcat([chartMeanPoints,chartMeanPlacement,chartMeanKills]).render();
}
thisTeamPlayerKillsSummary.rename({
totalKills:'Total Kills',
meanKillsPerGame:'Average Kills Per Game',
meanKillsRank: 'Average Kills Rank'
}).view({maxdigits:2})
Attributions
Data public at Battlefyhttps://battlefy.com/apex-legends-global-series-year-2/pro-league-split-2-playoffs.
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.
