31:T1146,tableGraph = { // At first, just create the basic SVG // const sel = d3.create("svg"); const svg = d3.create("svg").attr("height", 400).attr("width", 500) const container = svg.append("g").attr("id", "container").attr("transform", `translate(50, 0)`) // Return the SVG node and attach an update method return Object.assign(svg.node(), { update: (data, league, clinched) => { // const matchday const yscale = d3.scaleBand() .domain(data.map(d => d.team)) .range([0,400]) .padding(.2) const xScale = d3.scaleLinear() .domain([0, league.matches*3]) .range([0,500-50]) // places const goalDiffScale = d3.scaleLinear() .domain(d3.extent(data.map(t => t.record[0].goalsDiff))) .range([0,50]) const teams = container.selectAll(".team") .data(data, d => d.team) .join(enter => enter .append("g") //move to exact position if a new team .attr("transform", d => `translate (0, ${yscale(d.team)})`) .attr("class", "team") , update => update // .attr("class", "update") .transition().delay(500).duration(500) .attr("transform", d => `translate (0, ${yscale(d.team)})`), exit => exit.remove()) teams .classed("top4", (d,i) => i<4) .classed("title", (d,i) => { console.log(d.team, i, d.record[0].totalPts, clinched.title) return d.record[0].totalPts > clinched.title }) .classed("ucl-spot", d => d.record[0].totalPts > clinched.ucl) .classed("relegation", d => d.record[0].possiblePts < clinched.relegation) // .attr("transform", d => `translate (0, ${yscale(d.team)})`) //one box per match teams.selectAll(".win, .draw") .data(d => d.record.filter(d => d.result != "loss"), d => d.match_id) .join(enter => enter .append("rect") // .classed("match", true) .attr("height", yscale.bandwidth()/2), update => update, exit => exit .remove()) .attr("x", d => xScale(d.totalPts - d.matchPoints)) .attr("class", d => `match match_${d.match_id} ${d.result} ${d.homeaway}`) .transition().delay(0).duration(500) // .attr("visibility", d => (d.played <= matchday && d.date <= matchDate) ? "visible" : "hidden") .attr("width", d => xScale(d.matchPoints) - 1) //group consecutive losses into a single item teams.selectAll(".loss") // .data(d => d.record.filter(d => d.result == "loss")) .data(d => Array.from(d3.group(d.record.filter(d => d.result == "loss"), d => d.totalPts))) .join(enter => enter .append("text") .text(d => d[1].length), update => update, exit => exit .remove()) // .attr("x", d => xScale(d.totalPts - d.matchPoints)) .attr("x", d => xScale(d[0])) .attr("y", yscale.bandwidth()/4*3) // .attr("visibility", d => (d.played <= matchday && d.date <= matchDate) ? "visible" : "hidden") // .attr("class", d => `match match_${d.match_id} ${d.result} ${d.homeaway}`) .attr("class", d => `match loss`) //show possible points remaining, which says if you'll clinch or be eliminated teams.selectAll(".possible-points") .data(d => [d.record[0]]) //most recent result .join(enter => enter .append("rect") .classed("possible-points", true) .attr("height",1), update => update, exit => exit.remove()) .attr("x", 0) .attr("width", d => xScale(d.possiblePts)) //show goals diff teams.selectAll(".goalDiff") .data(d => [d.record[0]]) //most recent result .join(enter => enter .append("rect") .classed("goalDiff", true) .attr("height",1), update => update, exit => exit.remove()) .attr("x", d => Math.min(goalDiffScale(0), goalDiffScale(d.goalsDiff)) -50) .attr("y", -2) .attr("width", d => Math.abs(goalDiffScale(0) - goalDiffScale(d.goalsDiff))) .attr("stroke", d => (d.goalsDiff >0) ? "#090" : "#900") teams.selectAll(".teamname") .data(d => [d.abbrev]) .join(enter => enter .append("text") .classed("teamname", true) // .attr("height",1), , update => update, exit => exit.remove()) .text(d => d) .attr("dx",-5) // return svg.node() } }) }32:T919,viewof range = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const matchesByDate = d3.groups(matches, d => d.Date) console.log("matches", matchesByDate, matchesByDate.length) console.log([1, d3.max(matchesByDate.map(d => d[1].length))]) //vertical scale - max matches date to height const y = d3.scaleLinear([0, d3.max(matchesByDate.map(d => d[1].length))], [height - margin.bottom, margin.top]) const brush = d3.brushX() .extent([[margin.left, margin.top], [width , height - margin.bottom]]) .on("start brush end", brushed); const days = svg.append("g") .attr("fill-opacity", 0.2) .attr("transform", `translate(0 0)`) .selectAll(".day") .data(matchesByDate) .join(enter => enter.append("g").attr("class", "day"), update => update, exit => exit.remove()) .attr("transform", d => `translate(${x(d[0])}, 0)`) const circle = days .selectAll(".match") .data(d => d[1]) //circles // .join(enter => enter.append("circle").attr("class", "match"), // update => update, // exit => exit.remove()) // .attr("cy", (d,i) => y(i)) // .attr("r", 2) //rectangles .join(enter => enter.append("rect").attr("class", "match"), update => update, exit => exit.remove()) .attr("y", (d,i) => y(i+1)) .attr("width", 2) .attr("height", y(0)-y(1)) svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(xAxis) svg.append("g") .call(brush) .call(brush.move, d3.extent(matches, d => d.Date).map(x)); // disable events on the whole surface svg.select('.overlay').remove(); // disable drag&drop of the selection svg.select('.selection').style('pointer-events', 'none'); // disable handle on the left (handle on the right would be .handle--e) svg.select('.handle--w').style('pointer-events', 'none'); function brushed(event) { const selection = event.selection; if (selection === null) { circle.attr("stroke", null); } else { const [x0, x1] = selection.map(x.invert); console.log(x0,x1) svg.node().value = selection.map(x.invert) svg.node().dispatchEvent(new Event("input", {bubbles: true})); } } return svg.node(); }33:T730,lineGraph = { const xscale = d3.scaleLinear() .domain([0, d3.max(places.map(team => team.record[0]), d => d.goalsFor)]) .range([0,360]) const yscale = d3.scaleLinear() .domain([0, d3.max(places.map(team => team.record[0]), d => d.goalsAgainst)]) .range([360, 0]) const path = d3.line() .x(d => xscale(d.goalsFor)) .y(d => yscale(d.goalsAgainst)) const svg = d3.create("svg").attr("height", 400).attr("width", 800) const container = svg.append("g").attr("id", "pointsovertime") .attr("transform", `translate( ${0}, ${100}) rotate(-45)`) const xaxis = container.append("g") .call(d3.axisBottom(xscale).ticks(6)) .attr("transform", `rotate(0) translate(0,360) `) const yaxis = container.append("g") .call(d3.axisLeft(yscale).ticks(6)) .attr("transform", `rotate(0) translate(0, 0) `) const teams = container.selectAll(".team") .data(places, d => d.team) .join(enter => enter .append("g") .classed("team", true) , update => update, exit => exit.remove()) // .attr("transform", (d,i) => `translate (0, ${yscale(d.team)})`) teams.selectAll(".line") .data(d => [d.record]) .join(enter => enter .append("path") .classed("line", true), // .attr("height",1), update => update, exit => exit.remove()) .attr("d", path) // .attr("dx", 0+50) // .attr("width", d=> d.possiblePts) teams.selectAll(".dot") .data(d => d.record) .join(enter => enter .append("circle") .classed("dot", true) .attr("r",2), update => update, exit => exit.remove()) .attr("cx", d => xscale(d.goalsFor)) .attr("cy", d => yscale(d.goalsAgainst)) return svg.node() }34:T883,pyramid = { const margin = {width:150, height:200, top:30, right:10, bottom:10, left:10} const scaleGoals = d3.scaleLinear([0,8], [0,margin.height-margin.top - margin.bottom]) const scaleR = d3.scaleLinear([0,10], [2,scaleGoals(1)/2]) const svg = d3.create("svg").attr("height", margin.height).attr("width", margin.height* Math.sqrt(3)) const container = svg.append("g").attr("id", "for-against") .attr("transform", `translate( ${margin.height * Math.sqrt(3)/2}, ${margin.top+2/Math.sqrt(3)}) rotate(60)`) const xaxis = container.append("g") .call(d3.axisTop(scaleGoals).ticks(6)) .attr("transform", `rotate(-30) translate(${0}, ${-scaleGoals(1)/2})`) const yaxis = container.append("g") .call(d3.axisLeft(scaleGoals).ticks(6)) .attr("transform", `rotate(0) translate(${-scaleGoals(1)/2}, ${-0})`) const graph = container.append("g") // .attr("transform", `rotate(0) translate(${scaleGoals(1)/2}, ${scaleFor(1)/2}) `) .attr("transform", `rotate(0) translate(0,0) `) const teams = graph.selectAll(".team") .data(forAgainst.slice(0).sort(([a],[b]) => (b == team[0]) ? -1 : (a == team[0]) ? 1 : 0)) .join(enter => enter .append("g") .attr("id", d => d[0]) , update => update,//.select(`#${team[0]}`).raise(), exit => exit.remove()) .attr("fill", d => (d[0] == team[0]) ? "#900" : "#ccc") const selected = d3.select(`#${team[0]}`).raise() console.log(selected) const forMatches = teams.selectAll(".for") .data(d => d[1]) .join(enter => enter .append("g") .classed("for", true) .attr("transform", (d,i) => `translate ( 0, ${scaleGoals(+d[0])}) rotate(-30)`), update => update, exit => exit.remove()) const againstResults = forMatches.selectAll(".against") .data(d => d[1]) .join(enter => enter .append("circle") .classed("against", true) .attr("r", d=> scaleR(d[1].length)), update => update, exit => exit.remove() ) .attr("transform", (d,i) => `translate ( ${scaleGoals(+d[0])}, 0)`) return svg.node() }35:Ta66,matchesToRecords = (acc, matchData, i) => { const teamRecords = { ...acc } // fresh copy of accumulated records object //helper functions const resultPoints = { "H":{ "home": ["win",3], "away": ["loss",0]}, "D":{ "home": ["draw",1], "away": ["draw",1]}, "A":{ "home": ["loss",0], "away": ["win",3]} } const matchGoals = { "home":{ "homeaway":"home", "team":matchData.HomeTeam, "for":matchData.FTHG, "against":matchData.FTAG, "points": resultPoints[matchData.FTR].home }, "away":{ "homeaway":"away", "team":matchData.AwayTeam, "for":matchData.FTAG, "against":matchData.FTHG, "points": resultPoints[matchData.FTR].away } } //return full record for a team, after giving it a new matchData const latestRecord = (teamRecords, matchGoals ) => { //all teams, new match to add //get last match data, or use a dummy if first entry for that team const latest = (teamRecords[matchGoals.team]) ? teamRecords[matchGoals.team][0] : { "win":0, "draw":0, "loss":0, "totalPts":0, "goalsFor":0, "goalsAgainst":0, "goalsDiff":0, "possiblePts":league.matches*3, "played":0 } if (!teamRecords.hasOwnProperty(matchGoals.team)) { teamRecords[matchGoals.team] = [] } //get a new record with the latest, and insert it in the team's record return [updateRecord(matchGoals, latest)].concat(teamRecords[matchGoals.team]) } //return a new record by adding to latest const updateRecord = (matchGoals, latest) => { const nextRecord = { ...latest} console.log(nextRecord) nextRecord[ matchGoals.points[0] ]++ //W, L, D count at that matchday nextRecord.totalPts += matchGoals.points[1] nextRecord.possiblePts -= (3-matchGoals.points[1]) nextRecord.goalsFor += (+matchGoals.for) nextRecord.goalsAgainst += (+matchGoals.against) nextRecord.goalsDiff = +nextRecord.goalsFor - nextRecord.goalsAgainst nextRecord.played++ nextRecord.match_id = i nextRecord.homeaway = matchGoals.homeaway nextRecord.date = matchData.Date nextRecord.result = matchGoals.points[0] nextRecord.matchPoints = matchGoals.points[1] //put each match at the beginning of the array, // return [nextRecord].concat(record[team]) return nextRecord } //update record for home team, by adding to latest record teamRecords[matchData.HomeTeam] = latestRecord(teamRecords, matchGoals["home"]) //update record for away team teamRecords[matchData.AwayTeam] = latestRecord(teamRecords, matchGoals["away"]) // console.log(teamRecords) return teamRecords }36:Tafc,matchesToFA = (acc, matchData, i) => { const teamRecords = { ...acc } // fresh copy of accumulated records object //helper functions const resultPoints = { "H":{ "home": ["win",3], "away": ["loss",0]}, "D":{ "home": ["draw",1], "away": ["draw",1]}, "A":{ "home": ["loss",0], "away": ["win",3]} } //easily grab home or away team properties const matchGoals = { "home":{ "homeaway":"home", "team":matchData.HomeTeam, "for":matchData.FTHG, "against":matchData.FTAG, "points": resultPoints[matchData.FTR].home }, "away":{ "homeaway":"away", "team":matchData.AwayTeam, "for":matchData.FTAG, "against":matchData.FTHG, "points": resultPoints[matchData.FTR].away } } //return a new record by adding to latest const updateRecord = (matchGoals, latest) => { // const nextRecord = { ...latest} // console.log(nextRecord) // nextRecord[ matchGoals.points[0] ]++ //W, L, D count at that matchday // nextRecord.totalPts += matchGoals.points[1] // nextRecord.possiblePts -= (3-matchGoals.points[1]) // nextRecord.goalsFor += (+matchGoals.for) // nextRecord.goalsAgainst += (+matchGoals.against) // nextRecord.goalsDiff = +nextRecord.goalsFor - nextRecord.goalsAgainst // nextRecord.played++ // nextRecord.match_id = i // nextRecord.homeaway = matchGoals.homeaway // nextRecord.date = matchData.Date // nextRecord.result = matchGoals.points[0] // nextRecord.matchPoints = matchGoals.points[1] //put each match at the beginning of the array, // return [nextRecord].concat(record[team]) return matchGoals } //return full record for a team, after giving it a new matchData const latestRecord = (teamRecords, matchGoals ) => { //all teams, new match to add //get last match data, or use a dummy if first entry for that team const latest = (teamRecords[matchGoals.team]) ? teamRecords[matchGoals.team][0] : { "win":0, "draw":0, "loss":0, "totalPts":0, "goalsFor":0, "goalsAgainst":0, "goalsDiff":0, "possiblePts":league.matches*3, "played":0 } if (!teamRecords.hasOwnProperty(matchGoals.team)) { teamRecords[matchGoals.team] = [] } //get a new record with the latest, and insert it in the team's record return [updateRecord(matchGoals, latest)].concat(teamRecords[matchGoals.team]) } //update record for home team, by adding to latest record teamRecords[matchData.HomeTeam] = latestRecord(teamRecords, matchGoals["home"]) //update record for away team teamRecords[matchData.AwayTeam] = latestRecord(teamRecords, matchGoals["away"]) // console.log(teamRecords) return teamRecords }37:T45d,horizontalNav = function(itemData, options) { //unordered list weill be our nav const ul = d3.create("ul").attr("id", options.label || "horizontal-nav") //itemData array will be our nav items const items = ul.selectAll("li") .data(itemData) .join(enter => enter .append("li").append("a") .attr("href", `#${options.label}`) .text(options.format), // d => d.label update => update, exit => exit.remove()) .on("mousedown", function(event) { const selection = d3.select(this) selection.classed("active", true) }) .on("mouseup", function(event) { //reset active state on all items const selection = d3.select(this.parentNode) console.log(selection, d3.select(this)) selection.classed("active", d => d3.select(this) == d) }) .on("click", function(event) { const selection = d3.select(this) ul.node().value = selection.datum() ul.node().dispatchEvent(new Event("input", {bubbles: true})); }) ul.node().value = options.value || items.data()[0] return ul.node() }38:[] 2f:{"title":"Soccer title races","cells":[{"id":0,"value":"# Soccer title races","pinned":false,"hidden":false,"mode":"md"},{"id":861,"value":"viewof league = Inputs.select(leagues, {format: d => d.label, label: \"nav-leagues\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":938,"value":"viewof season = Inputs.select(seasons, {format: d => d.label, label: \"nav-seasons\"})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":180,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":717,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1081,"value":"viewof team = Inputs.select(forAgainst.slice(0), {label: \"Team\", format: d => d[0]})\n\n// viewof team = horizontalNav(forAgainst.slice(0), {label: \"nav-leagues\", format: d => d[0]})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1032,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":1289,"value":"xAxis = d3.axisBottom(x)","pinned":true,"hidden":false,"mode":"ojs"},{"id":723,"value":"margin = {\n return {\n bottom:30, top:10, right:10, left: 10\n}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":728,"value":"height = 100\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":738,"value":"width=400","pinned":false,"hidden":false,"mode":"ojs"},{"id":721,"value":"x = d3.scaleTime(d3.extent(matches, d => d.Date), [margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"md`# Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"yscale = d3.scaleBand()\n .domain(places.map(d => d.team))\n .range([0,400])\n .padding(.2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":531,"value":"places = records.map(d => {\n const obj = {...d}\n // get the most recent record per team, based on date and matchday filter\n obj.record = obj.record\n // .filter(x => (!x.date || x.date) <= matchDate)\n .filter(x => (!x.date || x.date) <= range[1])\n .filter(x => x.played <= matchday)\n \n // obj.record = [obj.record[obj.record.length-1]]\n return obj\n })\n .sort(tableRank)\n // .map(d => d.team)","pinned":false,"hidden":false,"mode":"ojs"},{"id":560,"value":"clinched = {\n return {\n title: places[1].record[0].possiblePts,\n ucl: places[league.ucl_spots].record[0].possiblePts,\n relegation: places[places.length-league.relegation_spots-1].record[0].totalPts,\n eliminated: places[0].record[0].totalPts\n }\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"records = {\n //convert the individual results into a table for the season\n //for each match, assign points and for/against goals, for both home and away teams\n const records = matches.reduce(matchesToRecords, {})\n\n //convert each team's entry to an object\n return Object.entries(records).map(([k,v]) => {\n return {\n \"team\":k, \n \"abbrev\": abbreviate(k),\n \"record\":v}\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1005,"value":"forAgainst = {\n //convert the individual results into a table for the season\n //for each match, assign points and for/against goals, for both home and away teams\n const records = matches.reduce(matchesToFA, {})\n\n //convert each team's entry to an object\n const m = Object.entries(records).map(([k,v]) => {\n return {\n \"team\":k, \n \"abbrev\": abbreviate(k),\n \"record\":v}\n })\n\n \n const teamMatches = (m.map(d => [d.team, d.record]))\n\n return teamMatches.map(d => [d[0], d3.groups(d[1], d => d.for, d => d.against)])\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"//https://github.com/Rob--W/cors-anywhere\nmatches = await d3\n .csv(\n `https://petroleumjelliffe--861398caace611f0be3b0224a6c84d84.web.val.run/?url=%20https://www.football-data.co.uk/mmz4281/${season.path}/${league.path}.csv`,\n {\n headers: {\n origin: \"x-requested-with\"\n }\n }\n )\n .then((data) => {\n return data.map((d) => {\n d.Date = dateFromDDMMYY(d.Date);\n return d;\n });\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1001,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":" //convert euro date to US\n dateFromDDMMYY = date => {\n const from = date.split(\"/\")\n return new Date(from[2],from[1]-1, from[0])\n }\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":310,"value":"tableRank = (a,b) => {\n const pointDiff = b.record[0].totalPts - a.record[0].totalPts\n \n //sort by total points, break ties by goal diff\n return pointDiff ? pointDiff : (b.record[0].goalsDiff - a.record[0].goalsDiff)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"seasons = [\n {\n label: \"2025-2026\",\n path: \"2526\"\n },\n {\n label: \"2024-2025\",\n path: \"2425\"\n },\n {\n label: \"2023-2024\",\n path: \"2324\"\n },\n {\n label: \"2022-2023\",\n path: \"2223\"\n },\n {\n label: \"2021-2022\",\n path: \"2122\"\n },\n {\n label: \"2020-2021\",\n path: \"2021\"\n },\n {\n label: \"2019-2020\",\n path: \"1920\"\n },\n {\n label: \"2018-2019\",\n path: \"1819\"\n },\n {\n label: \"2017-2018\",\n path: \"1718\"\n },\n {\n label: \"2016-2017\",\n path: \"1617\"\n },\n {\n label: \"2015-2016\",\n path: \"1516\"\n },\n {\n label: \"2014-2015\",\n path: \"1415\"\n }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"leagues = [\n {\n label:\"English Premier League\",\n path:\"E0\",\n matches:38, \n ucl_spots:4,\n relegation_spots: 3\n }, {\n label:\"Bundesliga\",\n path:\"D1\",\n matches:34, \n ucl_spots:4,\n relegation_spots:3\n }, {\n label: \"Ligue 1\" ,\n path: \"F1\",\n matches: 38, \n ucl_spots:3,\n relegation_spots:3\n }, {\n label:\"La Liga\" ,\n path: \"SP1\",\n matches:38, \n ucl_spots:4,\n relegation_spots:3\n }, {\n label:\"Seria A\" ,\n path: \"I1\",\n matches:38, \n ucl_spots:3,\n relegation_spots:3\n }]","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"import {objectMap} from \"@petroleumjelliffe/relative-positions-of-sun-and-moon\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":961,"value":"league","pinned":false,"hidden":false,"mode":"ojs"},{"id":931,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"viewof matchday = Inputs.range(\n [0, league.matches], \n {label: \"Matchday\", step:1, value:league.matches})","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"viewof league2 = Inputs.select(leagues, { label: \"League\", format: x => x.label, value: leagues.find(t => t.label === \"English Premier League\")})\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":214,"value":"points = {\n return {\n win:3, draw:1, loss:0}\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":143,"value":"viewof season2 = Inputs.select(seasons, { label: \"Season\", format: x => x.label, value: leagues.find(t => t.label === \"2021-2022\")})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1394,"value":"{\n //updates the graph whenever the data set changes\ntableGraph.update(places, league, clinched)\n\n return `Chart update trick`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":593,"value":"abbreviate = (teamName) => {\n const words = teamName.split(\" \")\n return (words.length > 1) ? words.map(w => w.substring(0, 1)).join(\"\") : teamName.substring(0, 3).toUpperCase() \n\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":316,"value":"viewof matchDate = Inputs.range(\n d3.extent(matches, d => d.Date),\n {label: \"Match Date\", step:1000*60*60*24, value: d3.extent(matches, d => d.Date)[1]})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1332,"value":"import {horizontalNav as hnav} from \"@petroleumjelliffe/inputs\" ","pinned":true,"hidden":false,"mode":"ojs"},{"id":1569,"value":"data = fetch(\n \"https://petroleumjelliffe.github.io/football-results-scraper/football.db\"\n).then((response) => response)","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}