Bracket Lock//In 2023 / Sam Rosenberg

Public

Edited

Jan 18, 2023

top_fraggers = {

let svg = d3.create('svg').style("background-color", '#101010').attr("preserveAspectRatio", "none") .attr("viewBox", "-2 -2 1765 1100")

let phantom_color = "#609faa"

let vandal_color = "#e83a49"

let x_fkp_scale = d3.scaleLinear()

.domain([0, .4])

.range([270, 625])

svg.append("image")

.attr("xlink:href", "https://owcdn.net/img/638e35b162881.png")

.attr("id", "logoImage")

.attr("x", 630)

.attr("y", 10)

.attr("width", 500)

.attr("height", 200);

svg.append("text")

.attr("class", "signature")

.attr("text-anchor", "left")

.attr("y", 2)

.attr("x", 0)

.attr("dy", ".75em")

.attr('style', "font-size: 20px; font-family: 'Bebas Neue';")

.text("Author: Sam Rosenberg").call(addWebFont, 'Bebas Neue', 'https://fonts.gstatic.com/s/bebasneue/v2/JTUSjIg69CK48gW7PXoo9WlhyyTh89Y.woff2').attr('style', d => "font-size: 50px; font-family: 'Bebas Neue';").attr("fill", "white");

svg.append("text")

.attr("class", "signature")

.attr("text-anchor", "left")

.attr("y", 88)

.attr("x", 0)

.attr("dy", ".75em")

.text("Data from rib.gg").call(addWebFont, 'Bebas Neue', 'https://fonts.gstatic.com/s/bebasneue/v2/JTUSjIg69CK48gW7PXoo9WlhyyTh89Y.woff2').attr('style', d => "font-size: 50px; font-family: 'Bebas Neue';").attr("fill", "white");

svg.append("text")

.attr("class", "twitter")

.attr("text-anchor", "left")

.attr("y", 44)

.attr("x",46)

.attr("dy", ".75em")

.attr('style', "font-size: 20px; font-family: 'Bebas Neue';")

.text("@MasGrebnesor").call(addWebFont, 'Bebas Neue', 'https://fonts.gstatic.com/s/bebasneue/v2/JTUSjIg69CK48gW7PXoo9WlhyyTh89Y.woff2').attr('style', d => "font-size: 50px; font-family: 'Bebas Neue';").attr("fill", "white");

svg.append("image")

.attr("xlink:href", "https://cdn4.iconfinder.com/data/icons/social-media-icons-the-circle-set/48/twitter_circle-512.png")

.attr("id", "logoImage")

.attr("x", 0)

.attr("y", 41)

.attr("width", 45)

.attr("height", 45);

let left_offset = 110

let top_offset = 200

var text2 = svg.append("svg:text").attr("class", "title")

.attr("text-anchor", "middle")

.attr("y", top_offset-20+120)

.attr("x", 1765/2)

.attr('style', "font-size: 90px; font-family: 'Bebas Neue';").attr("fill", "black");

;

text2.append("svg:tspan").style("fill", "#10b39d").text("LOCK//IN ");

text2.append("svg:tspan").style("fill", "white").text("Tournament Bracket");

let top_box = 230;

const newShade = (hexColor, magnitude) => {

hexColor = hexColor.replace(`#`, ``);

if (hexColor.length === 6) {

const decimalColor = parseInt(hexColor, 16);

let r = (decimalColor >> 16) + magnitude;

r > 255 && (r = 255);

r < 0 && (r = 0);

let g = (decimalColor & 0x0000ff) + magnitude;

g > 255 && (g = 255);

g < 0 && (g = 0);

let b = ((decimalColor >> 8) & 0x00ff) + magnitude;

b > 255 && (b = 255);

b < 0 && (b = 0);

return `#${(g | (b << 8) | (r << 16)).toString(16)}`;

} else {

return hexColor;

}

};

let left_teams = ["KOI","NRG Esports","DetonatioN FocusMe", "Giants Gaming", "Gen.G", "LOUD","FunPlus Phoenix","Karmine Corp"];

let total_offset = -20;

for (let i = 0; i < left_teams.length; i++)

{

if ((i)%2 === 0)

{

total_offset += 20;

}

let team = left_teams[i];

svg.append("rect")

.attr("x", 30)

.attr("y", top_box + 100*i + total_offset)

.attr("width", 200)

.attr("height", 100)

.attr("fill", newShade(team_look.find(t => t.Team == team).Color,0))

.attr("opacity", .7)

svg.append("image")

.attr("xlink:href",team_look.find(t => t.Team == team).Logo)

.attr("id", "logoImage")

.attr("x", 30)

.attr("y", top_box+ 100*i +total_offset+5)

.attr("width", 200)

.attr("height", 90);

}

let left_teams_r2 = ["KOI","NRG Esports","DetonatioN FocusMe", "Giants Gaming", "Gen.G", "LOUD","FunPlus Phoenix","Karmine Corp"];

let total_offset_r2 = -130;

for (let i = 0; i < left_teams.length/2; i++)

{

if ((i)%2 === 0)

{

total_offset_r2 += 240;

}

let team = left_teams[i];

svg.append("rect")

.attr("x", 230)

.attr("y", top_box + 100*i + total_offset_r2)

.attr("width", 200)

.attr("height", 100)

.attr("fill", newShade(team_look.find(t => t.Team == team).Color,0))

.attr("opacity", .7)

svg.append("image")

.attr("xlink:href",team_look.find(t => t.Team == team).Logo)

.attr("id", "logoImage")

.attr("x", 230)

.attr("y", top_box+ 100*i +total_offset_r2)

.attr("width", 200)

.attr("height", 98);

}

let left_teams_r3 = ["KOI","NRG Esports","DetonatioN FocusMe", "Giants Gaming", "Gen.G", "LOUD","FunPlus Phoenix","Karmine Corp"];

let total_offset_r3 = 0;

for (let i = 0; i < left_teams.length/4; i++)

{

if ((i)%2 === 0)

{

total_offset_r3 += 280;

}

let team = left_teams[i];

svg.append("rect")

.attr("x", 430)

.attr("y", top_box + 150*i + total_offset_r3)

.attr("width", 220)

.attr("height", 150)

.attr("fill", newShade(team_look.find(t => t.Team == team).Color,0))

.attr("opacity", .7)

svg.append("image")

.attr("xlink:href",team_look.find(t => t.Team == team).Logo)

.attr("id", "logoImage")

.attr("x", 430)

.attr("y", top_box+ 150*i +total_offset_r3)

.attr("width", 220)

.attr("height", 148);

}

let right_teams = ["BBL Esports","DRX","Cloud9", "Paper Rex", "Team Heretics", "Evil Geniuses","MIBR","Talon Esports"];

let right_teams_l3 = ["KOI","NRG Esports","DetonatioN FocusMe", "Giants Gaming", "Gen.G", "LOUD","FunPlus Phoenix","Karmine Corp"];

let total_offset_l3 = 0;

for (let i = 0; i < right_teams.length/4; i++)

{

if ((i)%2 === 0)

{

total_offset_l3 += 280;

}

let team = right_teams[i];

svg.append("rect")

.attr("x", 1110)

.attr("y", top_box + 150*i + total_offset_l3)

.attr("width", 220)

.attr("height", 150)

.attr("fill", newShade(team_look.find(t => t.Team == team).Color,0))

.attr("opacity", .7)

svg.append("image")

.attr("xlink:href",team_look.find(t => t.Team == team).Logo)

.attr("id", "logoImage")

.attr("x", 1110)

.attr("y", top_box+ 150*i +total_offset_l3)

.attr("width", 220)

.attr("height", 148);

}

let left_teams_l2 = ["KOI","NRG Esports","DetonatioN FocusMe", "Giants Gaming", "Gen.G", "LOUD","FunPlus Phoenix","Karmine Corp"];

let total_offset_l2 = -130;

for (let i = 0; i < right_teams.length/2; i++)

{

if ((i)%2 === 0)

{

total_offset_l2 += 240;

}

let team = right_teams[i];

svg.append("rect")

.attr("x", 1330)

.attr("y", top_box + 100*i + total_offset_l2)

.attr("width", 200)

.attr("height", 100)

.attr("fill", newShade(team_look.find(t => t.Team == team).Color,0))

.attr("opacity", .7)

svg.append("image")

.attr("xlink:href",team_look.find(t => t.Team == team).Logo)

.attr("id", "logoImage")

.attr("x", 1330)

.attr("y", top_box+ 100*i +total_offset_l2)

.attr("width", 200)

.attr("height", 98);

}

let total_offset_l1 = -20;

for (let i = 0; i < left_teams.length; i++)

{

if ((i)%2 === 0)

{

total_offset_l1 += 20;

}

let team = right_teams[i];

svg.append("rect")

.attr("x", 1530)

.attr("y", top_box + 100*i + total_offset_l1)

.attr("width", 200)

.attr("height", 100)

.attr("fill", newShade(team_look.find(t => t.Team == team).Color,0))

.attr("opacity", .7)

svg.append("image")

.attr("xlink:href",team_look.find(t => t.Team == team).Logo)

.attr("id", "logoImage")

.attr("x", 1530)

.attr("y", top_box+ 100*i +total_offset_l1+5)

.attr("width", 200)

.attr("height", 90);

}

return svg.node();

}

team_look.find(t => t.Team == "Cloud9").Color

<!DOCTYPE html>

.line {

fill: none;

stroke: steelblue;

stroke-width: 2px;

}

.axisRed line{

stroke: white;

}

.axisRed path{

stroke: white;

}

.axisRed text{

fill: white;

}

<\style>

<body>

<p>Color Axis<p>

<\body>

gun_of_choice = {

return {"alexis":"https://media.valorant-api.com/weaponskinchromas/403f7d3e-4e96-6566-42f3-01b7a803d660/fullrender.png",

"Bob": "https://media.valorant-api.com/weaponskinchromas/d43b8d21-4fb2-1224-1392-53ab6d829ed1/fullrender.png",

"mimi":"https://media.valorant-api.com/weaponskinchromas/fa0a3567-4a25-1a13-b078-3c97265e3adc/fullrender.png",

"Mary":"https://media.valorant-api.com/weaponskinchromas/e58db59a-43ec-36dc-a646-98a932ed6094/fullrender.png",

"flowerful":"https://media.valorant-api.com/weaponskinchromas/274e2c81-4bcf-3689-c22b-41aa05b1329c/fullrender.png",

"conir":"https://media.valorant-api.com/weaponskinchromas/2bd28382-48c6-8579-83e8-e9b64b783de3/fullrender.png",

"babytz":"https://media.valorant-api.com/weaponskinchromas/9a2125b3-4e53-4757-fe1c-4e9b31ae0c28/fullrender.png",

"suzu":"https://media.valorant-api.com/weaponskinchromas/d6be385b-44f7-271a-6b1b-34be3251b6c7/fullrender.png",

"Festival":"https://media.valorant-api.com/weaponskinchromas/9a2125b3-4e53-4757-fe1c-4e9b31ae0c28/fullrender.png",

"bstrdd":"https://media.valorant-api.com/weaponskinchromas/835ad8e3-4b0e-071b-ce38-00a05032ac43/fullrender.png"}

}

Type Table, then Shift-Enter. Ctrl-space for more options.

top_frag_ten = average_kills.slice(0, 10)

async function toDataURL(url) {

return new Promise(async(resolve, reject) => {

const res = await fetch(url);

if(!res.ok) return reject(`Error: ${res.status} ${res.statusText}`);

const blob = await res.blob();

const reader = new FileReader();

reader.readAsDataURL(blob);

reader.onloadend = () => resolve(reader.result);

});

}

async function addWebFont(selection, fontName, fontURL, fontType = 'woff2') {

const fontData = await toDataURL(fontURL);

return selection.append('style').text(`

@font-face {

font-family: '${fontName}';

src: url(${fontData}) format('${fontType}');

}

`);

};

team_looks_url = "https://docs.google.com/spreadsheets/d/1k_M4VTP4vlZ2Pln5ytcOeROW7uNn3pTfXxpvG7NvLtY/edit?usp=sharing"

team_look = d3.csv(getCsvUrl(team_looks_url), d3.autoType)

// Converts a Google Sheets website URL to its CSV URL. You can also go to “File → Publish to web”, select the “Comma-separated values (.csv)” type, select the sheet with your data, and use that CSV URL directly with `d3.csv` above.

getCsvUrl = url => {

url = new URL(url);

const id = url.pathname.split("/")[3]

const sheet = new URLSearchParams(url.hash.slice(1)).get("gid") || 0;

return `https://docs.google.com/spreadsheets/d/${id}/gviz/tq?tqx=out:csv&sheet=${sheet}`

}

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.

Learn more