32:T94a,selectone = { let svg = d3.create('svg').attr('width', width-100).attr('height', (width-100)/18+10).style("background-color", 'white').style('max-width', '100%'); let boxWidth = (width-100)/19; let height = boxWidth*2; let textHeight = 15; for (let i = 0; i < 17; i++) { svg.append('rect') .attr('x', boxWidth*i) .attr('y', 0) .attr('width', boxWidth) .attr('height', boxWidth+10) .attr('stroke', 'black') .attr('fill', function(d){ if (selectedweaponone === guns[i]) { return '#f14853'} else { return '#656c71'} }); svg.append('text') .attr('x', boxWidth*(i+.5)) .attr('y', textHeight) .text(guns[i]) .attr('fill', '#ebe8e0') .attr("text-anchor", "middle") .attr('style', "font-size: 16px; font-family: 'Bebas Neue';"); svg.append("image") .attr("xlink:href", objects.data.find(g => g.displayName === guns[i]).killStreamIcon) .attr("x", boxWidth*i+5) .attr("y", 10) .attr("width", boxWidth-10) .attr("height", boxWidth); svg.append('rect') .attr('x', boxWidth*i) .attr('y', 0) .attr('width', boxWidth) .attr('height', boxWidth+10) .attr('stroke', 'black') .attr('fill', 'transparent') .on("click", function(event, d){ mutable selectedweaponone = guns[i]; } ); // // https://media.valorant-api.com/weapons/ee8e8d15-496b-07ac-e5f6-8fae5d4c7b1a/killstreamicon.png } svg.append('rect') .attr('x', boxWidth*17) .attr('y', 0) .attr('width', boxWidth) .attr('height', boxWidth+10) .attr('stroke', 'black') .attr('fill', function(d){ if (selectedweaponone === null) { return '#f14853'} else { return '#656c71'} }); svg.append('text') .attr('x', boxWidth*(17+.5)) .attr('y', textHeight) .text("None") .attr('fill', '#ebe8e0') .attr("text-anchor", "middle") .attr('style', "font-size: 16px; font-family: 'Bebas Neue';"); svg.append('rect') .attr('x', boxWidth*17) .attr('y', 0) .attr('width', boxWidth) .attr('height', boxWidth+10) .attr('stroke', 'black') .attr('fill', 'transparent') .on("click", function(event, d){ mutable selectedweaponone = null; } ); return svg.node(); } 33:T950,selecttwo = { let svg = d3.create('svg').attr('width', width-100).attr('height', (width-100)/18+10).style("background-color", 'white').style('max-width', '100%'); let boxWidth = (width-100)/19; let height = boxWidth*2; let textHeight = 15; for (let i = 0; i < 17; i++) { svg.append('rect') .attr('x', boxWidth*i) .attr('y', 0) .attr('width', boxWidth) .attr('height', boxWidth+10) .attr('stroke', 'black') .attr('fill', function(d){ if (selectedweapontwo === guns[i]) { return '#404b65'} else { return '#656c71'} }); svg.append('text') .attr('x', boxWidth*(i+.5)) .attr('y', textHeight) .text(guns[i]) .attr('fill', '#ebe8e0') .attr("text-anchor", "middle") .attr('style', "font-size: 16px; font-family: 'Bebas Neue';"); svg.append("image") .attr("xlink:href", objects.data.find(g => g.displayName === guns[i]).killStreamIcon) .attr("x", boxWidth*i+5) .attr("y", 10) .attr("width", boxWidth-10) .attr("height", boxWidth); svg.append('rect') .attr('x', boxWidth*i) .attr('y', 0) .attr('width', boxWidth) .attr('height', boxWidth+10) .attr('stroke', 'black') .attr('fill', 'transparent') .on("click", function(event, d){ mutable selectedweapontwo = guns[i]; } ); // // https://media.valorant-api.com/weapons/ee8e8d15-496b-07ac-e5f6-8fae5d4c7b1a/killstreamicon.png } svg.append('rect') .attr('x', boxWidth*17) .attr('y', 0) .attr('width', boxWidth) .attr('height', boxWidth+10) .attr('stroke', 'black') .attr('fill', function(d){ if (selectedweapontwo === null) { return '#404b65'} else { return '#656c71'} }); svg.append('text') .attr('x', boxWidth*(17+.5)) .attr('y', textHeight) .text("None") .attr('fill', '#ebe8e0') .attr("text-anchor", "middle") .attr('style', "font-size: 16px; font-family: 'Bebas Neue';"); svg.append('rect') .attr('x', boxWidth*17) .attr('y', 0) .attr('width', boxWidth) .attr('height', boxWidth+10) .attr('stroke', 'black') .attr('fill', 'transparent') .on("click", function(event, d){ mutable selectedweapontwo = null; } ); return svg.node(); } 34:T749,selecttype = { let svg = d3.create('svg').attr('width', 120).attr('height', 60).style("background-color", 'white').style('max-width', '100%'); let boxWidth = 60; let height = 60; let textHeight = 15; svg.append('rect') .attr('x', 0) .attr('y', 0) .attr('width', boxWidth) .attr('height', boxWidth) .attr('stroke', 'black') .attr('fill', function(d){ if (graphType === "Bar") { return '#a88eb8'} else { return '#d4cdbe'} }); //thanks coreui svg.append("image") .attr("xlink:href", "https://upload.wikimedia.org/wikipedia/commons/0/02/Bar-chart_%28CoreUI_Icons_v1.0.0%29.svg") .attr("x", 6) .attr("y", 0) .attr("width", boxWidth-10) .attr("height", boxWidth); svg.append('rect') .attr('x', 0) .attr('y', 0) .attr('width', boxWidth) .attr('height', boxWidth) .attr('stroke', 'black') .attr('fill', 'transparent') .on("click", function(event, d){ mutable graphType = "Bar"; } ); svg.append('rect') .attr('x', boxWidth) .attr('y', 0) .attr('width', boxWidth) .attr('height', boxWidth) .attr('stroke', 'black') .attr('fill', function(d){ if (graphType === "Line") { return '#a88eb8'} else { return '#d4cdbe'} }); //thanks coreui svg.append("image") .attr("xlink:href", "https://upload.wikimedia.org/wikipedia/commons/9/98/Simpleicons_Business_line-chart-1.svg") .attr("x", boxWidth+6) .attr("y", 0) .attr("width", boxWidth-10) .attr("height", boxWidth); svg.append('rect') .attr('x', boxWidth) .attr('y', 0) .attr('width', boxWidth) .attr('height', boxWidth) .attr('stroke', 'black') .attr('fill', 'transparent') .on("click", function(event, d){ mutable graphType = "Line"; } ); return svg.node(); }35:T17d6,weaponline = { const svg = d3.create("svg").style('max-width', '100%') .attr("viewBox", [0, 0, width, height]).attr('width', width).attr('height', height); let barWidth = (width-margin.left-margin.right)/16; svg.append("text") .attr("class", "signature") .attr("text-anchor", "left") .attr("y", 0) .attr("x", 0) .attr("dy", ".75em") .attr('style', "font-size: 20px; font-family: 'Bebas Neue';") .text("Author: Sam Rosenberg"); svg.append("text") .attr("class", "signature") .attr("text-anchor", "middle") .attr("y",22) .attr("x", 60) .attr("dy", ".75em") .attr('style', "font-size: 9px; font-family: 'Bebas Neue';") .text("Data from RunItBack.gg"); svg.append("text") .attr("class", "signature") .attr("text-anchor", "middle") .attr("y",32) .attr("x", 60) .attr("dy", ".75em") .attr('style', "font-size: 9px; font-family: 'Bebas Neue';") .text("Images from vlr.gg and valorant-api.com"); svg.append("text") .attr("class", "signature") .attr("text-anchor", "middle") .attr("y", 2) .attr("x", width-100) .attr("dy", ".75em") .attr('style', "font-size: 18px; font-family: 'Bebas Neue';") .text("greblytics.com"); svg.append("text") .attr("class", "y axis") .attr("text-anchor", "middle") .attr("y", 12) .attr("x", -(height)/2) .attr("dy", ".75em") .attr("transform", "rotate(-90)") .text("Average Percentage of Rounds with Gun Used").attr('style', "font-size: 30px; font-family: 'Bebas Neue';"); if ((selectedweaponone === null || selectedweapontwo === null)) { barWidth = (width-margin.left-margin.right-8)/8; } let iconWidth = 75; let weponecolor = '#f14853' let weptwocolor = '#404b65' let x = d3.scaleOrdinal() .domain(weaponchoice.map(d => d.Date)) .range(eventLoc) var xScale = d3.scaleOrdinal() .range([margin.left, width - margin.right]) .domain([]); var text = svg.append("svg:text").attr("class", "title") .attr("text-anchor", "middle") .attr("y", 50) .attr("x", width/2) .attr("dy", ".75em") .attr('style', "font-size: 50px; font-family: 'Bebas Neue';").attr("fill", weponecolor); ; var text2 = svg.append("svg:text").attr("class", "title") .attr("text-anchor", "middle") .attr("y", 50) .attr("x", width/2) .attr("dy", ".75em") .attr('style', "font-size: 50px; font-family: 'Bebas Neue';").attr("fill", weponecolor); ; text.append("svg:tspan").style("fill", "black").attr("dy", "0em").text("Percentage of Pro North American Rounds"); text2.append("svg:tspan").style("fill", "black").attr("dy", "1em").text("Players Play with "); text2.append("svg:tspan").style("fill", weponecolor).text(selectedweaponone); if (selectedweapontwo !== null) { text2.append("svg:tspan").style("fill", "black").text(" and "); text2.append("svg:tspan").style("fill", weptwocolor).text(selectedweapontwo); } if (graphType === "Bar") { svg.selectAll("weaponsone") .data(weaponchoice) .join("rect") .attr("fill", weponecolor) .attr("x", d => x(d.Date)) .attr("y", d => y(d[selectedweaponone])).attr("width", barWidth).attr("height", d => height - margin.bottom - y(d[selectedweaponone])) .append("title") .text(({key}) => key); svg.selectAll("weaponstwo") .data(weaponchoice) .join("rect") .attr("fill", weptwocolor) .attr("x", d => x(d.Date)+barWidth) .attr("y", d => y(d[selectedweapontwo])).attr("width", barWidth).attr("height", d => height - margin.bottom - y(d[selectedweapontwo])) .append("title") .text(({key}) => key); } else if (graphType === "Line") { svg.append("path") .datum(weaponchoice) .attr("fill", "none") .attr("stroke", weponecolor) .attr("stroke-width", 5) .attr("d", d3.line() .x(function(d) { return x(d.Date) + barWidth/2 }) .y(function(d) { return y(d[selectedweaponone]) }) ) if (selectedweaponone !== null) { svg.selectAll("w1circ") .data(weaponchoice) .join("circle") .attr("fill", weponecolor) .attr("stroke", weptwocolor) .attr("stroke-width", 2) .attr("cx", d=> x(d.Date) + barWidth/2) .attr("cy", d => y(d[selectedweaponone])) .attr("r", 6) } svg.append("path") .datum(weaponchoice) .attr("fill", "none") .attr("stroke", weptwocolor) .attr("stroke-width", 5) .attr("d", d3.line() .x(function(d) { return x(d.Date) + barWidth/2 }) .y(function(d) { return y(d[selectedweapontwo]) }) ) if (selectedweapontwo !== null) { svg.selectAll("w2circ") .data(weaponchoice) .join("circle") .attr("fill", weptwocolor) .attr("stroke", weponecolor) .attr("stroke-width", 2) .attr("cx", d=> x(d.Date) + barWidth/2) .attr("cy", d => y(d[selectedweapontwo])) .attr("r", 6) } } let formatter = d3.format(".0%"); //.tickFormat(formatter) svg.append('g') .attr('transform', `translate(${margin.left}, 0)`) .call(d3.axisLeft(y)).call(addWebFont, 'Bebas Neue', 'https://fonts.gstatic.com/s/bebasneue/v2/JTUSjIg69CK48gW7PXoo9WlhyyTh89Y.woff2') .attr('style', "font-size: 30px; font-family: 'Bebas Neue';"); for (let i = 0; i < events.length; i++) { svg.append("image") .attr("xlink:href", eventHeaders[events[i]]) .attr("x", function(d) { if (graphType === "Bar" && (selectedweaponone !== null && selectedweapontwo!== null)) { return eventLoc[i] + 20 } else { return eventLoc[i] + 20 }}) .attr('width', iconWidth) .attr("y", height - margin.bottom +20) } svg.append('g') .attr('transform', `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(xScale)); svg.append('g') .attr('transform', `translate(0, ${height - margin.bottom})`) .call(d3.axisBottom(xLabelScale)).attr('style', "font-size: 14px; font-family: 'Bebas Neue';");; return svg.node(); }36:[{"id":"1b203e7f9ac00020cbd3da55f8981d14fa1dac87d5f2cb57d7611b63c27c82feb99340267a62d91f85221afdc28a40408d4a5ef3886605afe36f229ca196c8ee","href":"https://static.observableusercontent.com/files/1b203e7f9ac00020cbd3da55f8981d14fa1dac87d5f2cb57d7611b63c27c82feb99340267a62d91f85221afdc28a40408d4a5ef3886605afe36f229ca196c8ee","name":"datafinal.csv","type":"text/csv","lastModified":1615927870165.926,"size":7483},{"id":"e7d12d6c6d672fc2faf0491b859b19a0769e156f507bd08ab93e1a00ae4120fdef45d9d33d166d371fd6e52894bc47b3706681a88013b97c2c4f24771058a9b3","href":"https://static.observableusercontent.com/files/e7d12d6c6d672fc2faf0491b859b19a0769e156f507bd08ab93e1a00ae4120fdef45d9d33d166d371fd6e52894bc47b3706681a88013b97c2c4f24771058a9b3","name":"WeaponSelections.csv","type":"text/csv","lastModified":1615885625754.267,"size":7500}] 30:{"title":"The Rise and Fall of the Stinger in Professional Valorant","cells":[{"id":0,"value":"md`# The Rise and Fall of the Stinger in Professional Valorant`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"weaponchoicepre = d3.csvParse(await FileAttachment(\"datafinal.csv\").text())","pinned":true,"hidden":false,"mode":"ojs"},{"id":78,"value":"dates = uniq(weaponchoicepre.map(d => d.Date))","pinned":true,"hidden":false,"mode":"ojs"},{"id":90,"value":"function uniq(a) {\n var seen = {};\n return a.filter(function(item) {\n return seen.hasOwnProperty(item) ? false : (seen[item] = true);\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":100,"value":"weapons = weaponchoicepre.filter(d => d.Date === dates[1]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"weaponchoiceuntype = {\n let toReturn = [];\n for (let i = 0; i < dates.length; i++)\n {\n let weapons = weaponchoicepre.filter(d => d.Date === dates[i]);\n let toAdd = {\"Date\" : dates[i]}\n for (let i = 0; i < weapons.length; i++)\n {\n toAdd[weapons[i].Weapon] = weapons[i].PickPCT;\n }\n toReturn.push(toAdd);\n }\n return toReturn;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":531,"value":"weaponchoicetype = {\n let toReturn = [];\n for (let i = 0; i < dates.length; i++)\n {\n toReturn.push(d3.autoType(weaponchoiceuntype[i]));\n }\n return toReturn;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":521,"value":"function shuffle(array) {\n var currentIndex = array.length, temporaryValue, randomIndex;\n\n // While there remain elements to shuffle...\n while (0 !== currentIndex) {\n\n // Pick a remaining element...\n randomIndex = Math.floor(Math.random() * currentIndex);\n currentIndex -= 1;\n\n // And swap it with the current element.\n temporaryValue = array[currentIndex];\n array[currentIndex] = array[randomIndex];\n array[randomIndex] = temporaryValue;\n }\n\n return array;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":522,"value":"shuffle(weaponchoiceuntype);","pinned":true,"hidden":false,"mode":"ojs"},{"id":511,"value":"weaponchoice = weaponchoicetype.sort(date_sort_asc)\n// [\"corbin\", \"dan\", \"steven\", \"bob\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":118,"value":"/*weaponchoice = {\n let toReturn = []\n for (let i = 0; i < weaponchoiceuntype.length; i++)\n {\n toReturn.push(d3.autoType(weaponchoiceuntype[i]));\n }\n return toReturn;\n}*/","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"key = swatches({color, marginLeft: margin.left, columns: \"180px\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"chart = { \n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height]);\n\n svg.append(\"g\")\n .selectAll(\"path\")\n .data(series)\n .join(\"path\")\n .attr(\"fill\", ({key}) => color(key))\n .attr(\"d\", area)\n .append(\"title\")\n .text(({key}) => key);\n\n svg.append(\"g\")\n .call(xAxis);\n\n svg.append('g')\n .attr('transform', `translate(${margin.left}, 0)`)\n .call(d3.axisLeft(y)).call(addWebFont, 'Bebas Neue', 'https://fonts.gstatic.com/s/bebasneue/v2/JTUSjIg69CK48gW7PXoo9WlhyyTh89Y.woff2')\n .attr('style', \"font-size: 30px; font-family: 'Bebas Neue';\");\n \n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":559,"value":"guns = Object.keys(weaponchoice[0]).filter(item => item !== \"Date\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":592,"value":"guns.push(\"None\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":221,"value":"//viewof selectedweaponone = Select([null].concat(Object.keys(weaponchoice[0]).filter(item => item !== \"Date\")), {label: \"Select Weapon 1:\", value:\"Stinger\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":637,"value":"objects = fetch(\"https://valorant-api.com/v1/weapons\")\n .then(response => {\n return response.json();\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":738,"value":"mutable graphType = \"Line\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":656,"value":"mutable selectedweapontwo = null","pinned":true,"hidden":false,"mode":"ojs"},{"id":627,"value":"mutable selectedweaponone = \"Stinger\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":562,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":648,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":707,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":368,"value":"eventHeaders = {return {\"First Strike Final\" : \"https://owcdn.net/img/5f8e73ec18ba4.png\", \"JBL Quantum Cup\": \"https://owcdn.net/img/5fb84e4ba1fdf.png\", \"Challengers 1- Open Qualifier\" : \"https://owcdn.net/img/6009f963577f4.png\", \"Challengers 1\":\"https://owcdn.net/img/6009f963577f4.png\", \"Challengers 2 - Open Qualifier\":\"https://owcdn.net/img/6009f963577f4.png\", \"Challengers 2\":\"https://owcdn.net/img/6009f963577f4.png\", \"Challengers 3 - Open Qualifier\":\"https://owcdn.net/img/6009f963577f4.png\", \"Challengers 3\":\"https://owcdn.net/img/6009f963577f4.png\"}}","pinned":true,"hidden":false,"mode":"ojs"},{"id":150,"value":"series = d3.stack().keys(Object.keys(weaponchoice[0]).filter(item => item !== \"Date\"))(weaponchoice)","pinned":true,"hidden":false,"mode":"ojs"},{"id":164,"value":"arr = Object.keys(weaponchoice[0]).filter(item => item !== \"Date\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"area = d3.area()\n .x(d => x(d.data.Date))\n .y0(d => yArea(d[0]))\n .y1(d => yArea(d[1]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":203,"value":"weaponchoice.map(d => d.Date)","pinned":true,"hidden":false,"mode":"ojs"},{"id":240,"value":"date_sort_asc = function (date1, date2) {\n // This is a comparison function that will result in dates being sorted in\n // ASCENDING order. As you can see, JavaScript's native comparison operators\n // can be used to compare dates. This was news to me.\n if (date1.Date > date2.Date) return 1;\n if (date1.Date < date2.Date) return -1;\n return 0;\n};","pinned":true,"hidden":false,"mode":"ojs"},{"id":490,"value":"weaponchoice.sort(date_sort_asc)","pinned":true,"hidden":false,"mode":"ojs"},{"id":244,"value":"dates.sort(date_sort_asc);","pinned":true,"hidden":false,"mode":"ojs"},{"id":208,"value":"dateLoc = {\n let toReturn = [margin.left]\n let curX = margin.left;\n for (let i = 0; i < dates.length; i++)\n {\n curX = curX + (width-margin.left-margin.right)/dates.length;\n toReturn.push(curX);\n }\n return toReturn;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":352,"value":"eventLoc = {\n let toReturn = [];\n for (let i = 0; i < dateLoc.length; i++)\n {\n toReturn.push(dateLoc[i]);\n }\n return toReturn;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":760,"value":"labelLoc = {\n let toReturn = [];\n for (let i = 0; i < dateLoc.length; i++)\n {\n toReturn.push(dateLoc[i]+61);\n }\n return toReturn;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":486,"value":"weaponchoice.map(d => d.Date)","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"x = d3.scaleOrdinal()\n .domain(weaponchoice.map(d => d.Date))\n .range(eventLoc)","pinned":true,"hidden":false,"mode":"ojs"},{"id":342,"value":"events = [\"First Strike Final\", \"JBL Quantum Cup\", \"Challengers 1- Open Qualifier\", \"Challengers 1\", \"Challengers 2 - Open Qualifier\", \"Challengers 2\", \"Challengers 3 - Open Qualifier\", \"Challengers 3\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":341,"value":"xAxisScale = d3.scaleOrdinal()\n .domain([\"First Strike Final\", \"JBL Quantum Cup\", \"Challengers 1- Open Qualifier\", \"Challengers 1\", \"Challengers 2 - Open Qualifier\", \"Challengers 2\", \"Challengers 3 - Open Qualifier\", \"Challengers 3\"])\n .range(eventLoc)","pinned":true,"hidden":false,"mode":"ojs"},{"id":763,"value":"xLabelScale = d3.scaleOrdinal()\n .domain([\"First Strike Final\", \"JBL Quantum Cup\", \"Challengers 1- Open Qualifier\", \"Challengers 1\", \"Challengers 2 - Open Qualifier\", \"Challengers 2\", \"Challengers 3 - Open Qualifier\", \"Challengers 3\"])\n .range(labelLoc)","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(\n [d3.max(weaponchoice.map(d => d[selectedweaponone]))*1.1, d3.max(weaponchoice.map(d => d[selectedweapontwo]))*1.1])])\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":238,"value":"yArea = d3.scaleLinear()\n .domain([0, 100])\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"color = d3.scaleOrdinal()\n .domain(Object.keys(weaponchoice[0]).filter(item => item !== \"Date\"))\n .range(d3.schemeCategory10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(xAxisScale).ticks(width / 80).tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs"},{"id":29,"value":"margin = ({top: 100, right: 50, bottom: 100, left: 100})","pinned":true,"hidden":false,"mode":"ojs"},{"id":306,"value":"async function addWebFont(selection, fontName, fontURL, fontType = 'woff2') {\n const fontData = await toDataURL(fontURL);\n return selection.append('style').text(`\n @font-face {\n font-family: '${fontName}';\n src: url(${fontData}) format('${fontType}');\n }\n `);\n};","pinned":true,"hidden":false,"mode":"ojs"},{"id":308,"value":"async function toDataURL(url) {\n return new Promise(async(resolve, reject) => {\n const res = await fetch(url);\n if(!res.ok) return reject(`Error: ${res.status} ${res.statusText}`);\n const blob = await res.blob();\n const reader = new FileReader();\n reader.readAsDataURL(blob);\n reader.onloadend = () => resolve(reader.result);\n });\n} ","pinned":true,"hidden":false,"mode":"ojs"},{"id":542,"value":"width = 1100","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require('d3@v6')","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"import {swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":222,"value":"import {Select, Radio} from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}