32:T7ad,md` **NOTE: this notebook has lots of functionality and might take up to 5 seconds to load before the page becomes responsive. The functionality is also somewhat limited on mobile. Please, be patient and check it out on desktop for the full experience.** This notebook displays play sequences (drives or possessions) for all 2009-2019 regular season [NFL](https://en.wikipedia.org/wiki/National_Football_League) drives as an interactive [Sunburst chart](https://datavizcatalogue.com/methods/sunburst_diagram.html). Each play is represented by an arc with colors corresponding to different play types. Sequences are put together by traversing concentric circles from the center outward. The angle span of each arc represents the count of plays with the corresponding sequence of previous plays. Learn more about the NFL dataset below the graph. Explore the graph by: * **hovering over arcs** to display sequence paths * **clicking on arcs** to select paths * **double-clicking on arcs** to zoom in on them and see following plays * **double-clicking on the center circle** to zoom out one step at a time or **on path arrows** on the right to zoom out to the corresponding plays * **right-clicking or long-clicking on arcs** to see distributions of sequence and event property values under the chart * **selecting properties in the "color arcs by" dropdown** to see median values for numeric properties and frequencies of most common values for categorical ones * **dragging arcs to the "target sequences" box on the left** to mark corresponding sequences as "happy"/"sad" and be able to color arcs by the probability of being on "happy"/"sad" paths * **dragging arcs to the "start" box of the path view on the right** to set the denominator of the % numbers to the count of that arc * **using the "Rules to filter & modify sequences" widget** to filter, extract sub-sequences, replace, combine and split sequences (see explanation how to use it below the graph). `33:T549,viewof arcColors = { // set up html const html = d3.create("html"); const element = html.node(); element.value = 'name'; html.append('div') .style('width', '100%') .style('font', '700 0.9rem sans-serif') .html('Color arcs by:'); const selectorRow = html.append('div') .style('width', '100%'); selectorRow.append('div') .style('display', 'inline-block') .html(''); selectorRow.select('#color-schema').on('change', () => { element.value = selectorRow.select('#color-schema').node().value; element.dispatchEvent(new CustomEvent("input")); }); selectorRow.append('button') .style('display', 'inline-block') .text('Clear target sequences') .on('click', () => { selectorRow.select('#color-schema').node().value = 'name'; defaultState.targetSequences = []; state.targetSequences = []; element.value = 'name'; element.dispatchEvent(new CustomEvent("input")); }); return element; }34:T4c8,{ if (arcColors == 'name') { let colors = color; colors.domain(eventNames); return swatches({ color: color, columns: "150px" }); } else if (arcColors == 'prob-value') { return legend({ color: d3.scaleSqrt([0, 1], [d3.interpolateBlues(0.2), d3.interpolateBlues(1)]), title: "Target sequence probability at current step", tickFormat: "%" }); } else if (arcColors == 'prob-change') { return legend({ color: d3.scaleDiverging([-1, 0, 1], d3.scaleSqrt().domain([0, 0.5, 1]).range(['red', 'lightgrey', 'green'])), title: "Change in target sequence probability from previous step", tickFormat: "+%" }); } else if (dataHierarchy.data.prop_type == 'numeric') { return legend({ color: d3.scaleSequential(dataHierarchy.data.color_range, [d3.interpolateOranges(0.2), d3.interpolateOranges(1)]), title: "Mean property value", ticks: 8 }); } else { // categorical property values return legend({ color: d3.scaleSqrt(dataHierarchy.data.color_range, [d3.interpolatePurples(0.2), d3.interpolatePurples(1)]), title: "Frequency of the most common property value", tickFormat: "%" }); } }35:T5f55,viewof sunburstChart = { // reset default state values, so they don't draw from url params when interactionRules and other input params are changed defaultState.selectedPathNodeId = null; defaultState.zoomNodeId = 1; defaultState.displayPropertyNodeId = null; defaultState.displayPropertyName = ''; // prep data dataHierarchy.each(d => d.current = { x0: d.x0, x1: d.x1, y0: d.y0, y1: d.y1 }); let hoveredPath = []; let selectedPath = []; let zoomNode = dataHierarchy; let visibleNodes = dataHierarchy.descendants().filter(d => arcVisible(d.current)); let isDragged = false; let clickTimestamp = Date.now(); let clickTimer = null; let notMovedOnLongClick = false; let hasDoubleClicked = false; let addedTargetSequencesWithoutRefresh = false; // set up svg const svg = d3.create("svg") .attr("viewBox", [0, 0, diameter + 100 + breadcrumbWidth + 100, diameter]) .style("font", "12px sans-serif"); // set up logic to trigger updates in other cells (ex: shareable url) on state changes const element = svg.node(); element.value = true; // create element to hold arcs corresponding to data events / hierarchy nodes const gSunburst = svg.append("g") .attr("transform", `translate(${diameter/2},${diameter/2})`); const sunburst = gSunburst.append("g"); // create path percentage/volume label at the center of the sunburst const label = gSunburst.append("text") .attr("fill", "black") .attr("text-anchor", "middle") .attr("pointer-events", "none") .style("user-select", "none") .style("-moz-user-select", "none") .style("-webkit-user-select", "none"); label .append("tspan") .classed("percentage", true) .attr("x", 0) .attr("y", 0) .attr("dy", "-0.1em") .attr("font-size", "3em") .text(((100 * zoomNode.data.node_count) / dataHierarchy.data.node_count).toPrecision(3) + "%"); label .append("tspan") .classed("count", true) .attr("x", 0) .attr("y", 0) .attr("dy", "1.5em") .text(`(${zoomNode.data.node_count})`); // create breadcrumbs base element const gBreadcrumbs = svg.append("g") .attr("transform", `translate(${diameter+100},0)`); // create target sequences drop zone element const gTargetSeqZone = svg.append("g"); gTargetSeqZone.append("rect") .classed("target-seq-zone", true) .attr("width", 160) .attr("height", 25) .attr("fill", "none") .attr("stroke", "none"); const targetSeqLabel = gTargetSeqZone.append('text') .classed('target-seq-label', true) .attr("text-anchor", "middle") .style("user-select", "none") .style("-moz-user-select", "none") .style("-webkit-user-select", "none"); // create right-click (also activated on long-click) menu for selecting properties to explore const gRightClickMenu = svg.append("foreignObject") .attr("x", 0) .attr("y", 0) .attr("width", 210) .attr("height", 210) .attr("display", "none") .html(""); const divRightClickMenu = gRightClickMenu.select("div.right-click-menu") .style('height', '200px') .style('width', '200px') .style('background', 'white') .style('border', '2px solid #CCC') .style('padding', '2px') .style('overflow-y', 'scroll') .style('-webkit-overflow-scrolling', 'touch'); let rightClickedNode = null; for (let p of propertyNames) { divRightClickMenu.append("div") .classed('event-property', p.startsWith('ev.') ? true : false) .style('cursor', 'pointer') .style("user-select", "none") .style("-moz-user-select", "none") .style("-webkit-user-select", "none") .html(p) .on("mouseenter mouseover", (event) => { d3.select(event.currentTarget).style('background', '#DEF'); }) .on("mouseleave mouseout", (event) => { d3.select(event.currentTarget).style('background', 'white'); }) .on("click", (event) => { gRightClickMenu.attr("display", "none"); state.displayPropertyName = d3.select(event.currentTarget).text(); element.dispatchEvent(new CustomEvent("input")); rightClickedNode = null; }); } if (!!state.displayPropertyNodeId) { // add striped pattern for coloring right-clicked / long-clicked node svg.insert("defs").html(''); } svg.on("click", (event) => { let path = event.path || (event.composedPath && event.composedPath()); // make path prop browser-compatible if (!!rightClickedNode && !path.includes(d3.select(".right-click-menu").node())) { if (notMovedOnLongClick) { notMovedOnLongClick = false; return; } gRightClickMenu.attr("display", "none"); svg.selectAll("path") .filter((d) => (d && d.hasOwnProperty('data') && (d.data.node_id == state.displayPropertyNodeId))) .attr("fill", visibleNodes.filter(n => (n.data.node_id == state.displayPropertyNodeId))[0].data.color); svg.selectAll("defs").remove(); state.displayPropertyNodeId = null; state.displayPropertyName = ''; element.dispatchEvent(new CustomEvent("input")); rightClickedNode = null; drawArcs(visibleNodes, svg.transition().duration(0)); } return; }); // draw sunburst and transition to the initial state dataHierarchy.each(d => d.target = { x0: d.x0, x1: d.x1, y0: d.y0, y1: d.y1 }); const t = svg.transition().duration(0); drawArcs(visibleNodes, t); drawSunburstLabel(dataHierarchy); drawBreadcrumbs([dataHierarchy]); drawTargetSequencesZone(); t.end() .then(() => { // if initial state doesn't have "root" as the central node, transition to the new central node if (state.zoomNodeId != 1) { return doDoubleClickAction(dataHierarchy.descendants().filter(n => (n.data.node_id == state.zoomNodeId))[0], true); } }) .then(() => { // if initial state has a path selected... if (state.selectedPathNodeId != null) { // ...first hover over this path... doMouseEnterAction(null, dataHierarchy.descendants().filter(n => (n.data.node_id == state.selectedPathNodeId))[0]); // ...then click on on the path leaf node doClickAction(null, dataHierarchy.descendants().filter(n => (n.data.node_id == state.selectedPathNodeId))[0]); } }); // handle hovering "on" event to highlight corresponding path function doMouseEnterAction(event, d0) { if (rightClickedNode) { return; } if (selectedPath.length == 0) { hoveredPath = d0.ancestors().reverse(); sunburst.selectAll("path") .attr("fill-opacity", d => hoveredPath.indexOf(d) >= 0 ? 1 : 0.3); drawSunburstLabel(d0); drawBreadcrumbs(hoveredPath); } } // handle hovering "off" event to highlight corresponding path function doMouseLeaveAction(event, d0) { if (rightClickedNode) { return; } if (selectedPath.length == 0) { hoveredPath = zoomNode.ancestors().reverse(); sunburst.selectAll("path") .attr("fill-opacity", 1); drawSunburstLabel(zoomNode); drawBreadcrumbs(hoveredPath); } } // handle clicks to select a path function doClickAction(event, d0) { // don't process clicks if right-click menu is open or user has double-clicked if (rightClickedNode || hasDoubleClicked) { return; } if (selectedPath.length == 0) { selectedPath = d0.ancestors().reverse(); state.selectedPathNodeId = d0.data.node_id; element.dispatchEvent(new CustomEvent("input")); sunburst.selectAll("path") .filter(d => selectedPath.indexOf(d) >= 0) .attr("stroke", "black"); drawBreadcrumbs(selectedPath); } else { sunburst.selectAll("path") .filter(d => selectedPath.indexOf(d) >= 0) .attr("stroke", "none"); selectedPath = []; state.selectedPathNodeId = null; element.dispatchEvent(new CustomEvent("input")); sunburst.selectAll("path") .filter(d => d == d0) .dispatch("mouseenter"); } } // handle double-clicks to zoom Sunburst in/out on a path function doDoubleClickAction(d0, isInitialSunburstLoading) { if (rightClickedNode) { return; } hasDoubleClicked = true; // mark the start of the double-click event to prevent processing it as a click return new Promise(resolve => { if (!isInitialSunburstLoading) { // remove path selection if it was set sunburst.selectAll("path") .filter(d => selectedPath.indexOf(d) >= 0) .attr("stroke", "none"); selectedPath = []; state.selectedPathNodeId = null; } // assign spacial transition targets to all nodes data dataHierarchy.each(d => d.target = { x0: Math.max(0, Math.min(1, (d.x0 - d0.x0) / (d0.x1 - d0.x0))) * 2 * Math.PI, x1: Math.max(0, Math.min(1, (d.x1 - d0.x0) / (d0.x1 - d0.x0))) * 2 * Math.PI, y0: Math.max(0, d.y0 - d0.depth), y1: Math.max(0, d.y1 - d0.depth) }); // identify new visible nodes let newVisibleNodes = dataHierarchy.descendants().filter(d => arcVisible(d.target)); // animate arc changes const t = svg.transition().duration(750); drawArcs(newVisibleNodes, t); // animate label changes label.transition(t) .attr("fill", (d3.hsl(d0.data.color).l > 0.25) ? "black" : "white"); // update data and breadcrumbs t.on("end", () => { zoomNode = d0; state.zoomNodeId = d0.data.node_id; element.dispatchEvent(new CustomEvent("input")); visibleNodes = dataHierarchy.descendants().filter(d => arcVisible(d.target)); drawSunburstLabel(zoomNode); drawBreadcrumbs(d0.ancestors().reverse()); dataHierarchy.each(d => { d.current = d.target; }); hasDoubleClicked = false; // mark the end of the double-click event to unblock processing future clicks }); t.end().then(() => { resolve(); } ); }); } // handle right clicks to review sequence and event properties function doRightClickAction(event, d0) { event.preventDefault(); if (!!state.displayPropertyNodeId) { svg.selectAll("defs").remove(); svg.selectAll("path") .filter((d) => (d && d.hasOwnProperty('data') && (d.data.node_id == state.displayPropertyNodeId))) .attr("fill", dataHierarchy.descendants().filter(n => (n.data.node_id == state.displayPropertyNodeId))[0].data.color); } rightClickedNode = d0; state.displayPropertyNodeId = rightClickedNode.data.node_id; state.displayPropertyName = ''; svg.insert("defs").html(''); svg.selectAll("path") .filter((d) => (d && d.hasOwnProperty('data') && (d.data.node_id == state.displayPropertyNodeId))) .attr("fill", "url(#stripePattern)"); divRightClickMenu.selectAll('.event-property') .style("display", ['start', 'end'].includes(d0.data.name) ? "none" : "block"); divRightClickMenu.node().scrollTop = 0; gRightClickMenu .attr("x", event.pageX) .attr("y", (event.offsetY > 300) ? (event.offsetY - 200) : event.offsetY) .attr("display", "block"); } // handle starting dragging a Sunburst node function dragStarted(event, d0) { d3.select(this).classed('drag-start-node', true); d0.data.draggedNode = d3.select(this).node().cloneNode(false); d0.data.draggedNode.id = 'dragged-node'; d0.data.dragStartPos = [event.x, event.y]; isDragged = true; drawBreadcrumbs(); drawTargetSequencesZone(); // special handling to support right-click behavior on touch devices via long-click notMovedOnLongClick = true; clickTimer = setTimeout(clickTimerCallback.bind(null, d0, event.x, event.y), 500); } function clickTimerCallback(d0, x, y) { clickTimer = null; if (notMovedOnLongClick) { // touched for 500ms and moved finger by very little, so probably wanted to long-click d3.select('.drag-start-node').dispatch("contextmenu"); dragEnded({x: x, y: y}, d0); } d3.select('.drag-start-node').classed('drag-start-node', false); } // handle dragging a Sunburst node function dragged(event, d0) { svg.node().appendChild(d0.data.draggedNode); d3.select("#dragged-node").attr("stroke", "black").attr("transform", () => `translate(${event.x-d0.data.dragStartPos[0]+diameter/2},${event.y-d0.data.dragStartPos[1]+diameter/2})`); if (notMovedOnLongClick && ((Math.abs(event.x-d0.data.dragStartPos[0])>10) || (Math.abs(event.y-d0.data.dragStartPos[1])>10))) { notMovedOnLongClick = false; } } // handle ending dragging a Sunburst node function dragEnded(event, d0) { // special handling to support right-click behavior on touch devices via long-click if (clickTimer) { // drag ended before 500ms to trigger long-click clearTimeout(clickTimer); clickTimer = null; d3.select('.drag-start-node').classed('drag-start-node', false); notMovedOnLongClick = false; } // hack for touch devices to support double-click, which breaks when adding support for drag events // dragged twice for <=500ms and moved finger by very little, so probably wanted to double-click if ((Date.now()-clickTimestamp<=500) && (Math.abs(event.x-d0.data.dragStartPos[0])<=10) && (Math.abs(event.y-d0.data.dragStartPos[1])<=10)) { doDoubleClickAction((d0.data.node_id == zoomNode.data.node_id) ? (d0.parent || dataHierarchy) : d0); } clickTimestamp = Date.now(); d3.selectAll("#dragged-node").remove(); delete d0.data.dragStartPos; delete d0.data.draggedNode; if ((event.x <= (-diameter/2+160)) && (event.y <= (-diameter/2+25))) { // dropped node onto target sequences drop zone defaultState.targetSequences = [...new Set(defaultState.targetSequences.concat( d0.leaves().reduce((acc, curr) => acc.concat(curr.data.seq_ids), []) ))]; // special handling of the targetSequences parameter to avoid reversing it to default value when interaction rules change state.targetSequences = defaultState.targetSequences; addedTargetSequencesWithoutRefresh = true; element.dispatchEvent(new CustomEvent("input")); } if ((event.x >= (diameter/2+100)) && (event.y <= (-diameter/2+breadcrumbHeight+10))) { // dropped node onto breadcrumbs defaultState.baseCount = d0.data.node_count; // special handling of the baseCount parameter to avoid reversing it to default value when interaction rules change state.baseCount = defaultState.baseCount; element.dispatchEvent(new CustomEvent("input")); } isDragged = false; drawBreadcrumbs(); drawTargetSequencesZone(); } // draw and animate arcs of the Sunburst function drawArcs(nodes, t) { sunburst .selectAll("path") .data(nodes, d => d.data.node_id) // match nodes to arcs on data.node_id .join( // append newly visible arcs enter => enter.append("path") .attr("fill", d => d.data.color) .attr("fill-opacity", 0) .attr("pointer-events", "none") .style("cursor", "initial") .attr("d", d => arc(d.current)) .on("mouseenter mouseover", doMouseEnterAction) .on("mouseleave mouseout", doMouseLeaveAction) .on("click", doClickAction) .on("dblclick", (event, d) => doDoubleClickAction((d.data.node_id == zoomNode.data.node_id) ? (d.parent || dataHierarchy) : d)) .on("contextmenu", doRightClickAction) .call(d3.drag() .on("start", dragStarted) .on("drag", dragged) .on("end", dragEnded) ), // keep arcs, which stay visible through the transition update => update, // animate out arcs, which become invisible in the new state exit => exit .call(node => node.transition(t).remove() .tween("data", d => { const i = d3.interpolate(d.current, d.target); return t => d.current = i(t); }) .attr("fill-opacity", 0) .attrTween("d", d => () => arc(d.current)) ) ) // animate newly entered and updated arcs to the new state .call(node => node.transition(t) .tween("data", d => { const i = d3.interpolate(d.current, d.target); return t => d.current = i(t); }) .attr("fill-opacity", 1) .attr("pointer-events", "all") .style("cursor", d => "pointer") .attrTween("d", d => () => arc(d.current)) ); // color arc with displayed property into the striped pattern if (!!state.displayPropertyNodeId) { svg.selectAll("path") .filter((d) => (d && d.hasOwnProperty('data') && (d.data.node_id == state.displayPropertyNodeId))) .attr("fill", 'url(#stripePattern)'); } } // draw informational label at the center of the sunburst function drawSunburstLabel(d0) { let valueText, supplementaryText; if (arcColors == "name") { // display percent of the start node volume valueText = (100 * d0.data.node_count / dataHierarchy.data.node_count).toPrecision(3) + "%"; supplementaryText = `(${d0.data.node_count})`; } else if (arcColors == "prob-value") { // display target sequence probability at provided node valueText = (100 * d0.data.color_value).toPrecision(3) + "%"; supplementaryText = ''; } else if (arcColors == "prob-change") { // display change in target sequence probability from previous step valueText = (100 * d0.data.color_value).toPrecision(3) + "%"; supplementaryText = ''; } else if (dataHierarchy.data.prop_type == 'numeric') { // display median of numerical property values valueText = (d0.data.color_value) ? d0.data.color_value.toPrecision(3) : ''; supplementaryText = ''; } else { // display frequency of categorical property values valueText = (d0.data.color_value) ? (100 * d0.data.color_value).toPrecision(3) + "%" : ''; supplementaryText = d0.data.largest_prop_values.join(', '); } label .select(".percentage") .text(valueText); label .select(".count") .text(supplementaryText); } // draw breadcrumbs to show details about the corresponding path function drawBreadcrumbs(path) { if (!path) { path = visibleNodes.filter(n => (n.data.node_id == (state.selectedPathNodeId ? state.selectedPathNodeId : state.zoomNodeId)))[0].ancestors(); } else { // reverse path to properly display stroke of the first nodes when zoomed in path.reverse(); } // draw polygons for nodes gBreadcrumbs .selectAll("polygon") .data(path) .join("polygon") .attr("transform", (d, i) => `translate(0,${(path.length-i-1)*breadcrumbHeight})`) .attr("points", (d, i, p) => breadcrumbPoints(d, i, p)) .attr("fill", d => color(d.data.name)) .attr("stroke", "white") .attr("stroke-width", 1) .style("cursor", "pointer") .on("dblclick", (event, d) => doDoubleClickAction(d)); // add labels inside polygons d3.selectAll(".breadcrumb-labels").remove(); const finalBaseCount = (state.baseCount) ? state.baseCount : dataHierarchy.data.node_count; const breadcrumbLabels = gBreadcrumbs .selectAll("text") .data(path) .join("text") .classed("breadcrumb-labels", true) .attr("transform", (d, i) => `translate(0,${(path.length-i-1)*breadcrumbHeight})`) .attr("text-anchor", "middle") .attr("pointer-events", "none") .style("user-select", "none") .style("-moz-user-select", "none") .style("-webkit-user-select", "none") .attr("fill", d => (d3.hsl(color(d.data.name)).l > 0.25) ? "black" : "white"); breadcrumbLabels.append("tspan") .attr("x", breadcrumbWidth / 2) .attr("y", breadcrumbHeight / 2) .attr("dy", 12) .text(d => d.data.name); breadcrumbLabels.append("tspan") .attr("x", breadcrumbWidth / 6) .attr("y", breadcrumbHeight / 2) .attr("dy", 7) .text(d => ((100 * d.data.node_count) / finalBaseCount).toPrecision(3) + "%"); breadcrumbLabels.append("tspan") .attr("x", 5 * breadcrumbWidth / 6) .attr("y", breadcrumbHeight / 2) .attr("dy", 7) .text(d => d.data.node_count); // highlight path of the center node when Sunburst is zoomed in const zoomNodeAncestors = zoomNode.ancestors().reverse(); gBreadcrumbs.selectAll("polygon") .filter(d => zoomNodeAncestors.indexOf(d) >= 0) .attr("stroke", "black"); // highlight drag drop target while dragging if (isDragged) { gBreadcrumbs.selectAll("polygon") .filter(d => d == dataHierarchy) .attr("stroke", "red") .attr("stroke-width", 2); } // add base count information gSunburst.selectAll('.base-count-label').remove(); if (state.baseCount) { const baseCountLabel = gSunburst.append('text') .classed('base-count-label', true) .attr("transform", () => `translate(${diameter/2+20},${-diameter/2})`) .attr("text-anchor", "middle") .style("user-select", "none") .style("-moz-user-select", "none") .style("-webkit-user-select", "none"); baseCountLabel.append('tspan').attr('x', 0).attr('y', 10).text('base count'); baseCountLabel.append('tspan').attr('x', 0).attr('y', 20).text(state.baseCount); baseCountLabel.append('tspan').attr('x', 0).attr('y', 30).text('(remove)') .style("cursor", "pointer") .on("mouseenter mouseover", (event) => { d3.select(event.currentTarget).attr('fill', 'red'); }) .on("mouseleave mouseout", (event) => { d3.select(event.currentTarget).attr('fill', 'black'); }) .on("click", () => { gSunburst.selectAll('.base-count-label').remove(); defaultState.baseCount = null; // special handling of the baseCount parameter to avoid reversing it to default value when interaction rules change state.baseCount = defaultState.baseCount; element.dispatchEvent(new CustomEvent("input")); drawBreadcrumbs(); }); } } // display drop zone and information about target sequences function drawTargetSequencesZone() { gTargetSeqZone.select('.target-seq-zone') .attr("stroke", isDragged ? "red" : "none") .attr("stroke-width", isDragged ? 2 : 0); targetSeqLabel.selectAll('tspan').remove(); if (isDragged) { targetSeqLabel.append('tspan').attr('fill', 'red').attr('x', 80).attr('y', 10).text("target sequences"); targetSeqLabel.append('tspan').attr('fill', 'red').attr('x', 80).attr('y', 20).text("drop zone"); } else if (['prob-value', 'prob-change'].includes(arcColors) && (state.targetSequences.length == 0)) { targetSeqLabel.append('tspan').attr('fill', 'red').attr('x', 80).attr('y', 10).text("drag arcs here to"); targetSeqLabel.append('tspan').attr('fill', 'red').attr('x', 80).attr('y', 20).text("set target sequences"); } else if (addedTargetSequencesWithoutRefresh && ['prob-value', 'prob-change'].includes(arcColors)) { targetSeqLabel.append('tspan').attr('fill', 'red').attr('x', 80).attr('y', 10).text("switch color arcs input above"); targetSeqLabel.append('tspan').attr('fill', 'red').attr('x', 80).attr('y', 20).text("to display new probabilities"); } else if (state.targetSequences.length > 0) { targetSeqLabel.append('tspan').attr('x', 80).attr('y', 10).text('target sequences'); targetSeqLabel.append('tspan').attr('x', 80).attr('y', 20).text(state.targetSequences.length); } } return element; }36:Td62,// add property value histogram { if (sunburstChart && !!state.displayPropertyNodeId && !!state.displayPropertyName) { // calculate property values const propertyType = state.displayPropertyName.split('.')[0]; const propertyName = state.displayPropertyName.split('.')[1]; const matchedNode = dataHierarchy.descendants().filter(n => (n.data.node_id == state.displayPropertyNodeId))[0]; const matchedSeqIds = matchedNode.leaves().reduce((acc, curr) => acc.concat(curr.data.seq_ids), []); const matchedSeqs = dataModifiedSequences.filter(seq => matchedSeqIds.includes(seq._id)); let propValues; if (propertyType == 'seq') { propValues = matchedSeqs.map(seq => seq[propertyName]); } else { const matchedEventIdx = matchedNode.ancestors().length - 2; // don't count itself and start nodes propValues = matchedSeqs.map(seq => seq.events[matchedEventIdx][propertyName]); } let cleanPropValues = propValues.filter(p => !!p); let numEmptyValues = propValues.length - cleanPropValues.length; // display property values if (propValues.length == 1) { // matched only 1 sequence - display all properties return matchedSeqs[0]; } else if (cleanPropValues.length > 1) { if (cleanPropValues.every(p => !isNaN(p))) { // numerical property cleanPropValues = cleanPropValues.map(p => { return {value: p}; }); return vl.markBar() .width(width-100) .data(cleanPropValues) .encode( vl.x().fieldQ('value').bin({maxbins: 100}).title(state.displayPropertyName + ' values'), vl.y().count('value').title('count + ' + numEmptyValues + ' empty values'), vl.tooltip().count('value') ) .render(); } else { // nominal/categorical property let setPropValues = {}; let numPropValues = 0; for (let prop of cleanPropValues) { if (setPropValues.hasOwnProperty(prop)) { setPropValues[prop] += 1; } else { setPropValues[prop] = 1; numPropValues += 1; } } let numNotDisplayedValues = 0; if (numPropValues > 100) { numNotDisplayedValues = cleanPropValues.length; cleanPropValues = Object.keys(setPropValues).map(p => [p, setPropValues[p]]) .sort((a, b) => (b[1] - a[1])).slice(0, 100).map(p => { return {value: p[0], count: p[1]}; }); numNotDisplayedValues -= cleanPropValues.reduce((acc, curr) => (acc + curr.count), 0); } else { cleanPropValues = Object.keys(setPropValues).map(p => { return {value: p, count: setPropValues[p]}; }); } return vl.markBar() .data(cleanPropValues) .encode( vl.x().fieldN('value').sort(vl.sum('count').order('descending')).title(state.displayPropertyName + ' values'), vl.y().fieldQ('count').title('count + ' + numEmptyValues + ' empty & ' + numNotDisplayedValues + ' not shown values'), vl.tooltip('count') ) .render(); } } else { // didn't match any sequences with non-null values return html`All matched ${state.displayPropertyName} values are NULL`; } } else { return html`Select property to view by right-clicking on any arc in the graph above`; } }37:T57e,shareableUrl = { if (sunburstChart) { let currentUrlParams = new URLSearchParams(''); for (let prop in state) { if ((JSON.stringify(state[prop]) != JSON.stringify(defaultState[prop])) || (prop == 'baseCount')) { if (prop == 'interactionRules') { // special handling of the complex interactionRules parameter currentUrlParams.set(prop, JSON.stringify(state[prop])); } else if (prop == 'baseCount') { // special handling of the baseCount parameter to avoid reversing it to default value when interaction rules change if (!!state[prop]) { currentUrlParams.set(prop, state[prop]); } } else { currentUrlParams.set(prop, state[prop]); } } } currentUrlParams.sort(); const html = d3.create('html') .attr("width", width); html.append('div') .style('font', '700 0.9rem sans-serif') .style('margin-bottom', '3px') .html('Shareable URL:'); const parent = html.append('div') .style("overflow-x", "scroll") .style("-webkit-overflow-scrolling", "touch"); parent.append('code') .style('white-space', 'nowrap') .html(`${'https://observablehq.com/@mikpanko/nfl-plays-sunburst-chart' + ((currentUrlParams.toString().length) ? ('?' + currentUrlParams.toString()) : '')}`); return html.node(); } }38:T3099,md` ## Description of the sequence query language The syntax of the query language is inspired by [pattern encoding in the graph query language Cypher](https://neo4j.com/docs/cypher-manual/current/syntax/patterns/) and [regular expressions](https://en.wikipedia.org/wiki/Regular_expression) but is tailored toward sequence data and hopefully simpler to learn and use. It is probably not as powerful as the languages above but that was not a goal of this exercise. The focus here is on usability rather than formal logic or performance. Note: all SPACES in query strings are ignored, so you can add them as you please for better readability. ### 1. Matching events **"()"** - matches any one event (play) **"(:pass)"** - matches one event called "pass" ("_eventName" event property) **"(:pass|:run)"** - matches one event called "pass" OR "run" **"(!:pass)"** - matches one event NOT called "pass" **"({pass_location=left, yards_gained>=3, play_result!=first_down|second_down})"** - matches one event with properties: "pass_location" equal to "left", "yards_gained" greater or equal 3 and "play_result" not equal "first_down" or "second_down". Supported operators include: "==", "=" and ":" (all represent "equal"), "!=", ">", "<", ">=" and "<=". **"[3]\\(:pass)"** - matches 3 events called "pass" in a row **"[0..3]\\(:pass)"** - matches 0 to 3 events called "pass" in a row **"[2..]\\(:pass)"** - matches 2 to more events called "pass" in a row **"[..4]\\(:pass)"** - matches 0 to 4 events called "pass" in a row **"[..]\\(:pass)"** - matches any number of events called "pass" in a row Basically, an event match pattern consists of "[...]" part encoding the possbile count of events followed by "(...)" part encoding the constraints of each event. If "[...]" part is missing, it defaults to one event ("[1]"). If "(...)" part is missing, it defaults to any event ("()"). All the above rules can be combined IN THE ORDER INTRODUCED ABOVE, for example: **"[1..2]\\(!:touchdown|:turnover|:punt {yards_gained<5, play_result!=first_down|second_down})"**. ### 2. Matching sequences of events **"[2..3]"** - matches any event subsequences of length 2 to 3 events To match a sequence of different events, separate them with one or more "-" symbols: **"(:pass)-(:run)"** - matches one event called "pass" immediately followed by one event called "run" **"[2]\\(:pass)-[..3]-(:touchdown)"** - matches two events called "pass" later followed by one event called "touchdown" with any events in between but no more than 3 of them To match the start or end of a sequence, use "|" symbol: **"|-(:pass)"** - matches one event called "pass" at the start of a sequence **"(:touchdown)-|"** - matches one event called "touchdown" at the end of a sequence There are a few rules for specifying whether a match should represent a whole sequence or only some part of it: **"-(:pass)"** - matches any sequences, which have one event called "pass" ANYWHERE inside, but ends the match at that event (equivalent to "|-[..]-(:pass)") **"(:pass)-"** - starts a match from event called "pass" but a sequence can have other events before it **"-(:pass)-(^:run)-$"** - starts a match from event called "run" but a sequence has to have an event called "pass" immediately before it **"^-($:pass)-(:run)-"** - ends a match at event called "pass" but a sequence has to have an event called "run" immediately after it **"(:pass)-[1..3]\\(^$:run)-(:touchdown)"** - matches only a 1-3 event sub-sequence of events called "run" but the sequence has to have the corresponding events before and after Similar to event properties, it is possible to specify sequence properties: **"-()- {{pos_team!=NE|SF, home_score>=10}}"** - matches all sequences (drives), where team possessing the ball was not "NE" or "SF" and the score of the home team was 10 or more. Sequence properties need to be placed at the end of a match pattern and be encompassed by double curly brackets These double curly brackets is also the place to change matching parameters: **"(:pass) {{_whereToMatch=_FIRST}}"** - extracts only the FIRST matched "pass" event for each sequence. Default value is "_ALL", which extracts ALL matches in a sequence, so it can split a sequence into several sub-sequences **"(!:pass)-(!:pass) {{_allowOverlaps=true}}"** - extracts all pairs of 2 non-pass plays in a row including overlapping ones (if "_whereToMatch" equals "_ALL"). Default value is "false", which starts the next match within a sequence after the end of a previous match Sequences match pattern syntax is easy to master, apply and read; nevertheless, it provides a powerful interface to express a wide range of sequence questions. Here are a few examples for the NFL play data: * 4th quarter drives where New England quarterback was sacked: **"-({quarter=4, play_result=sack})- {{pos_team=NE}}"** * three-and-out drives: **"|-[3]-(:punt)-|"** * touchdown drives without a single run: **"|-[..]\\(!:run)-(:touchdown)-|"** * splitting drives into first-down sub-sequences: **"({down=1})-[..]\\({down!=1})"** ### 3. Cross-referencing between events The query language supports referencing earlier events in a match pattern to compare different events between each other. For this, first you need to tag some matched event with a "custom name", which has to start with "@": **"(@ev :pass)"** - assigns "@ev" custom name to the matched event (its regular name is "pass") Later in the match pattern you can reference tagged event to compare event names and event property values: **"(@ev)-(:@ev)"** - the first and the second matched events have to have the same names **"(@ev)-({yards_gained=@ev|3})"** - the "yards_gained" property value of the second matched event has to equal to the "yards_gained" name of the first matched event or equal to 3 The full power of tagging and referencing events is explained in "Modifying sequences" and "Adding arbitrary code" sections below. ### 4. Combining match patterns into rules To further increase the number of addressable sequence questions, match patterns can be combined via logical AND, NOT and OR rules. This can be intuitively done in the rules widget (rulesWidget() function) and works as follows: **matchPattern1 AND matchPattern2**: in order, matches "matchPattern1", extracts the matches into a new set of sequences, matches it to "matchPattern2" and extracts the matches into the final set of sequences. In the rules widget AND operator is applied by adding new rules. **NOT matchPattern**: matches "matchPattern" and then filters original sequences to those, which did NOT match. In the rules widget NOT operator is applied by clicking "not" button below a match pattern. Here is an example of a match pattern for sequences, which don't contain two run plays in a row: **NOT** **"[2]\\(:run)"**. **matchPattern1 OR matchPattern2**: in order, matches original sequences to "matchPattern1", extracts the matches into a new set of sequences, matches original sequences to "matchPattern2", extracts the matches into another set of sequences and then assembles a union of the 2 extracted sets of sequences. Duplicates are removed. If _allowOverlaps=false in both match patterns, overlapping results between the 2 extracted sets of sequences are removed as well. In the rules widget OR operator is applied by clicking "or" button below a match pattern. Here is an example of a match pattern for sequences, which contain 3 runs or 3 passes in a row: **"-[3]\\(:run)-"** **OR** **"-[3]\\(:pass)-"**. ### 5. Modifying sequences Great power in exploring sequences and discovering insights can come from being able to modify sequences on the fly by replacing, combining, splitting or removing certain sub-sequences according to specified rules and then querying the new set. This can be done in the rules widget by clicking "replace" button below a match pattern and constructing a "replace pattern", which ties to the match pattern. The rule will replace all sub-sequences matched in the match pattern with the new sub-sequences constructed from the replace pattern. The match pattern should not allow matches to overlap (_allowOverlaps=false). Replace pattern overall follows the same syntax as the match patterns but cannot have any ambiguity: event counts, event names, event property values and sequence property values all need to be explicitly set to concrete or referenced values. Here is an example of collapsing first down sequences into a single event and copying over "play_attempt" property value from the first event: Match pattern: **"(@ev {down=1})-[..]\\({down!=1})"** Replace pattern: **"(:first_down_seq {play_attempt=@ev})"** There are also the following replace pattern shorthands: **"(ALL@ev)"** - copy over all events with custom name "@ev" matched to the match pattern **"(REVERSE@ev)"** - copy over all events with custom name "@ev" matched to the match pattern in the REVERSE order **"({@ev})"** - copy over all event properties from an event with custom name "@ev" matched to the match pattern **"-"** - replace with nothing, effectively removing matched sub-sequences. ### 6. Adding arbitrary javascript code Occasionally, using sequence query rules might be not sufficient to filter to desired sequences to answer a data exploration question. This can happen when we need complex event- or sequence-level property matching or modifications, for example, computing timestamp difference between events. In such cases, there is a possibility to add javascript code into match or replace patterns, which can reference custom names of the matched events and perform arbitrary computations. Javascript code can be injected in the same pattern slots as event- and sequence-level properties and needs to be encompassed by the "#" symbol. Here is a list of variables addressable in the javascript code: * **seq** - object containing all sequence-level properties * **@...** - list of events (objects) matched to the match pattern, referenced by their custom names. For example, for a set of 3 consecutive matched events with the custom name "@ev", javascript code can access the "play_result" property value of the first matched event as "@ev[0].play_result" * **nSeq** - object referencing a newly created sub-sequence by a replace pattern. Only accessible in the sequence-level properties section of replace patterns * **nEv** - object referencing a newly created event by a replace pattern. Only accessible in the event-level properties section of replace patterns. Javascript code in match and replace patterns has notable differences: * in match patterns, javascript code can only be added to the sequence-level properties section of a pattern and evaluate to a boolean condition (return true or false) * in replace patterns, javascript code can go into the event- or sequence-level properties sections and should assign values to nSeq and nEv properties. Here is an example of a match pattern with javascript code to filter NFL drives to the ones lasting 10 minutes or longer and consisting of 20 or more plays: **"|-(@a)-[..]-(@b)-| {{#(@b[0].timestamp - @a[0].timestamp >= 600) && (seq.events.length >= 20)#}}"**. Here is an example of a match+replace patterns to split "pass" plays into "pass_left", "pass_right", "pass_middle" and "pass" (when pass was attempted but direction was not known): Match pattern: **"(@ev:pass)"** Replace pattern: **"({@ev, #nEv._eventName = (@ev[0].pass\\_location) ? ('pass\\_'+@ev[0].pass\\_location) : 'pass'#})"**. `39:T1eff,// re-organize data into an hierarchy to plot dataHierarchy = { // build hierarchy of nodes and assign data values const rootNode = { name: "start", node_id: 1, node_depth: 0, node_count: 0, target_count: 0, prop_values: [], prop_values_all: [], color_values_all: [], children: [] }; const propertyLevel = arcColors.startsWith('ev.') ? 'ev' : (arcColors.startsWith('seq.') ? 'seq' : 'none'); const propertyName = ['ev', 'seq'].includes(propertyLevel) ? arcColors.split('.')[1] : null; let nextId = 2; let children, foundChild, currentNode, isTargetSeq; for (let seq of dataModifiedSequences) { currentNode = rootNode; isTargetSeq = state.targetSequences.includes(seq._id); for (let i = 0; i < seq.events.length; i++) { children = currentNode.children; // add current event into the hierarchy foundChild = false; let childNode = null; // check if current event already exists as a child node for (let j = 0; j < children.length; j++) { if (children[j].name == seq.events[i]._eventName) { childNode = children[j]; childNode.node_count += 1; childNode.target_count += isTargetSeq ? 1 : 0; if (propertyLevel == 'seq') { childNode.prop_values.push(seq[propertyName]); } else if (propertyLevel == 'ev') { childNode.prop_values.push(seq.events[i][propertyName]); } foundChild = true; break; } } // if current event doesn't exist as a child node, create it if (!foundChild) { childNode = { name: seq.events[i]._eventName, node_id: nextId, node_depth: currentNode.node_depth + 1, node_count: 1, target_count: isTargetSeq ? 1 : 0, prop_values: propertyLevel == 'seq' ? [seq[propertyName]] : (propertyLevel == 'ev' ? [seq.events[i][propertyName]] : []), children: [] }; children.push(childNode); nextId += 1; } if (propertyLevel == 'seq') { rootNode.prop_values_all.push(seq[propertyName]); } else if (propertyLevel == 'ev') { rootNode.prop_values_all.push(seq.events[i][propertyName]); } currentNode = childNode; } // at the end of a sequence close off with the "end" event and count children = currentNode.children; // if "end" event already exists as a child node, increment count by 1 foundChild = false; for (let j = 0; j < children.length; j++) { if (children[j].name == 'end') { children[j].value += 1; children[j].node_count += 1; children[j].seq_ids.push(seq._id); children[j].target_count += isTargetSeq ? 1 : 0; if (propertyLevel == 'seq') { children[j].prop_values.push(seq[propertyName]); } foundChild = true; break; } } // if "end" event doesn't exist as a child node, create it and set count to 1 if (!foundChild) { children.push({ name: 'end', node_id: nextId, node_depth: currentNode.node_depth + 1, node_count: 1, seq_ids: [seq._id], target_count: isTargetSeq ? 1 : 0, prop_values: propertyLevel == 'seq' ? [seq[propertyName]] : [], value: 1 }); } // update root node properties if (propertyLevel == 'seq') { rootNode.prop_values.push(seq[propertyName]); } nextId += 1; } // fill out data values for the root node for (let j = 0; j < rootNode.children.length; j++) { rootNode.node_count += rootNode.children[j].node_count; rootNode.target_count += rootNode.children[j].target_count; } if (rootNode.prop_values_all.length > 0) { rootNode.prop_type = Number.isFinite(d3.min(rootNode.prop_values_all)) ? 'numeric' : 'categorical'; } else { rootNode.prop_type = 'none'; } delete rootNode.prop_values_all; // partition data const hierarchy = d3.hierarchy(rootNode) .sum(d => d.value) .sort((a, b) => b.value - a.value); let partitionedData = d3.partition() .size([2 * Math.PI, hierarchy.height + 1]) (hierarchy); // compute property values for nodes if coloring by prop values partitionedData.each(d => { if (arcColors == 'name') { // color by event names d.data.color_value = d.data.name; } else if (arcColors == 'prob-value') { // color by target sequence probability at current step d.data.color_value = d.data.target_count / d.data.node_count; } else if (arcColors == 'prob-change') { // color by change in target sequence probability from previous step let dp = (d.ancestors().length > 1) ? d.ancestors()[1] : d; d.data.color_value = d.data.target_count / d.data.node_count - (dp.data.target_count / dp.data.node_count); } else { // color by property values d.data.prop_values = d.data.prop_values.filter(v => v != null); if (d.data.prop_values.length == 0) { d.data.color_value = null; if (partitionedData.data.prop_type == 'categorical') { d.data.largest_prop_values = []; } } else if (partitionedData.data.prop_type == 'numeric') { d.data.color_value = d3.mean(d.data.prop_values); if (d.data.node_count >= minNodeCountForColor) { partitionedData.data.color_values_all.push(d.data.color_value); } } else { let prop_value_counts = {}; let largest_prop_values = []; let largest_count = 0; for (let val of d.data.prop_values) { if (prop_value_counts.hasOwnProperty(val)) { prop_value_counts[val] += 1; } else { prop_value_counts[val] = 1; } if (prop_value_counts[val] > largest_count) { largest_prop_values = [val]; largest_count = prop_value_counts[val]; } else if (prop_value_counts[val] == largest_count) { largest_prop_values.push(val); } } d.data.color_value = largest_count / d.data.node_count; d.data.largest_prop_values = (largest_prop_values.length <= 3) ? largest_prop_values : [largest_prop_values.length + ' most common values']; if (d.data.node_count >= minNodeCountForColor) { partitionedData.data.color_values_all.push(d.data.color_value); } } } delete d.data.prop_values; }); if (partitionedData.data.color_values_all.length > 0) { partitionedData.data.color_range = d3.extent(partitionedData.data.color_values_all); } delete partitionedData.data.color_values_all; // add colors to nodes let colorMapping; if (arcColors == 'name') { // color by event names colorMapping = color; } else if (arcColors == 'prob-value') { // color by target sequence probability at current step colorMapping = d3.scaleSqrt() .domain([0, 1]) .range([d3.interpolateBlues(0.2), d3.interpolateBlues(1)]); } else if (arcColors == 'prob-change') { // color by change in target sequence probability from previous step colorMapping = d3.scaleSqrt() .domain([-1, 0, 1]) .range(['red', 'lightgrey', 'green']); } else if (partitionedData.data.prop_type == 'numeric') { // color by numeric property value colorMapping = d3.scaleLinear() .domain(partitionedData.data.color_range) .range([d3.interpolateOranges(0.2), d3.interpolateOranges(1)]); } else { // color by categorical property value colorMapping = d3.scaleSqrt() .domain(partitionedData.data.color_range) .range([d3.interpolatePurples(0.2), d3.interpolatePurples(1)]); } partitionedData.each(d => { if (d.data.color_value == null) { d.data.color = d3.color('lightgrey'); } else { d.data.color = colorMapping(d.data.color_value); } }); return partitionedData; }3a:T5b1,// breakdown list of events into sequences dataSequences = { let data = []; let currentSequenceTag = null; let currentSequenceId = 0; let currentSequence = { events: [] }; let seqProperties = ['game_id', 'home_team', 'away_team', 'pos_team', 'drive', 'home_score', 'away_score']; let removeProperties = ['kicker_player_name', 'kick_returner_player_name', 'blocked_player_name', 'qb_hit_player_names', 'pass_defense_player_names']; for (let playEvents of dataEvents) { let play = Object.assign({}, playEvents); if (currentSequenceTag != play.game_id + '-' + play.drive) { // save current sequence if (currentSequence.events.length > 0) { data.push(Object.assign({}, currentSequence)); } // start a new sequence currentSequenceTag = play.game_id + '-' + play.drive; for (let prop of seqProperties) { currentSequence[prop] = play[prop]; delete play[prop]; } currentSequenceId += 1; currentSequence._id = currentSequenceId; for (let prop of removeProperties) { delete play[prop]; } currentSequence.events = [play]; } else { // continue current sequence for (let prop of seqProperties) { delete play[prop]; } for (let prop of removeProperties) { delete play[prop]; } currentSequence.events.push(play); } } data.push(currentSequence); return data; }3b:Ta31,// assign event names to each play dataEvents = { let data = []; let passDistance = ''; let driveEnd = false; for (let playRaw of dataRaw) { let play = Object.assign({}, playRaw); if (['punt', 'field_goal'].includes(play.play_attempt)) { play._eventName = play.play_attempt; data.push(play); driveEnd = true; } else if (play.play_attempt == 'qb_scramble') { //play._eventName = 'qb_scramble'; play._eventName = 'qb_keep'; data.push(play); driveEnd = false; } else if (['qb_kneel', 'qb_spike'].includes(play.play_attempt)) { //play._eventName = 'qb_kneel/spike'; play._eventName = 'qb_keep'; data.push(play); driveEnd = false; } else if (play.play_attempt == 'pass') { //if (play.pass_location) { // passDistance = (play.air_yards >= 20) ? 'long' : 'short'; // play._eventName = 'pass_' + passDistance + '_' + play.pass_location; //} else { play._eventName = 'pass'; //} data.push(play); driveEnd = false; } else if (play.play_attempt == 'run') { //if (play.run_location) { // play._eventName = 'run_' + play.run_location; //} else { play._eventName = 'run'; //} data.push(play); driveEnd = false; } let playEnd = Object.assign({}, playRaw); if (play.play_result == 'touchdown') { playEnd._eventName = 'touchdown'; data.push(playEnd); driveEnd = true; } else if (['interception', 'safety', 'fumble_lost', 'return_touchdown', 'turnover_on_downs'].includes(play.play_result)) { //playEnd._eventName = play.play_result; playEnd._eventName = 'turnover'; data.push(playEnd); driveEnd = true; } else if (['end_quarter_2', 'end_game'].includes(play.play_type) && !driveEnd) { playEnd._eventName = 'end_half'; data.push(playEnd); driveEnd = true; } } // kickoff - remove, as teams don't control it // pass_ - pass_location (left/middle/right), air_yards (short/long) // run_ - run_location (left/middle/right), run_gap (tackle/guard/end) // qb_kneel/spike // qb_scramble // punt // field_goal // extra_point // two_point_conversion // touchdown - additional event at the end // interception - additional event at the end // safety - additional event at the end // fumble_lost - additional event at the end // return_touchdown - additional event at the end // turnover_on_downs - additional event at the end // end_half - additional event at the end // non-plays - remove return data; }3c:T746,dataRaw = { let dataJoin = []; for (let year of yearsCheckbox) { if (!dataRawAll.hasOwnProperty(`data${year}`)) { if (year == '2019') { dataRawAll.data2019 = d3.csvParse(await FileAttachment(`nfl_reg_pbp_2019_small.csv`).text(), d3.autoType); } else if (year == '2018') { dataRawAll.data2018 = d3.csvParse(await FileAttachment(`nfl_reg_pbp_2018_small.csv`).text(), d3.autoType); } else if (year == '2017') { dataRawAll.data2017 = d3.csvParse(await FileAttachment(`nfl_reg_pbp_2017_small.csv`).text(), d3.autoType); } else if (year == '2016') { dataRawAll.data2016 = d3.csvParse(await FileAttachment(`nfl_reg_pbp_2016_small.csv`).text(), d3.autoType); } else if (year == '2015') { dataRawAll.data2015 = d3.csvParse(await FileAttachment(`nfl_reg_pbp_2015_small.csv`).text(), d3.autoType); } else if (year == '2014') { dataRawAll.data2014 = d3.csvParse(await FileAttachment(`nfl_reg_pbp_2014_small.csv`).text(), d3.autoType); } else if (year == '2013') { dataRawAll.data2013 = d3.csvParse(await FileAttachment(`nfl_reg_pbp_2013_small.csv`).text(), d3.autoType); } else if (year == '2012') { dataRawAll.data2012 = d3.csvParse(await FileAttachment(`nfl_reg_pbp_2012_small.csv`).text(), d3.autoType); } else if (year == '2011') { dataRawAll.data2011 = d3.csvParse(await FileAttachment(`nfl_reg_pbp_2011_small.csv`).text(), d3.autoType); } else if (year == '2010') { dataRawAll.data2010 = d3.csvParse(await FileAttachment(`nfl_reg_pbp_2010_small.csv`).text(), d3.autoType); } else if (year == '2009') { dataRawAll.data2009 = d3.csvParse(await FileAttachment(`nfl_reg_pbp_2009_small.csv`).text(), d3.autoType); } } dataJoin = dataJoin.concat(dataRawAll[`data${year}`]); } return dataJoin; }3d:[{"id":"802cb4fdd3f08e473e371ca9c564f1ebadbfbd9f7e9fdc27a33dca7e39391f0d81539e6f1474f581b8f03f0292d490a74e7e53ded7f23b29a1373ca62a954bdd","href":"https://static.observableusercontent.com/files/802cb4fdd3f08e473e371ca9c564f1ebadbfbd9f7e9fdc27a33dca7e39391f0d81539e6f1474f581b8f03f0292d490a74e7e53ded7f23b29a1373ca62a954bdd","name":"nfl_reg_pbp_2019_small.csv","type":"text/csv","lastModified":1591662692896.096,"size":12940547},{"id":"c01087a49853dc4707ffb0d5d424734ddc639213927210dd9a32070338cbaf417853ee4831699bbdd9998d4cc6043c4ee2f5c74b65f2f80922648aa7ea2407e5","href":"https://static.observableusercontent.com/files/c01087a49853dc4707ffb0d5d424734ddc639213927210dd9a32070338cbaf417853ee4831699bbdd9998d4cc6043c4ee2f5c74b65f2f80922648aa7ea2407e5","name":"nfl_reg_pbp_2009_small.csv","type":"text/csv","lastModified":1591949295117.667,"size":12574104},{"id":"f6f1e2e486df8bf395bc0484a35803e89183b3eb1e6ee908f85fbb2a26a08293b87e5c25a0f34d8455d003e8b9a9ddc4239ff11005ddc68f0646335da1b6c9a6","href":"https://static.observableusercontent.com/files/f6f1e2e486df8bf395bc0484a35803e89183b3eb1e6ee908f85fbb2a26a08293b87e5c25a0f34d8455d003e8b9a9ddc4239ff11005ddc68f0646335da1b6c9a6","name":"nfl_reg_pbp_2011_small.csv","type":"text/csv","lastModified":1591949230217.559,"size":12733934},{"id":"c26937d99118ada8960a1113750f8373c3b11e6139d2646ca3e7eae6e1643ac694e6f1e6d422e22281fe59cd28f01b42df72d936e7c22c0ee60338602442ba72","href":"https://static.observableusercontent.com/files/c26937d99118ada8960a1113750f8373c3b11e6139d2646ca3e7eae6e1643ac694e6f1e6d422e22281fe59cd28f01b42df72d936e7c22c0ee60338602442ba72","name":"nfl_reg_pbp_2012_small.csv","type":"text/csv","lastModified":1591949230213.439,"size":12860320},{"id":"75d3f26ff085070fe4621535725d6decf026eb909d5a318e6083567898fb74243279e6e3be21b1a897863a42cc52431c99ae75fdfa6f3538d0ab340962375493","href":"https://static.observableusercontent.com/files/75d3f26ff085070fe4621535725d6decf026eb909d5a318e6083567898fb74243279e6e3be21b1a897863a42cc52431c99ae75fdfa6f3538d0ab340962375493","name":"nfl_reg_pbp_2014_small.csv","type":"text/csv","lastModified":1591949230552.439,"size":12941520},{"id":"6b2b7c5080cead0264b3b10ee93cc5134bbfe9f41331096a8574748241bcf4dfb94e29dc43f8f81e7869c694a371d6177ea1709ec349e32acefbd1da183686e8","href":"https://static.observableusercontent.com/files/6b2b7c5080cead0264b3b10ee93cc5134bbfe9f41331096a8574748241bcf4dfb94e29dc43f8f81e7869c694a371d6177ea1709ec349e32acefbd1da183686e8","name":"nfl_reg_pbp_2013_small.csv","type":"text/csv","lastModified":1591949230448.42,"size":12922633},{"id":"0dc79aa38fb5aa8e1a2161360e4f2b20686ff447e5d554fbdc34afc3bf218cb1d64257800dee306af4b825de7786a1a355b89fb87ca9497f42b4f88f7d183e42","href":"https://static.observableusercontent.com/files/0dc79aa38fb5aa8e1a2161360e4f2b20686ff447e5d554fbdc34afc3bf218cb1d64257800dee306af4b825de7786a1a355b89fb87ca9497f42b4f88f7d183e42","name":"nfl_reg_pbp_2015_small.csv","type":"text/csv","lastModified":1591949169609.193,"size":13155123},{"id":"320314e06bc52573422b21b39527040ce9b215793383bb400db05c1945b0818f20f79f8d3599d2eccb814373ae16de45f909de0da24800727cdd3f5f5d1f3ffa","href":"https://static.observableusercontent.com/files/320314e06bc52573422b21b39527040ce9b215793383bb400db05c1945b0818f20f79f8d3599d2eccb814373ae16de45f909de0da24800727cdd3f5f5d1f3ffa","name":"nfl_reg_pbp_2016_small.csv","type":"text/csv","lastModified":1591949169685.642,"size":13023672},{"id":"22b56158acecb6e6e0dfc5601f88c6f12f8ea7ef252bbc9ca32870f92f23a9dcba3d40dcb1d8f1d41055e8d267db5cb38702c4fc6a6b297b74f073888aa2b5fc","href":"https://static.observableusercontent.com/files/22b56158acecb6e6e0dfc5601f88c6f12f8ea7ef252bbc9ca32870f92f23a9dcba3d40dcb1d8f1d41055e8d267db5cb38702c4fc6a6b297b74f073888aa2b5fc","name":"nfl_reg_pbp_2010_small.csv","type":"text/csv","lastModified":1591949229582.604,"size":12643582},{"id":"70690c63d87f5cf4940ae9cf2a53b14c64d831fcc11508382471bbe4e839a9d1da3c31e53e6b50e09086d0b1af712e6994c8fee49051760c0c0efa61772daa23","href":"https://static.observableusercontent.com/files/70690c63d87f5cf4940ae9cf2a53b14c64d831fcc11508382471bbe4e839a9d1da3c31e53e6b50e09086d0b1af712e6994c8fee49051760c0c0efa61772daa23","name":"nfl_reg_pbp_2018_small.csv","type":"text/csv","lastModified":1591949169385.381,"size":12795718},{"id":"480dfed90c539051d46997603bfd427fc1e466c69990361d69236b5f30b3069a2eb260455cd0037b918eb0415a410961c0530ff1962c24f6d3afbc6cf2ecc2c0","href":"https://static.observableusercontent.com/files/480dfed90c539051d46997603bfd427fc1e466c69990361d69236b5f30b3069a2eb260455cd0037b918eb0415a410961c0530ff1962c24f6d3afbc6cf2ecc2c0","name":"nfl_reg_pbp_2017_small.csv","type":"text/csv","lastModified":1591949169339.308,"size":12834767}] 30:{"title":"NFL Plays - Interactive Sunburst Chart","cells":[{"id":1019,"value":"md`# NFL Plays - Interactive Sunburst Chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":2458,"value":"md`------------`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3073,"value":"md`## Data Visualization: NFL drives as sequences of plays`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1115,"value":"viewof yearsCheckbox = checkbox({\n title: \"NFL seasons to visualize:\",\n options: [\n { value: \"2019\", label: \"2019\" },\n { value: \"2018\", label: \"2018\" },\n { value: \"2017\", label: \"2017\" },\n { value: \"2016\", label: \"2016\" },\n { value: \"2015\", label: \"2015\" },\n { value: \"2014\", label: \"2014\" },\n { value: \"2013\", label: \"2013\" },\n { value: \"2012\", label: \"2012\" },\n { value: \"2011\", label: \"2011\" },\n { value: \"2010\", label: \"2010\" },\n { value: \"2009\", label: \"2009\" }\n ],\n value: urlParams.has(\"yearsVisible\") ? urlParams.get(\"yearsVisible\") : defaultState.yearsVisible,\n submit: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1142,"value":"viewof numStepsVisible = select({\n title: \"Number of consecutive plays to display:\",\n options: [\"5\", \"6\", \"7\", \"8\", \"9\", \"10\"],\n value: urlParams.has(\"numStepsVisible\") ? urlParams.get(\"numStepsVisible\") : defaultState.numStepsVisible\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1156,"value":"viewof minPlotAngle = {\n let options = [];\n for (let i = 1; i <= 50; i++) {\n options.push((i/10).toString());\n }\n return select({\n title: \"Minimum angle of arcs to display (degrees):\",\n options: options,\n value: urlParams.has(\"minPlotAngle\") ? urlParams.get(\"minPlotAngle\") : defaultState.minPlotAngle\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3837,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1865,"value":"viewof interactionRules = rulesWidget(urlParams.has(\"interactionRules\") ? JSON.parse(urlParams.get(\"interactionRules\")) : defaultState.interactionRules)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1085,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":2740,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":1762,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":1055,"value":"md`\n----------\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2455,"value":"md`\n## NFL data set\n\nNFL play-by-play data is from [Ron Yurko](http://www.stat.cmu.edu/~ryurko/)'s [dataset](https://github.com/ryurko/nflscrapR-data/tree/master/play_by_play_data), filtered, cleaned up and re-organized ([notebook](https://observablehq.com/@mikpanko/nfl-play-by-play-data)).\n\nFootball plays are organized into an array of sequences of possessions/drives and consist of ~50 play-level properties and 7 sequence/possession-level properties:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2461,"value":"dataModifiedSequences","pinned":false,"hidden":false,"mode":"ojs"},{"id":3076,"value":"md`\nPlays are initially broken down into the following names:\n* **pass** - pass play\n* **run** - run play\n* **qb_keep** - play when quaterback kept the ball: scramble, knee, spike or sack\n* **punt** - punt play\n* **field_goal** - field goal play\n* **touchdown** - extra event, which indicates that the previous play resulted in a touchdown\n* **turnover** - extra event, which indicates that the previous play resulted in a turnover: lost fumble, interception, turnover on downs or safety\n* **end_half** - extra event, which indicates that the previous play ended with clock running out in 2nd or 4th quarter\n* **start** - extra event, which indicates the beginning of sequences\n* **end** - extra event, which indicates the end of sequences.\n\nKickoff and extra point plays are filtered out.\n\nNote that it is easy to rename, combine or split events through the \"Rules to filter & modify sequences\" widget to produce a wide variety of play sequences views. You can learn how to do it in the section below.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2441,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":2444,"value":"md`\n--------------------\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1265,"value":"md`\nNumber of all nodes in the data hierarchy: **${dataHierarchy.descendants().length}**\n\nNumber to nodes/arcs currently visible in the Sunburst view: **${dataHierarchy.descendants().filter(d => arcVisible(d.hasOwnProperty(\"current\") ? d.current : d)).length}** (this cell needs to be re-run after changes to the graph to display changes to the number)\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1792,"value":"defaultState = ({\n yearsVisible: ['2019'],\n interactionRules: [],\n numStepsVisible: '8',\n minPlotAngle: '0.5',\n selectedPathNodeId: urlParams.has('selectedPathNodeId') ? urlParams.get('selectedPathNodeId') : null,\n zoomNodeId: urlParams.has('zoomNodeId') ? urlParams.get('zoomNodeId') : 1,\n displayPropertyNodeId: (urlParams.has('displayPropertyNodeId') && urlParams.has('displayPropertyName')) ? urlParams.get('displayPropertyNodeId') : null,\n displayPropertyName: (urlParams.has('displayPropertyNodeId') && urlParams.has('displayPropertyName')) ? urlParams.get('displayPropertyName') : '',\n baseCount: urlParams.has('baseCount') ? urlParams.get('baseCount') : null,\n targetSequences: []\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1759,"value":"state = ({\n yearsVisible: yearsCheckbox,\n interactionRules: interactionRules,\n numStepsVisible: numStepsVisible,\n minPlotAngle: minPlotAngle,\n selectedPathNodeId: defaultState.selectedPathNodeId,\n zoomNodeId: defaultState.zoomNodeId,\n displayPropertyNodeId: defaultState.displayPropertyNodeId,\n displayPropertyName: defaultState.displayPropertyName,\n baseCount: defaultState.baseCount,\n targetSequences: defaultState.targetSequences\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1736,"value":"urlParams = new URLSearchParams(location.search)","pinned":false,"hidden":false,"mode":"ojs"},{"id":596,"value":"diameter = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":440,"value":"breadcrumbHeight = 30","pinned":false,"hidden":false,"mode":"ojs"},{"id":435,"value":"breadcrumbWidth = 200","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"color = {\n let eventColors = [];\n for (let i = 0; i < eventNames.length; i++) {\n if (defaultColors.hasOwnProperty(eventNames[i])) {\n eventColors.push(defaultColors[eventNames[i]]);\n } else {\n eventColors.push(d3.schemeTableau10[i % 10]);\n //eventColors.push(d3.interpolateSinebow((i % 10)/10));\n }\n }\n\n return d3.scaleOrdinal()\n .domain(eventNames)\n .range(eventColors);\n //.scaleOrdinal(d3.interpolateSinebow).domain([...new Set(dataEvents.map(p => p._eventName))])\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2324,"value":"defaultColors = ({\n end_half: d3.schemeCategory10[7],\n field_goal: d3.schemeCategory10[8],\n pass: d3.schemeCategory10[1],\n punt: d3.schemeCategory10[6],\n qb_keep: d3.schemeCategory10[9],\n run: d3.schemeCategory10[0],\n touchdown: d3.schemeCategory10[2],\n turnover: d3.schemeCategory10[3],\n start: '#f0f0f0',\n end: '#252525'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"arc = d3\n .arc()\n .startAngle(d => d.x0)\n .endAngle(d => d.x1)\n .padAngle(2 / diameter)\n .padRadius(diameter / 2)\n .innerRadius(d => diameter / 2 * Math.sqrt(d.y0 / (+numStepsVisible + 1)))\n .outerRadius(d => diameter / 2 * Math.sqrt(d.y1 / (+numStepsVisible + 1)) - 1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1289,"value":"// generate a string that describes points of a breadcrumb SVG polygon\nfunction breadcrumbPoints(d, i, p) {\n const tipHeight = 10;\n const points = [];\n points.push(\"0,0\");\n points.push(`0,${breadcrumbHeight}`);\n points.push(`${breadcrumbWidth/2},${breadcrumbHeight+tipHeight}`);\n points.push(`${breadcrumbWidth},${breadcrumbHeight}`);\n points.push(`${breadcrumbWidth},0`);\n if (i != (p.length - 1)) {\n // include 6th vertex for all breadcrumbs except for the 1st one\n points.push(`${breadcrumbWidth/2},${tipHeight}`);\n }\n return points.join(\" \");\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1259,"value":"// check if an individual arc/node should be visible in the current sunburst view\nfunction arcVisible(d) {\n return (d.y1 >= 1) &&\n (d.y1 <= (+numStepsVisible + 1)) &&\n ((d.x1 - d.x0) >= (minPlotAngle / 360 * 2 * Math.PI));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2979,"value":"propertyNames = {\n const props = [];\n for (let p in dataModifiedSequences[0]) {\n if (p != 'events') {\n props.push('seq.' + p);\n }\n }\n for (let p in dataModifiedSequences[0].events[0]) {\n if (p != '_eventName') {\n props.push('ev.' + p);\n }\n }\n return props.sort();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":512,"value":"// set of all possible event names\neventNames = {\n let names = [];\n for (let i = 0; i < dataModifiedSequences.length; i++) {\n for (let j = 0; j < dataModifiedSequences[i].events.length; j++) {\n if (!names.includes(dataModifiedSequences[i].events[j]._eventName)) {\n names.push(dataModifiedSequences[i].events[j]._eventName);\n }\n }\n }\n names = names.sort();\n names.push('start');\n names.push('end');\n return names;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4219,"value":"minNodeCountForColor = 20","pinned":false,"hidden":false,"mode":"ojs"},{"id":1394,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":2190,"value":"dataModifiedSequences = {\n // apply interaction rules\n let newSeqs = (interactionRules.length > 0) ? executeRules(dataSequences, interactionRules) : dataSequences;\n newSeqs = newSeqs.filter(seq => seq.events.length > 0);\n \n // add _duration property to events\n for (let seq of newSeqs) {\n for (let i = 1; i < seq.events.length; i++) {\n seq.events[i-1]._duration = seq.events[i].timestamp - seq.events[i-1].timestamp;\n }\n seq.events[seq.events.length-1]._duration = null;\n }\n \n return newSeqs;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1391,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs"},{"id":487,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs"},{"id":1005,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs"},{"id":1125,"value":"dataRawAll = new Object({})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1429,"value":"import {rulesWidget, executeRules} from \"@mikpanko/sequence-pattern-matching\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1081,"value":"import {swatches, legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1117,"value":"import {checkbox, select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2791,"value":"import { vl } from \"@vega/vega-lite-api\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3d","stdlib":"1","titling":"auto"}