30:[] 2e:{"title":"NBA Home vs Away Scores","cells":[{"id":0,"value":"md`# NBA Home vs Away Scores\n\nUsing hexbins and color encoding to visualize the frequency of home vs away team scores. Data is for the **2018-19 Regular Season**, as of March 12th, with _**${ data.length } out of 1230** games played_\n\nSource: [NBA Stats](https://stats.nba.com/schedule/)`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"viewof centerLine = checkbox({\n options: [{ value: \"on\", label: \"Toggle Center Line\" }],\n value: \"on\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"viewof animate = checkbox({\n options: [{ value: \"on\", label: \"Animate Season Progession\" }],\n value: \"on\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"chart = {\n \n const svg = d3.select(DOM.svg(width, height));\n \n svg.append(\"g\")\n .attr(\"class\", \"x-axis\")\n .call(xAxis);\n\n svg.append(\"g\")\n .attr(\"class\", \"y-axis\")\n .call(yAxis);\n\n svg.append(\"g\")\n .attr(\"stroke\", \"#000\")\n .attr(\"stroke-opacity\", 0.1)\n .selectAll(\"path\")\n .data(bins)\n .join(\"path\")\n .attr(\"d\", hexbin.hexagon())\n .attr(\"transform\", d => `translate(${d.x},${d.y})`)\n .attr(\"fill\", d => color(d.length));\n \n if (centerLine) {\n svg.append(\"line\")\n .attr(\"x1\", x(60))\n .attr(\"y1\", y(60))\n .attr(\"x2\", x(170))\n .attr(\"y2\", y(170))\n .attr(\"stroke\", \"#F00\")\n .attr(\"stroke-width\", 3)\n .attr(\"stroke-dasharray\", \"4 2\");\n }\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"md`\nGames Played: ${ schedule.length }
\nHome Team Wins: ${ wins[0] } (${ (wins[0]/schedule.length * 100).toFixed(1) }%)
\nAway Team Wins: ${ wins[1] } (${ (wins[1]/schedule.length * 100).toFixed(1) }%) `","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"data = {\n const url = 'https://gist.githubusercontent.com/dysphasia/3b53432af91f146a7952b1a44e6ada6e/raw/06ab12ca1b5291086bf8a2ba41cd3b9db87e32f3/2018-19-schedule.json';\n \n const data = (await (await fetch(url)).json()).filter(g => +g.st===3)\n \n return data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"schedule = data.slice(0, gameNumber)","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"scores = [d3.min(data, g => Math.min(g.h.s, g.v.s)), d3.max(data, g => Math.max(g.h.s, g.v.s))]","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":" wins = [schedule.filter(g => +g.h.s > +g.v.s).length, schedule.filter(g => +g.v.s > +g.h.s).length]","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"md`### Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${ margin.left },0)`)\n .call(d3.axisLeft(y).tickSizeOuter(0))\n .call(g => g.selectAll(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\")\n .select(function() { return this.parentNode.appendChild(this.cloneNode()); })\n .attr(\"x\", 5)\n .attr(\"y\", -10)\n .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"start\")\n .text('Away Team Score'))","pinned":false,"hidden":false,"mode":"ojs"},{"id":54,"value":"xAxis = g => g.append(\"g\")\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).tickSizeOuter(0))\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('Home Team Score'))","pinned":false,"hidden":false,"mode":"ojs"},{"id":197,"value":"gameNumber = {\n if (animate) {\n let i = 0;\n while (true) {\n if (i > 1500) { \n i=0;\n }\n i += 2;\n yield Promises.delay(40, i);\n }\n } else {\n yield data.length; \n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"md`### Settings`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"height = width","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"width = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"r = 12","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"margin = ({top: 20, right: 20, bottom: 30, left: 40})","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"x = d3.scaleLinear()\n .domain(scores)\n .range([margin.left, width - margin.right]).nice()","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"y = d3.scaleLinear()\n .domain(scores)\n .range([height - margin.bottom, margin.top]).nice()","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"color = d3.scaleSequential(d3.interpolateBuPu)\n .domain([0, d3.max(bins, d => d.length) / 2])","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"hexbin = d3.hexbin()\n .x(d => x(+d.h.s))\n .y(d => y(+d.v.s))\n .radius(r * width / 964)\n .extent([[margin.left, margin.top], [width - margin.right, height - margin.bottom]])","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"bins = hexbin(schedule)","pinned":false,"hidden":false,"mode":"ojs"},{"id":178,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"md`### Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require(\"d3@5\", \"d3-hexbin@0.2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"import {checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}