30:T51c,styles = html` `31:[] 2e:{"title":"NBA Game Tracker","cells":[{"id":0,"value":"md`# NBA Game Tracker\n\nAn improvement on the current NBA Lead tracker visualization. Integrating non-scoring events, tooltips, and generating a custom Play By Play & Shotcharts by selecting a range of events. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"viewof toggles = checkbox(eventTypes)","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"{\n const svg = d3.select(DOM.svg(width, height));\n\n /**\n * SVG Gradient\n **/\n svg.append(\"defs\")\n .call(gradient);\n \n\n /**\n * Chart\n **/\n svg.append(\"g\")\n .attr(\"transform\", \"translate(0, .5)\")\n .append(\"path\")\n .data([data])\n .attr(\"d\", line)\n .attr(\"class\", \"lead-tracker\");\n\n \n \n /**\n * Axis\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 \n \n /**\n * Brush\n **/\n\n svg.append(\"g\")\n .attr(\"class\", \"brush\")\n .call(brush)\n \n \n /**\n * circles for filtered events\n **/\n svg.append(\"g\") \n .attr(\"class\", \"events\")\n .attr(\"transform\", \"translate(0, .5)\")\n .call(events); \n \n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"output = html`

\n \n \n \n \n \n \n \n

CLOCK	SCORE	DESC

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"function onBrush () {\n\n // reset selection\n if (!d3.event.sourceEvent || !d3.event.selection) { \n console.log('something');\n return; \n }\n \n let r = d3.event.selection.map(x.invert);\n let selection = data.filter(p => p.t>=r[0] && p.t<=r[1]);\n \n console.log(output);\n output.querySelector('tbody').innerHTML = selection.map(e => {\n return `\n ${ e.dt }\n ${ e.vs } - ${ e.hs }\n ${ e.de }\n `;\n }).join(\"\");\n \n \n // d3.select(output)\n // .data(selection)\n // .enter()\n // .append('div')\n // .attr('innerHTML', d => d.cl);\n \n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"data = {\n let src = `https://gist.githubusercontent.com/dysphasia/f62d11f8ab00164a0ebedac5412dd610/raw/706a58e6ad22a692e70ee96c0e52357cbe474361/0041700403-pbp.json`\n let pbp = await fetch(src).then(resp => resp.json());\n \n let data = pbp.g.pd.reduce((arr, period) => {\n period.pla.forEach(play => {\n play.p = period.p;\n play.t = getElapsed(period.p, play.cl);\n play.diff = play.vs - play.hs;\n play.dt = `${ getPeriodLabel(play.p) } - ${ play.cl }`;\n });\n return arr.concat(period.pla);\n }, []);\n \n let lastPlay = data[data.length-1];\n \n data.push({\n p: lastPlay.p,\n t: getElapsed(lastPlay.p, lastPlay.cl),\n diff: 0\n });\n \n data.htm = { ta: 'CLE', tid: 1610612739, color: '#fdb927' };\n data.vtm = { ta: 'GSW', tid: 1610612744, color: '#860038' }; \n \n return data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"periods = {\n \n let periods = d3.range(1,15).map(p => ({\n t: getElapsed(p, null),\n label: getPeriodLabel(p)\n }));\n \n return periods;\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":270,"value":"eventTypes = [\n { value: 1, label: \"Made Shot\" }, \n { value: 2, label: \"Missed Shot\" },\n { value: 3, label: \"Free Throw\" },\n { value: 4, label: \"Rebound\" },\n { value: 5, label: \"Turnover\" },\n { value: 6, label: \"Foul\"}, \n { value: 9, label: \"Timeout\"},\n { value: 8, label: \"Sub\" }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"md`### Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"tooltip = d3.select(\"body\").append(\"div\")\n .attr(\"class\", \"svg-tooltip\")\n .text(\"\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"function getPeriodLabel (p) {\n return (p<5) ? `Q${ p }` : `OT${ p-4 }`; \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"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.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":263,"value":"events = g => {\n console.log(toggles) \n let evs = data.filter(e => toggles.includes(e.etype+\"\"))\n \n g.selectAll('.event')\n .data(evs)\n .enter()\n .append('g')\n .attr('class', 'event')\n .call(g => g.append('circle')\n .attr('cx', d => x(d.t))\n .attr('cy', d => y(d.diff))\n .attr('r', 3)\n .attr('stroke-width', 1)\n .attr(\"fill\", d => accent(d.etype))\n .attr('stroke', 'white'))\n .attr(\"data-tooltip\", (d) => title(d))\n .on(\"mouseover\", onMouseOver)\n .on(\"mousemove\", onMouseMove)\n .on(\"mouseout\", onMouseOut); \n// .call(g => g.append('circle')\n// .attr('cx', d => x(d.t))\n// .attr('cy', d => y(d.diff))\n// .attr('r', 3)\n// .attr('stroke-width', 1)\n// .attr(\"fill\", d => accent(d.etype))\n// .attr('stroke', 'white'))\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"line = d3.line()\n .curve(d3.curveStepAfter)\n .x(d => x(d.t))\n .y(d => y(d.diff))","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"x = d3.scaleLinear()\n .domain([0, 2880])\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"y = d3.scaleLinear()\n .domain([-20, 20])\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"accent = d3.scaleOrdinal(d3.schemeDark2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"xAxis = g => {\n\n g.append(\"g\")\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).tickSizeOuter(0).tickSize(-height+margin.top+margin.bottom).tickValues(periods.map(d => d.t)))\n .call(g => g.select(\".domain\").remove());\n \n g.selectAll('text')\n .data(periods)\n .text(d => d.label)\n .attr('text-anchor', 'start');\n \n g.selectAll('.tick:last-of-type text') \n .attr('text-anchor', 'end')\n .text('FINAL'); \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"yAxis = g => { \n \n g.append(\"g\")\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y).tickSizeOuter(0).tickSize(-width+margin.left+margin.right).tickFormat(d => Math.abs(d)))\n .call(g => g.select(\".domain\").remove());\n \n g.select(\".tick:last-of-type\")\n .append('text')\n .attr('x', 5)\n .attr('dy', 12)\n .attr('fill', 'black')\n .attr('text-anchor', 'start')\n .text(data.vtm.ta);\n \n g.select(\".tick:first-of-type\")\n .append('text')\n .attr('x', 5)\n .attr('dy', -5)\n .attr('fill', 'black')\n .attr('text-anchor', 'start')\n .text(data.htm.ta); \n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"gradient = g => {\n \n const pctOffset = y(0) / height;\n const offsets = [\n {offset: \"0\", color: data.htm.color},\n {offset: .5, color: data.htm.color},\n {offset: .5, color: data.vtm.color},\n {offset: \"1\", color: data.vtm.color}\n ];\n \n g.append(\"linearGradient\")\n .attr(\"id\", \"team-gradient\")\n .attr(\"gradientUnits\", \"userSpaceOnUse\")\n .attr(\"x1\", 0).attr(\"y1\", 0)\n .attr(\"x2\", 0).attr(\"y2\", 100)\n .selectAll(\"stop\")\n .data(offsets)\n .enter().append(\"stop\")\n .attr(\"offset\", d => d.offset)\n .attr(\"stop-color\", d => d.color);\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"brush = g => {\n \n g.call(d3.brushX()\n .extent([[margin.left, margin.top], [width - margin.right, height - margin.bottom]])\n .on(\"brush\", onBrush)\n .on(\"end\", onBrush));\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"title = d => `${ d.dt} \\n ${ d.de }`","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"md`### Events`","pinned":false,"hidden":false,"mode":"ojs"},{"id":300,"value":"function onMouseOut (d) {\n tooltip.text(\"\");\n d3.selectAll(`circle.outlier[data-pid=\"${ d.pid }\"]`).classed('active', false);\n return tooltip.style(\"visibility\", \"hidden\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":301,"value":"function onMouseMove (d) {\n return tooltip.style(\"top\", (d3.event.pageY-10)+\"px\").style(\"left\",(d3.event.pageX+10)+\"px\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":303,"value":"function onMouseOver (d) {\n tooltip.text(this.dataset.tooltip);\n d3.selectAll(`circle.outlier[data-pid=\"${ d.pid }\"]`).classed('active', true);\n return tooltip.style(\"visibility\", \"visible\");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"md`### Settings`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"margin = ({top: 30, right: 30, bottom: 30, left: 40})","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"height = 350","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"md`### Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":243,"value":"import {checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}