Public
Edited
Mar 5, 2023
Insert cell
Insert cell
top_fraggers = {

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

let phantom_color = "#609faa"
let vandal_color = "#e83a49"

let x_fkp_scale = d3.scaleLinear()
.domain([0, .4])
.range([270, 625])

// Logo of Tournament
svg.append("image")
.attr("xlink:href", "")
.attr("id", "logoImage")
.attr("x", 200)
.attr("y", 10)
.attr("width", 500)
.attr("height", 110);


svg.append("image")
.attr("xlink:href", "https://owcdn.net/img/638e35b162881.png")
.attr("id", "logoImage")
.attr("x", 400)
.attr("y", 20)
.attr("width", 100)
.attr("height", 100);

// Signature
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: 20px; font-family: 'Bebas Neue';").attr("fill", "white");

// Data from run it back
svg.append("text")
.attr("class", "signature")
.attr("text-anchor", "left")
.attr("y", 38)
.attr("x", 0)
.attr("dy", ".75em")
.attr('style', "font-size: 20px; font-family: 'Bebas Neue';")
.text("Data from rib.gg").call(addWebFont, 'Bebas Neue', 'https://fonts.gstatic.com/s/bebasneue/v2/JTUSjIg69CK48gW7PXoo9WlhyyTh89Y.woff2').attr('style', d => "font-size: 20px; font-family: 'Bebas Neue';").attr("fill", "white");


// Twitter Tag
svg.append("text")
.attr("class", "twitter")
.attr("text-anchor", "left")
.attr("y", 20)
.attr("x", 16)
.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: 20px; font-family: 'Bebas Neue';").attr("fill", "white");

// Twitter Icon
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", 22)
.attr("width", 14)
.attr("height", 14);

// Top and Left Offsets
let left_offset = 110
let top_offset = 200

// Title
var text2 = svg.append("svg:text").attr("class", "title")
.attr("text-anchor", "middle")
.attr("y", top_offset-20)
.attr("x", 900/2)
.attr('style', "font-size: 57px; font-family: 'Bebas Neue';").attr("fill", "black");
;
text2.append("svg:tspan").style("fill", "white").text("Average ");
text2.append("svg:tspan").style("fill", "#10b39d").text("Gun Cost ");
text2.append("svg:tspan").style("fill", "white").text("vs ");
text2.append("svg:tspan").style("fill", "#10b39d").text("Combat Score");
return svg.node();
}
Insert cell
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);
});
}
Insert cell
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}');
}
`);
};
Insert cell
ACSLockIn.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
acslockin.map(d=>d.Ign)
Insert cell
team_looks_url = "https://docs.google.com/spreadsheets/d/1k_M4VTP4vlZ2Pln5ytcOeROW7uNn3pTfXxpvG7NvLtY/edit?usp=sharing"
Insert cell
team_look = d3.csv(getCsvUrl(team_looks_url), d3.autoType)
Insert cell
// 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}`
}
Insert cell
Insert cell

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