url = "https://docs.google.com/spreadsheets/d/1xxKWVPHW7krW_zjs2KdmUUPCnMgF3nhLoKnrcR_M3ik/edit?usp=sharing"
data = d3.csv(getCsvUrl(url), d3.autoType)
SummaryTable(data)
function calcPoints(hero)
{
return parseInt(hero.official_points)+parseInt(hero["rtn_wins/pro_quest"])*6+hero["national>48"]*40+hero["national<48"]*20+hero["US_Nationals"]*80
}
calcPoints(data.find(h => h.Hero === "Katsu"))
function compare(a, b) {
if (calcPoints(a) >= calcPoints(b)) {
return -1;
}
else
{
// a must be equal to b
return 1;
}
}
data.sort(compare)
order = data.sort(compare).map(h => h.Hero)
heroLinks = {
return {
"Azalea" : "https://cdn.discordapp.com/emojis/793925585188814879.png?v=1",
"Boltyn" : "https://cdn.discordapp.com/emojis/843437214813913141.png?v=1",
"Bravo" : "https://cdn.discordapp.com/emojis/793925606676496454.png?v=1",
"Chane" : "https://cdn.discordapp.com/emojis/843437214905139200.png?v=1",
"Dash" : "https://cdn.discordapp.com/emojis/793925618584387615.png?v=1",
"Dorinthea" : "https://cdn.discordapp.com/emojis/793925645620740110.png?v=1",
"Kano" : "https://cdn.discordapp.com/emojis/793925646480834610.png?v=1",
"Katsu" : "https://cdn.discordapp.com/emojis/793925646778630144.png?v=1",
"Levia" : "https://cdn.discordapp.com/emojis/843437215178555412.png?v=1",
"Prism" : "https://cdn.discordapp.com/emojis/835289741049331722.png?v=1",
"Rhinar" : "https://cdn.discordapp.com/emojis/793937252367335495.png?v=1",
"Viserai" : "https://cdn.discordapp.com/emojis/793925697717403659.png?v=1",
"Briar":"https://fabdachi.com/wp-content/uploads/2021/12/briarhires.png",
"Lexi":"https://fabdachi.com/wp-content/uploads/2021/12/lexi_hero_art_full.height-650.png",
"Oldhim": "https://fabdachi.com/wp-content/uploads/2021/12/oldhim_cover_image_12038190238.height-650.png"
}
}
data.find(h => h.Hero === "Chane")
heroLoc = d3.scaleOrdinal()
.domain([0,1,2,3,4,5,6,7,8,9,10,11, 12])
.range([0, 50,100,150,200,250,300,350,400, 450, 500,550, 600].map(x => x + 10));
heroLoc(1)
livingLegend = {
let hero_num = 12;
let count = 0;
let heroLoc = d3.scaleOrdinal()
.domain([0,1,2,3,4,5,6,7,8,9,10,11, 12, 13, 14])
.range([0, 50,100,150,200,250,300,350,400, 450, 500,550, 600, 650, 700].map(x => x + 80));
let legendLoc = d3.scaleLinear()
.domain([0, 1100])
.range([0, 800]);
let svg = d3.create('svg').style("background-color", 'white').attr("preserveAspectRatio", "none").style("background-color", 'white').attr("viewBox", "0 0 960 830");
var text2 = svg.append("svg:text").attr("class", "title")
.attr("xlink:href", "greblytics.com")
.attr("text-anchor", "middle")
.attr("y", 60)
.attr("x", 963/2)
.attr('style', "font-size: 45px; font-family: 'Bebas Neue';");
;
text2.append("svg:tspan").style("fill", "black").text("Flesh and Blood Living Legend Points");
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';");
for (let i = 0; i < order.length; i++) {
let key = order[i]
console.log(key);
svg.append("rect")
.attr("x", 49)
.attr("y", heroLoc(count)-1)
.attr("width", 47)
.attr("height", 47)
.attr("fill", heroColors[key])
.attr("stroke", "black").attr("opacity", .6);
svg.append("rect")
.attr("x", 49+47)
.attr("y", heroLoc(count)-1)
.attr("width", 800)
.attr("height", 47)
.attr("fill", "white").attr("stroke", "black");
console.log(legendLoc(data.find(h => h.Hero === key)["official_points"]))
svg.append("rect")
.attr("x", 49+47)
.attr("y", heroLoc(count)-1)
.attr("width", legendLoc(calcPoints(data.find(h => h.Hero === key))))
.attr("height", 47)
.attr("fill", heroColors[key])
.attr("stroke", "black").attr("opacity", .3);
console.log(legendLoc(data.find(h => h.Hero === key)["official_points"]))
svg.append("rect")
.attr("x", 49+47)
.attr("y", heroLoc(count)-1)
.attr("width", legendLoc(data.find(h => h.Hero === key)["official_points"]))
.attr("height", 47)
.attr("fill", heroColors[key])
.attr("stroke", "black").attr("opacity", 1);
svg.append("line")
.attr("x1", 96+legendLoc(1000))
.attr("y1", 80)
.attr("x2", 96+legendLoc(1000)).attr("y2", 826)
.attr("stroke", 'black').attr("stroke-width", 1)
svg.append("line")
.attr("x1", 96+legendLoc(1000))
.attr("y1", 80)
.attr("x2", 96+legendLoc(1000)).attr("y2", 826)
.attr("stroke", '#ffda85').attr("stroke-width", 1)
svg.append("text")
.attr("x", 96+legendLoc(1050))
.attr("y", heroLoc(count)-1 + 29)
.text(calcPoints(data.find(h => h.Hero === key)))
.attr("text-anchor", "middle")
svg.append("image")
.attr("xlink:href", heroLinks[key])
.attr("id", "heroIcon")
.attr("x", 50)
.attr("y", heroLoc(count))
.attr("width", 45)
.attr("height", 45);
count++;
}
svg.append("rect")
.attr("x", 800)
.attr("y", 15)
.attr("width", 10)
.attr("height", 10)
.attr("fill", 'black')
.attr("stroke", "black").attr("opacity", .3);
svg.append("text")
.attr("x", 811)
.attr("y", 14)
.text("Official points")
.attr("text-anchor", "left")
.attr('style', "font-size: 12px; font-family: 'Bebas Neue';")
svg.append("rect")
.attr("x", 800)
.attr("y", 5)
.attr("width", 10)
.attr("height", 10)
.attr("fill", 'black')
.attr("stroke", "black").attr("opacity", 1);
svg.append("text")
.attr("x", 811)
.attr("y", 24)
.text("Expected Points not yet Official")
.attr("text-anchor", "left")
.attr('style', "font-size: 12px; font-family: 'Bebas Neue';")
return svg.node();
}
heroColors = {
return {
"Azalea" : "#1a5d40",
"Boltyn" : "#f7e6db",
"Bravo" : "#ded7c3",
"Chane" : "#4d354e",
"Dash" : "#c69342",
"Dorinthea" : "#fcdd6e",
"Kano" : "#e7802e",
"Katsu" : "#87acc8",
"Levia" : "#cda1c2",
"Prism" : "#bcc0de",
"Rhinar" : "#55523e",
"Viserai" : "#621b6e",
"Briar" : "#2d6f5b",
"Lexi": "#89c2b9",
"Oldhim": "#b4ccd9"
}
}
// 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}`
}
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}');
}
`);
};
import { SummaryTable } from "@observablehq/summary-table"
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.