31:T435,{ let svg = d3.select(DOM.svg(width, height)); svg.style("font-family", "sans-serif").style("font-size", 12); let stats = data.slice(0); let histogram = d3.histogram().domain(x.domain()).thresholds(x.ticks(60)).value(d => d.ble); let bins = histogram(stats); y.domain([0, d3.max(bins, d => d.length)]).nice(); bins.forEach(b => { b.bleLost = d3.sum(b, d => !d.didBleWin) b.bleBlownPct = b.bleLost / b.length; }); svg.append('g') .attr('class', 'x-axis') .call(xAxis); svg.append('g') .attr('class', 'y-axis') .call(yAxis); svg.append('g') .attr('class', 'legend') .call(legend); svg.append("g").selectAll("rect") .data(bins) .join("rect") .attr("x", d => x(d.x0) + 1) .attr("width", d => Math.max(0, x(d.x1) - x(d.x0) - 1)) .attr("fill", d => c(d.bleBlownPct)) .attr("y", height) .attr("rx", 2) .attr("ry", 2) .transition().duration(250).delay((d, i) => i * 50) .attr("y", d => y(d.length)) .attr("height", d => y(0) - y(d.length)); return svg.node(); }32:T45f,{ let svg = d3.select(DOM.svg(width, height)); let stats = data.slice(0); svg.style("font-family", "sans-serif").style("font-size", 12); // this is still wrong let histogram = d3.histogram() .domain(t.domain()) .thresholds(t.ticks(50)) .value(d => d.min) let bins = histogram(stats); y.domain([0, d3.max(bins, d => d.length)]).nice(); bins.forEach(b => { b.bleLost = d3.sum(b, d => !d.didBleWin) b.bleBlownPct = b.bleLost / b.length; }); svg.append('g') .attr('class', 't-axis') .call(tAxis); svg.append('g') .attr('class', 'y-axis') .call(yAxis); svg.append('g') .attr('class', 'legend') .call(legend); svg.append("g").selectAll("rect") .data(bins) .join("rect") .attr("x", d => t(d.x0) + 1) .attr("width", d => Math.max(0, t(d.x1) - t(d.x0) - 1)) .attr("fill", d => c(d.bleBlownPct)) .attr("y", height) .attr("rx", 2) .attr("ry", 2) .transition().duration(250).delay((d, i) => i * 50) .attr("y", d => y(d.length)) .attr("height", d => y(0) - y(d.length)); return svg.node(); }33:T449,{ let svg = d3.select(DOM.svg(width, height)); let stats = data.slice(0); svg.style("font-family", "sans-serif").style("font-size", 12); let histogram = d3.histogram() .domain(t.domain()) .thresholds(t.ticks(50)) .value(d => d.min) let bins = histogram(stats); y.domain([0, d3.max(bins, d => d.length)]).nice(); bins.forEach(b => { b.bleLost = d3.sum(b, d => !d.didBleWin) b.bleBlownPct = b.bleLost / b.length; }); svg.append('g') .attr('class', 't-axis') .call(tAxis); svg.append('g') .attr('class', 'y-axis') .call(yAxis); svg.append('g') .attr('class', 'legend') .call(legend); svg.append("g").selectAll("rect") .data(bins) .join("rect") .attr("x", d => t(d.x0) + 1) .attr("width", d => Math.max(0, t(d.x1) - t(d.x0) - 1)) .attr("fill", d => c(d.bleBlownPct)) .attr("y", height) .attr("rx", 2) .attr("ry", 2) // .transition().duration(250).delay((d, i) => i * 50) .attr("y", d => y(d.length)) .attr("height", d => y(0) - y(d.length)); return svg.node(); }34:T436,data = { let url = `https://gist.githubusercontent.com/dysphasia/cdd5703092fc14c0958530b4373f9a49/raw/45fd244a05c18e31561c1e9bf0fa372bb38113d3/00_2_18_biggest-leads.json`; let data = (await (await fetch(url)).json()) .filter(g => g && g.st===3); data.forEach(g => { g.clock = getElapsed(g.e.p, g.e.cl) g.min = Math.floor(g.clock / 60); if (g.v.ble > g.h.ble) { g.ble = g.v.ble; g.blt = 'v'; } else if (g.h.ble > g.v.ble) { g.ble = g.h.ble; g.blt = 'h'; } else { g.ble = g.h.ble; g.blt = 't'; } if (g.v.s > g.h.s) { g.w = 'v'; } else if (g.h.ble > g.v.ble) { g.w = 'h'; } g.wasBleTied = (g.blt==='t'); g.didBleWin = (g.blt===g.w || g.blt==='t'); }); data.mean = d3.mean(data, d=>d.ble).toFixed(1); data.median = d3.median(data, d=>d.ble).toFixed(1); data.bleWon = data.filter(d => d.didBleWin).length; data.bleTied = data.filter(d => d.wasBleTied).length; data.x = 'Biggest Lead'; data.y = 'Number of Games'; return data; }35:[] 2f:{"title":"NBA Biggest Leads and Outcomes","cells":[{"id":0,"value":"md`# NBA Biggest Leads and Outcomes\n\nData is for the 2018-19 Regular Season, as of ${ data.slice(-1)[0].gdte } (_${ data.length } of 1230 games played_)\n\nSource: [NBA Stats](https://stats.nba.com)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"md`## Biggest Lead Stats`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"md`\nAverage: ${ data.mean } Points
\nTied Biggest Leaders: ${ data.bleTied } (${ (data.bleTied*100/data.length).toFixed(1)}%)
\nBiggest Leader Wins (includes ties): ${ data.bleWon } (${ (data.bleWon*100/data.length).toFixed(1)}%)
\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"md`## Distribution of biggest leads`","pinned":false,"hidden":false,"mode":"ojs"},{"id":304,"value":"md`In the first graph we look at the occurences of the largest point margins throughout the season:\n\nWhat is the chance of a blown game for a biggest lead?` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"md`At What point in the game did the biggest lead happen? What is the chance of a blown game depending on time of game?`","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":646,"value":"md`## Heatmap of Biggest Lead vs Time of game and win%`","pinned":false,"hidden":false,"mode":"ojs"},{"id":650,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":681,"value":"md`## Number of Lead Changes in Games`","pinned":true,"hidden":false,"mode":"ojs"},{"id":679,"value":"LeadChangesChart(data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"md`### Code`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"xAxis = g => g.append(\"g\")\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).tickSizeOuter(0).ticks(20))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\")\n .select(function() { return this.parentNode.appendChild(this.cloneNode()); })\n .attr(\"y\", -3)\n .attr(\"dy\", 30)\n .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"end\")\n .text('Biggest Lead'))","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"yAxis = g => g.attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 4)\n .attr(\"y\", -10)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text('Number of Games'))","pinned":false,"hidden":false,"mode":"ojs"},{"id":329,"value":"tAxis = (g) => {\n\n let ps = periods.slice(0, 6);\n \n g.append(\"g\")\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(t).tickSizeOuter(0).tickSize(-height+margin.top+margin.bottom).tickValues(ps.map(d => d.t)))\n .call(g => g.select(\".domain\").remove());\n \n g.selectAll('text')\n .data(ps)\n .text(d => d.label)\n .attr('text-anchor', 'start');\n \n g.selectAll('.tick:last-of-type').remove();\n \n g.selectAll('.tick:last-of-type text') \n .text('OT+'); \n \n g.selectAll('line') \n .attr('stroke', '#aaa')\n .attr('stroke-dasharray', '2 2')\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":389,"value":"legend = (g) => { \n \n let steps = g.selectAll('.step').data(d3.range(0,100,10)).join('g').attr(\"class\", \"step\");\n\n \n g.attr(\"transform\", `translate(${ margin.left }, ${ height - margin.bottom + 30 })`); \n g.append(\"text\").text(\"Chance to win (%)\").attr('dy', -4);\n \n steps.append(\"rect\")\n .attr(\"x\", (d,i) => i*30)\n .attr(\"width\", (d,i) => 30)\n .attr(\"y\", 0)\n .attr(\"height\", 10)\n .attr(\"fill\", d => c((100-d)/100));\n \n steps.append(\"line\")\n .attr(\"x1\", (d,i) => i*30)\n .attr(\"x2\", (d,i) => i*30)\n .attr(\"y1\", 0)\n .attr(\"y2\", 15)\n .attr(\"stroke\", \"#555\"); \n \n steps.append(\"text\")\n .attr(\"x\", (d,i) => i*30)\n .attr(\"dy\", 24)\n .attr(\"text-anchor\", \"middle\")\n .text(d => `${ d }`); \n \n steps.call(g => g.selectAll(\".step:first-of-type text, .step:first-of-type line\").remove());\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"md`### Game Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"periods = {\n \n let periods = d3.range(1,16).map(p => ({\n t: getElapsed(p, null) / 60,\n label: getPeriodLabel(p)\n }));\n \n return periods;\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":325,"value":"function getElapsed (per, clock) {\n let secondsInRegPeriod = 60 * 12;\n let secondsInOTPeriod = 60 * 5;\n\n let time = (per<5) ? (per-1) * secondsInRegPeriod : (secondsInRegPeriod * 4) + ((per-5) * secondsInOTPeriod);\n\n if (clock) {\n let [min, sec] = clock.replace(/[PTS]/g, '').replace('M', ':').split(\":\");\n sec = (+sec) + ((+min) * 60); \n time += (per<5) ? (secondsInRegPeriod - sec) : (secondsInOTPeriod - sec);\n }\n return time;\n}\n \n ","pinned":false,"hidden":false,"mode":"ojs"},{"id":327,"value":"function getPeriodLabel (p) {\n return (p<5) ? `Q${ p }` : `OT${ p-4 }`; \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"md`### Scales`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"x = d3.scaleLinear()\n .range([margin.left, width - margin.right])\n .domain([0,d3.max(data, d => d.ble)]).nice()","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"y = d3.scaleLinear()\n .range([height - margin.bottom, margin.top])\n .nice()","pinned":false,"hidden":false,"mode":"ojs"},{"id":331,"value":"t = d3.scaleLinear()\n .domain([0, 50]) // minutes\n .range([margin.left, width-margin.right])\n .clamp(true)\n .nice(25)","pinned":false,"hidden":false,"mode":"ojs"},{"id":379,"value":"c = d3.scaleSequential(d3.interpolateBlues).domain([1, 0])\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"md`### Settings`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"height = 350","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"margin = ({ top:30, right:35, bottom:70, left:35 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"md`### Data`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"md`### References`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"md`\n[NBA Stats](https://stats.nba.com)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"md`### Libraries`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"d3@5.9.2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":673,"value":"import { LeadChangesChart} from 'eeeee985e79f4620'","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}