// The base map of which all other maps are built
// Use this with the mapsPlayed array
MAPS = FileAttachment("Maps.json").json()
// Variations of the same base map
// Use this with the mapVariantsPlayed array
MAP_VARIANTS = FileAttachment("Base Map Variant Names.json").json()
// Also called game variants, but game types makes more sense
// Use this with the gametypesPlayed array
GAMETYPES = FileAttachment("Game Base Variants.json").json()
// Also called game base variants, but Game Type variants makes more sense
// Use this with the gametypeVariantsPlayed array
GAMETYPE_VARIANTS = FileAttachment("GameBaseVariantsNamed.json").json()
raw_OC_McBuckets = FileAttachment("OC McBuckets.json").json()
raw_MiniPuffDaddy = FileAttachment("MiniPuffDaddy@1.json").json()
raw_Stookey8144 = FileAttachment("Stookey8144.json").json()
raw_TTV_Elimessi10 = FileAttachment("TTV_Elimessi10.json").json()
raw_Freaknbull = FileAttachment("Freaknbull.json").json()
raw_EkTwEnTyFoUr = FileAttachment("EkTwEnTyFoUr.json").json()
raw_RFxXDeBaTeAbLeX = FileAttachment("RFxXDeBaTeAbLeX.json").json()
raw_Smoke2003x = FileAttachment("Smoke2003x.json").json()
raw_SpaghettiPigeon = FileAttachment("SpaghettiPigeon.json").json()
raw_Groeds25 = FileAttachment("Groeds25.json").json()
raw_FierceCheesev2 = FileAttachment("FierceCheesev2.json").json()
raw_SpaghettiSniper = FileAttachment("SpaghettiSniper.json").json()
raw_Smelliot21 = FileAttachment("Smelliot21.json").json()
raw_SuuperChicken = FileAttachment("SuuperChicken.json").json()
raw_gameData = raw_OC_McBuckets.concat(raw_MiniPuffDaddy, raw_Stookey8144, raw_TTV_Elimessi10, raw_Freaknbull, raw_EkTwEnTyFoUr, raw_RFxXDeBaTeAbLeX, raw_Smoke2003x, raw_SpaghettiPigeon, raw_Groeds25, raw_FierceCheesev2, raw_SpaghettiSniper, raw_Smelliot21, raw_SuuperChicken)
formattedGameData = raw_gameData.map(
(d) => ({
...d, // retain old values using spread syntax
FormattedDate: new Date(d.MatchCompletedDate.ISO8601Date) // update date to hold a Date object
})
);
// gameData is an array that contains every game played by each player in the Saprtan Company from 01/01/22 to 12/31/22
gameData = formattedGameData.filter((d) => {
// Data from the beginning of 2019 to the end of 2022
return d.FormattedDate.getFullYear() > 2018 &&
d.FormattedDate.getFullYear() < 2023;
});
MapNames = {
let MapNames = []
for (var i in MAPS) {
if (MAPS.hasOwnProperty(i)) {
MapNames[MAPS[i].id] = MAPS[i].name;
}
}
return MapNames
}
MapVariantNames = {
let MapVariantNames = []
for (var i in MAP_VARIANTS) {
if (MAP_VARIANTS.hasOwnProperty(i)) {
MapVariantNames[MAP_VARIANTS[i].id] = MAP_VARIANTS[i].name;
}
}
return MapVariantNames
}
Gametypes = {
let Gametypes = []
for (var i in GAMETYPES) {
if (GAMETYPES.hasOwnProperty(i)) {
Gametypes[GAMETYPES[i].id] = GAMETYPES[i].name;
}
}
return Gametypes
}
GametypeVariants = {
let GametypeVariants = []
for (var i in GAMETYPE_VARIANTS) {
if (GAMETYPE_VARIANTS.hasOwnProperty(i)) {
GametypeVariants[GAMETYPE_VARIANTS[i].id] = GAMETYPE_VARIANTS[i].name;
}
}
return GametypeVariants
}
games = d3.map(gameData, function(d) {
if (d.MapVariant != null || d.MapVariant != undefined) {
return {
...d, // retain old values using spread syntax
MapName: MapNames[d.MapId],
MapVariantName: MapVariantNames[d.MapVariant.ResourceId],
GametypeName: Gametypes[d.GameBaseVariantId],
GametypeVariantName: GametypeVariants[d.GameVariant.ResourceId]
}
}
else {
return {
...d, // retain old values using spread syntax
MapName: MapNames[d.MapId]
}
}
});
// Everyone of the players in the spartan company
gamertags = Array.from(new Set(d3.map(gameData, function(d) {return d.Players[0].Player.Gamertag;})))
// The baseMap, e.g. the Rig, Regret, etc.
mapsPlayed = Array.from(new Set(d3.map(gameData, function(d) {return d.MapId;})))
// Different variants of the same baseMap, e.g. Viking, Ancestor, etc...
mapVariantsPlayed = Array.from(new Set(d3.map(gameData, function(d) {
if (d.MapVariant != null || d.MapVariant != undefined) {
return d.MapVariant.ResourceId;
}
})))
// Slayer, Oddball, Catpure the Flag etc.
gametypesPlayed = Array.from(new Set(d3.map(gameData, function(d) {return d.GameBaseVariantId;})))
gametypeVariantsPlayed = Array.from(new Set(d3.map(gameData, function(d) {
if (d.GameVariant != null || d.GameVariant != undefined) {
return d.GameVariant.ResourceId;
}
})))
// The unique matches played by all players. If players share a match ID, then they played in the same match
matchIds = Array.from(new Set(d3.map(gameData, function(d) {return d.Id.MatchId;})))
matches = {
var matches = []
for (var i in games) {
if (Object.keys(matches).includes(games[i].Id.MatchId)) {
matches[games[i].Id.MatchId].push(games[i])
}
else {
matches[games[i].Id.MatchId] = [games[i]];
}
}
return matches
}
arrayMatches = Object.values(matches)
import {swatches} from "@d3/color-legend"
data = [4, 8, 15, 16, 23, 42]
x = d3.scaleLinear()
.domain([0, d3.max(data)])
.range([0, 420])
{
const svg = d3.create("div")
.style("font", "10px sans-serif")
.style("text-align", "right")
.style("color", "white");
svg.selectAll("div")
.data(data)
.join("div")
.style("background", "steelblue")
.style("padding", "3px")
.style("margin", "1px")
.style("width", d => `${x(d)}px`)
.text(d => d);
return svg.node();
}
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.
