31:T45c,chart = { const svg = d3.select(DOM.svg(width, height)); svg.style('font-family', 'sans-serif').style('font-size', 12); svg.append('g') .attr('class', 'y-axis') .attr("transform", `translate(${ margin.left },0)`) .call(yAxis); svg.append('g') .attr('class', 'x-axis') .attr("transform", `translate(0,${ height - margin.bottom })`) .call(xAxis) svg.append('g') .attr('class', 'legend') .attr("transform", `translate(${ margin.left }, ${ height - 30 })`) .call(legend); let selection = svg.selectAll('.plot').data(team.filtered, (d, i) => i); selection.join("g") .attr("class", "plot") .call(plot) .merge(selection) .call(update); selection.exit().remove(); svg.selectAll('.median').data([team.filtered]) .join("line") .attr("class", "median") .attr("x1", margin.left) .attr("x2", width - margin.right) .attr("stroke", c('median')) .attr("stroke-width", 3) .attr("stroke-dasharray", "3 3") .attr("y1", (d) => y(d = d.median)) .attr("y2", (d) => y(d = d.median)); return svg.node(); }32:[] 2f:{"title":"NBA Team Scoring Differentials","cells":[{"id":0,"value":"md`# NBA Team Scoring Differentials\n\nTaking a look at NBA team scoring differentials during the 2017-18 Regular Season.\n\nSource: [NBA Stats](https://stats.nba.com/teams/boxscores/?Season=2017-18&SeasonType=Regular%20Season)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"viewof teams = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":168,"value":"viewof outcome = radio({\n description: 'Filter By Outcome',\n options: [\n { label: 'All', value: '' },\n { label: 'Wins', value: 'W' },\n { label: 'Losses', value: 'L' }\n ],\n value: ''\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":161,"value":"viewof location = radio({\n description: 'Filter By Team Location',\n options: [\n { label: 'All', value: '' },\n { label: 'Home', value: 'H' },\n { label: 'Away', value: 'A' }\n ],\n value: ''\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"viewof diff = checkbox({\n options: [{ value: \"true\", label: \"Toggle Differentials\" }],\n value: \"\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"viewof sort = checkbox({\n options: [{ value: \"true\", label: \"Sort Differentials\" }],\n value: \"\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"data = {\n let url = 'https://gist.githubusercontent.com/dysphasia/3a7c42062852bab8f8edbcfc86a86b64/raw/8386e1eb5e06a91879445f4726ca443fb9d896d8/2017-18-gamelogs.json';\n let data = await (await fetch(url)).json();\n \n data.forEach(t => {\n t.games.forEach(g => {\n g.outcome = (g.pts > g.opp) ? 'W' : 'L';\n g.location = (g.title.startsWith('vs')) ? 'H' : 'A';\n g.diff = Math.abs(g.pts - g.opp);\n });\n });\n \n return data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"team = { \n let team = data.find((ts) => ts.team===teams)\n \n team.filtered = team.games.filter(g => {\n let isOutcome = (outcome===\"\") ? true : (g.outcome===outcome);\n let isLocation = (location===\"\") ? true : (g.location===location);\n \n if (diff===\"true\") {\n g.hp = g.pts - Math.min(g.pts, g.opp);\n g.op = g.opp - Math.min(g.pts, g.opp);\n } else {\n g.hp = g.pts;\n g.op = g.opp;\n }\n \n return (isOutcome && isLocation);\n });\n \n x.domain(team.filtered.map((g,i) => i));\n\n if (diff===\"true\") {\n y.domain([0, 70])\n } else {\n y.domain([60, 160]);\n }\n \n if (sort===\"true\") {\n team.filtered.sort((a, b) => b.diff - a.diff);\n }\n \n team.filtered.mean = d3.mean(team.filtered, d => d.diff);\n team.filtered.variance = d3.variance(team.filtered, d => d.diff); \n team.filtered.median = d3.median(team.filtered, d => d.diff); \n team.filtered.deviation = d3.deviation(team.filtered, d => d.diff); \n \n return team;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"md`### Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"plot = (g) => {\n \n let t = d3.transition().duration(500)\n let band = x.bandwidth();\n let halfBand = band / 2;\n \n g.append(\"line\")\n .attr(\"class\", \"guide\")\n .attr(\"stroke\", \"#aaa\")\n .attr(\"x1\", halfBand)\n .attr(\"x2\", halfBand)\n .attr(\"y1\", (d) => y(d.hp))\n .attr(\"y2\", (d) => y(d.op));\n \n g.selectAll('circle').data(d => [d.hp, d.op])\n .join('circle')\n .attr(\"class\", \"opp\")\n .attr(\"cx\", x.bandwidth()/2)\n .attr(\"cy\", (d) => y(d))\n .attr(\"r\", 3)\n .attr(\"fill\", (d,i) => c(i));\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"update = (g) => {\n g.transition()\n .duration(500)\n .attr(\"transform\", (d, i) => `translate(${ x(i) }, 0)`)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"xAxis = (g) => {\n g.call(d3.axisBottom(x))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\"))\n .selectAll('text')\n .attr(\"transform\", \"rotate(90)\")\n .attr(\"x\", 10)\n .attr(\"dy\", -5)\n .style(\"text-anchor\", \"start\");\n\n g.selectAll('.x-axis text')\n .data(team.filtered)\n .text(d => d.title);\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"yAxis = (g) => {\n g.call(d3.axisLeft(y).tickSize(-width+margin.left+margin.right))\n .call(g => g.select(\".domain\").remove());\n \n g.select('.y-axis .tick:last-of-type text')\n .select(function() { return this.parentNode.appendChild(this.cloneNode()); })\n .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"start\")\n .attr(\"dx\", 10) \n .attr(\"dy\", -5) \n .text((diff===\"true\") ? 'SCORE DIFFERENTIAL' : 'SCORE'); \n \n g.selectAll('line')\n .attr('stroke', '#ddd')\n .attr('stroke-dasharray', '2 2');\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":330,"value":"legend = (g) => {\n let key = g.selectAll('.key').data([team.team, 'Opponent'])\n .join('g')\n .attr('class', 'key')\n .attr('transform', (d,i) => `translate(0, ${ i*16 })`);\n\n key.append('circle')\n .attr('r', 5)\n .attr('cx', 0)\n .attr('cy', 0)\n .attr('fill', (d,i) => c(i));\n \n key.append('text')\n .attr('font-weight', 800)\n .attr('x', 8)\n .attr('y', 4)\n .text(d => d.toUpperCase());\n\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"md`### Scales`","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":" x = d3.scaleBand()\n .range([margin.left, width - margin.right])\n .padding(0.5);","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"y = d3.scaleLinear()\n .range([height - margin.bottom, margin.top])\n .domain([60, 160]).nice()","pinned":false,"hidden":false,"mode":"ojs"},{"id":294,"value":"c = d3.scaleOrdinal(d3.schemeSet1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"md`### Settings`","pinned":false,"hidden":false,"mode":"ojs"},{"id":336,"value":"r = 3","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"height = 450","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"margin = ({ top:15, right:10, bottom:90, left:30 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md`### Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@5.9.2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"import {checkbox, radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}