31:T86a,chart = { const svg = d3.select(DOM.svg(width, height)); const period = ["OT", "p3", "p2", "p1"]; svg.append("g").call(xAxis); svg.append("g").call(yAxis); svg .append("path") .datum(data.gameData) .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 1.5) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); svg .append("g") .attr("stroke", "#000") .attr("stroke-opacity", 0.2) .selectAll("circle") .data(data.gameData) .enter() .append("circle") .attr("cx", (d, i) => { return x(data.time[i]); }) .attr("cy", (d, i) => y(d.cumshot)) .attr("fill", d => { // console.log(d.result); if (d.result.event === "Goal" && d.team.name === home) { return "#FF7F0E"; } else if (d.result.event === "Goal" && d.team.name === away) { return "rgb(105, 189, 169)"; } else { return "none"; } }) .attr("r", 4.5); svg .append("g") .call( d3 .axisBottom() .scale(x) .tickValues([60, 40, 20, 0]) .tickFormat(function (d, i) { return period[i]; }) ) .call((g) => g.select(".domain").remove()) .attr("transform", "translate(0," + (height - margin.bottom + 9) + ")") .attr("class", "x line axis"); const label = svg .append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .selectAll("g") .data(data.gameData) .enter() .append("g") .attr("transform", (d, i) => { return `translate(${x(data.time[i])},${y(d.cumshot)})`; }); // .attr("opacity", 10); label .append("text") .text(d => { if (d.result.event === "Goal") { // console.log(d.players[0].player); return d.players[0].player.fullName.split(" ")[1]; } }) .each(function(d) { // console.log(d.players); const t = d3.select(this); t.attr("text-anchor", "middle").attr("dy", "-0.7em"); }); svg .selectAll(".x line") .attr("y1", -height) .style("stroke", "#ddd"); return svg.node(); }32:T4ad,data = { let countDown = []; let counter = 0; const shotsGoals = livefeed.liveData.plays.allPlays .filter(d => d.result.event === "Shot" || d.result.event === "Goal") .map((d, i) => { if (d.team.name === home) { counter += 1; } else { counter -= 1; } d.cumshot = counter; if (d.about.period === 1) { d.gameTime = moment.duration("00:" + d.about.periodTime).asSeconds(); } else if (d.about.period === 2) { d.gameTime = moment.duration("00:" + d.about.periodTime).asSeconds() + moment.duration("00:20:00").asSeconds(); } else if (d.about.period === 3) { d.gameTime = moment.duration("00:" + d.about.periodTime).asSeconds() + moment.duration("00:40:00").asSeconds(); } else if (d.about.period === 4) { d.gameTime = moment.duration("00:" + d.about.periodTime).asSeconds() + moment.duration("00:60:00").asSeconds(); } countDown.push(d.gameTime / 60); // d.gameTime = 60 - Number(d.gametime) / 60; return d; }); return { y: "Shot Differential", gameData: shotsGoals, time: countDown }; }33:T424,yAxis = g => g .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) .call(g => g .select(".tick:last-of-type text") .clone() .attr("x", 3) .attr("text-anchor", "start") .attr("font-weight", "bold") .attr("font-size", "1.6em") .style("fill", "#FF7F0E") .text(livefeed.liveData.linescore.teams.home.team.abbreviation) ) .call(g => g .select(".tick:first-of-type text") .clone() .attr("x", 3) .attr("text-anchor", "start") .attr("font-weight", "bold") .attr("font-size", "1.6em") .style("fill", "rgb(105, 189, 169)") .text(livefeed.liveData.linescore.teams.away.team.abbreviation) ) .call(g => g .selectAll(".tick line") .filter(d => d === 0) .clone() .attr("x2", width - margin.right - margin.left) .attr("stroke", "#ccc") ) .attr("transform", `translate(${margin.left},0)`)34:[] 2f:{"title":"NHL Live Game Stats","cells":[{"id":0,"value":"md`# NHL Live Game Stats`","pinned":false,"hidden":false,"mode":"ojs"},{"id":813,"value":"html`

${\n livefeed.liveData.linescore.teams.home.team.abbreviation\n} ${livefeed.liveData.linescore.teams.home.goals} \n${\n livefeed.liveData.linescore.teams.away.team.abbreviation\n} ${livefeed.liveData.linescore.teams.away.goals}

Period ${\n livefeed.liveData.linescore.currentPeriod\n}. ${livefeed.liveData.linescore.currentPeriodTimeRemaining}

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":924,"value":"md`*In Game Shot differential*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":345,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1283,"value":"md`Select any game`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1146,"value":"viewof gameNum = dropdown(todayGames.dates[0].games)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1347,"value":"md`... from (almost) any year`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1300,"value":"viewof d = {\n if (new Date().getHours() <= 17) {\n return date(\n moment(new Date())\n .add(-1, 'days')\n .format(\"YYYY-MM-DD\")\n );\n } else {\n return date(moment(new Date()).format(\"YYYY-MM-DD\"));\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1308,"value":"md`\n---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1238,"value":"function dropdown(options) {\n let dd = html`