2d:null 2e:["$","title",null,{"children":"Tennis Rallies - Interactive Sunburst Chart | Mikhail Panko | Observable"}] 33:T62a,md` **NOTE: this notebook has lots of functionality and might take ~10 seconds to load before the page becomes responsive. Please, be patient!** This notebook displays shot sequences for professional tennis rallies as an interactive [Sunburst chart](https://datavizcatalogue.com/methods/sunburst_diagram.html). Each shot is represented by an arc with colors corresponding to different shot types. Sequences are put together by traversing concentric circles from the center outward. The angle span of each arc represents the count of shots with the corresponding sequence of previous shots. Explore the chart 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 shots * **double-clicking on the center circle** to zoom out one step at a time or **on breadcrumbs** on the right to zoom out to the corresponding shots * filtering sequences and extracting sub-sequences by using the "sequence pattern" and "where condition" boxes (see explanations and examples how to use them below the chart) * modifying, replacing, combining and splitting events by using the "rules to modify events" box (see explanations and examples how to use them below the chart) Professional tennis shot-by-shot data is from [Jeff Sackmann](http://www.jeffsackmann.com/)'s [Match Charting Project dataset](https://github.com/JeffSackmann/tennis_MatchChartingProject), filtered, cleaned up and re-organized ([notebook](https://observablehq.com/@mikpanko/tennis-shot-by-shot-data)). ------------ `34:T1348,viewof modifyEventsRules = { // set up initial rules let rules = urlParams.has("modifyEventsRules") ? JSON.parse(urlParams.get("modifyEventsRules")) : JSON.parse(JSON.stringify(defaultState.modifyEventsRules)); // set up html const html = d3.create('html'); const element = html.node(); element.value = JSON.parse(JSON.stringify(rules)); element.dispatchEvent(new CustomEvent('input')); // create title row const titleRow = html .append('div') .style('width', '100%'); titleRow .append('div') .style('display', 'inline-block') .style('width', '200px') .style('font', '700 0.9rem sans-serif') .html('Rules to modify events:'); const addRuleButton = titleRow .append('button') .attr('class', 'add-rule') .style('display', 'inline-block') .style('width', '100px') .text('Add Rule'); const submitRulesButton = titleRow .append('button') .attr('class', 'submit-rules') .style('display', 'inline-block') .style('width', '100px') .style('margin', '10px 0px 10px 10px') .text('Submit Rules'); titleRow .append('hr') .attr('class', 'separator') .style('margin', '-10px 0px 0px 0px'); // display input areas for rules const rulesInputArea = html.append('div'); displayInputRules(); // handle "add rule" button click html.select('.add-rule') .on('click', () => { rules.push({ id: (rules.length > 0) ? (Math.max(...rules.map(r => r.id)) + 1) : 1, pattern: '', where: '', newEventNames: '' }); displayInputRules(); }); // handle "submit rules" button click html.select('.submit-rules') .on('click', () => { rules = rules.filter(r => (!!r.pattern)); element.value = JSON.parse(JSON.stringify(rules)); element.dispatchEvent(new CustomEvent('input')); displayInputRules(); }); // add input areas for rules function displayInputRules() { html .select('.separator') .style('display', (rules.length > 0) ? 'block' : 'none'); let ruleInput = rulesInputArea .selectAll("div") .data(rules, d => d.id) .join("div") .style('display', 'grid') .style('grid-template-columns', 'repeat(18, 1fr)') .style('grid-row-gap', '5px') .style('width', '100%'); ruleInput .append('div') .style('grid-column', 1) .style('grid-row', 1) .style('text-align', 'center') .text((d, i) => '(' + (i + 1) + ')'); ruleInput .append('textarea') .style('grid-column', '2 / 17') .style('grid-row', 1) .attr('rows', 1) .attr('class', 'pattern') .attr('placeholder', 'pattern') .datum(d => d) .html((d, i) => rules[i].pattern) .on('input change', () => { d3.event.stopPropagation(); d3.event.preventDefault(); }) .on('blur', (d, i, nodes) => { rules[rules.indexOf(d)].pattern = nodes[i].value; }); ruleInput .append('button') .style('grid-column', '18 / 19') .style('grid-row', 1) .attr('class', 'delete-rule') .datum(d => d) .text('Del') .on('click', d => { rules = rules.filter(r => (r.id != d.id)); displayInputRules(); }); ruleInput .append('div') .style('grid-column', '2') .style('grid-row', 2) .style('text-align', 'center') .html('↳'); ruleInput .append('textarea') .style('grid-column', '3 / 18') .style('grid-row', 2) .attr('rows', 1) .attr('class', 'where') .attr('placeholder', 'where') .datum(d => d) .html((d, i) => rules[i].where) .on('input change', () => { d3.event.stopPropagation(); d3.event.preventDefault(); }) .on('blur', (d, i, nodes) => { rules[rules.indexOf(d)].where = nodes[i].value; }); ruleInput .append('div') .style('grid-column', '3') .style('grid-row', 3) .style('text-align', 'center') .html('↳'); ruleInput .append('textarea') .style('grid-column', '4 / 19') .style('grid-row', 3) .attr('rows', 1) .attr('class', 'new-event-names') .attr('placeholder', 'new event names') .datum(d => d) .html((d, i) => rules[i].newEventNames) .on('input change', () => { d3.event.stopPropagation(); d3.event.preventDefault(); }) .on('blur', (d, i, nodes) => { rules[rules.indexOf(d)].newEventNames = nodes[i].value; }); ruleInput .append('hr') .style('grid-column', '1 / 19') .style('grid-row', (d, i) => 4) .style('margin', '-10px 0px 0px 0px'); }; return element; }35:T419,shareableUrl = { if (sunburstChart) { let currentUrlParams = new URLSearchParams(''); for (let prop in state) { if (JSON.stringify(state[prop]) != JSON.stringify(defaultState[prop])) { if (prop == 'modifyEventsRules') { currentUrlParams.set(prop, JSON.stringify(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/tennis-rallies-sunburst-chart' + ((currentUrlParams.toString().length) ? ('?' + currentUrlParams.toString()) : '')}`); return html.node(); } }36:T2668,viewof sunburstChart = { // prep data root.each(d => d.current = { x0: d.x0, x1: d.x1, y0: d.y0, y1: d.y1 }); let hoveredPath = []; let selectedPath = []; let centerNode = root; let visibleNodes = root.descendants().splice(1) // remove root node .filter(d => arcVisible(d.current)); // 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"); label .append("tspan") .attr("class", "percentage") .attr("x", 0) .attr("y", 0) .attr("dy", "-0.1em") .attr("font-size", "3em") .text(((100 * centerNode.value) / root.value).toPrecision(3) + "%"); label .append("tspan") .attr("class", "count") .attr("x", 0) .attr("y", 0) .attr("dy", "1.5em") .text(`(${centerNode.value})`); const gBreadcrumbs = svg.append("g") .attr("transform", `translate(${diameter+100},0)`); // draw sunburst and transition to the initial state root.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); t.end() .then(() => { // if initial state doesn't have "root" as the central node, transition to the new central node if (state.centerNodeId != 1) { return doDoubleClickAction(root.descendants().filter(n => (n.data.node_id == state.centerNodeId))[0]); } }) .then(() => { // if initial state has a path selected... if (state.selectedPathNodeId != null) { // ...first hover over this path... doMouseEnterAction(root.descendants().filter(n => (n.data.node_id == state.selectedPathNodeId))[0]); // ...then click on on the path leaf node doClickAction(root.descendants().filter(n => (n.data.node_id == state.selectedPathNodeId))[0]); } }); // handle hovering "on" event to highlight corresponding path function doMouseEnterAction(d0) { if (selectedPath.length == 0) { hoveredPath = d0.ancestors().reverse().splice(1); sunburst.selectAll("path") .attr("fill-opacity", d => hoveredPath.indexOf(d) >= 0 ? 1 : 0.3); label .select(".percentage") .text(((100 * d0.value) / root.value).toPrecision(3) + "%"); label .select(".count") .text(`(${d0.value})`); drawBreadcrumbs(hoveredPath); } } // handle hovering "off" event to highlight corresponding path function doMouseLeaveAction() { if (selectedPath.length == 0) { hoveredPath = centerNode.ancestors().reverse().splice(1); sunburst.selectAll("path") .attr("fill-opacity", 1); label .select(".percentage") .text(((100 * centerNode.value) / root.value).toPrecision(3) + "%"); label .select(".count") .text(`(${centerNode.value})`); drawBreadcrumbs(hoveredPath); } } // handle clicks to select a path function doClickAction(d0) { if (selectedPath.length == 0) { selectedPath = d0.ancestors(); state.selectedPathNodeId = d0.data.node_id; element.dispatchEvent(new CustomEvent("input")); sunburst.selectAll("path") .filter(d => selectedPath.indexOf(d) >= 0) .attr("stroke", "black"); } 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) { return new Promise(resolve => { // remove path selection if it was set sunburst.selectAll("path") .filter(d => selectedPath.indexOf(d) >= 0) .attr("stroke", "none"); selectedPath = []; // assign spacial transition targets to all nodes data root.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 = root.descendants().splice(1) // remove root node .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(color(d0.data.name)).l > 0.25) ? "black" : "white"); // update data and breadcrumbs t.on("end", () => { centerNode = d0; state.centerNodeId = d0.data.node_id; element.dispatchEvent(new CustomEvent("input")); visibleNodes = root.descendants().splice(1) // remove root node .filter(d => arcVisible(d.target)); label .select(".percentage") .text(((100 * centerNode.value) / root.value).toPrecision(3) + "%"); label .select(".count") .text(`(${centerNode.value})`); drawBreadcrumbs(d0.ancestors().reverse().splice(1)); root.each(d => { d.current = d.target; }); }); t.end().then(() => { resolve(); } ); }); } // 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 => color(d.data.name)) .attr("fill-opacity", 0) .attr("pointer-events", "none") .style("cursor", "initial") .attr("d", d => arc(d.current)) .on("mouseenter mouseover", d => doMouseEnterAction(d)) .on("mouseleave mouseout", () => doMouseLeaveAction()) .on("click", d => doClickAction(d)) .on("dblclick", d => doDoubleClickAction((d == centerNode) ? (d.parent || root) : d)), // 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)) ); } // draw breadcrumbs to show details about the corresponding path function drawBreadcrumbs(path) { // 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", d => doDoubleClickAction(d)); // add labels inside polygons d3.selectAll(".breadcrumb-labels").remove(); const breadcrumbLabels = gBreadcrumbs .selectAll("text") .data(path) .join("text") .attr("transform", (d, i) => `translate(0,${(path.length-i-1)*breadcrumbHeight})`) .attr("text-anchor", "middle") .attr("pointer-events", "none") .style("user-select", "none") .attr("fill", "white"); breadcrumbLabels.append("tspan") .attr("class", "breadcrumb-labels") .attr("x", breadcrumbWidth / 2) .attr("y", breadcrumbHeight / 2) .attr("dy", 12) .text(d => d.data.name); breadcrumbLabels.append("tspan") .attr("class", "breadcrumb-labels") .attr("x", breadcrumbWidth / 6) .attr("y", breadcrumbHeight / 2) .attr("dy", 7) .text(d => ((100 * d.value) / root.value).toPrecision(3) + "%"); breadcrumbLabels.append("tspan") .attr("class", "breadcrumb-labels") .attr("x", 5 * breadcrumbWidth / 6) .attr("y", breadcrumbHeight / 2) .attr("dy", 7) .text(d => d.value); // highlight path of the center node when Sunburst is zoomed in const centerNodeAncestors = centerNode.ancestors().reverse().splice(1); gBreadcrumbs .selectAll("polygon") .filter(d => centerNodeAncestors.indexOf(d) >= 0) .attr("stroke", "black"); } return element; }37:T14a2,md` ### Pattern String Syntax Pattern strings provide a simple human-readable way to encode sequence patterns. Their syntax 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 much simpler to learn and use. Here is the syntax: **"()"** - matches any one event **"(:name)"** - matches one event called "name" ("_eventName" property) **"(:name1|name2)"** - matches one event called "name1" OR "name2" **"(!:name)"** - matches one event NOT called "name" **"({prop1=propName, prop2>=3, prop3!=1|2})"** - matches one event with properties: "prop1" equal to "propName", "prop2" greater or equal 3 and "prop3" not equal 1 or 2. Supported operators include: "==", "=" and ":" (all represent "equal"), "!=", ">", "<", ">=" and "<=". **"[3]\\()"** - matches any event subsequence of length 3 **"[0..5]\\()"** - matches any event subsequence of length 0 to 5 events **"[2..]\\()"** - matches any event subsequence of length 2 or more events **"[..4]\\()"** - matches any event subsequence of length 0 to 4 events **"[..]\\()"** - matches any event subsequence of any length **"[2..3]"** - matches any event subsequences of length 2 to 3 events Basically, an event 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: "[..5]\\(!:name1|name2 {prop1=5|6, prop2!=propName1|propName2})". To match a sequence of different events, separate them with one or more "-" symbols: **"(:name1)-(:name2)"** - matches one event called "name1" immediately followed by one event called "name2" **"[1..2]\\(:name1|name2)--[2]\\(:name3)"** - matches 1 or 2 events called "name1" or "name2" immediately followed by 2 events called "name3" **"(:name1)-[..3]-(:name2)"** - matches one event called "name1" later followed by one event called "name2" with any events in between but no more than 3 of them To match the start or end of a sequence, use "|" symbol: **"|-(:name)-..."** - matches one event called "name" at the start of a sequence **"...-(:name)-|"** - matches one event called "name" at the end of a sequence Omitting "|" at the start or end of a pattern string defaults to matching any number of any events in a sequence before or after, respectively, the explicitly matched sub-sequence. So "-(:name1)-(:name2)" pattern string matches any sequences, which have one event called "name1" immediately followed by one event called "name2" ANYWHERE inside of it. There are a few rules for specifying whether a match should represent a whole sequence or only some part of it. They are handy for extracting and modifying sub-sequences via extractPattern() and modifyPattern() functions, respectively. Here is the syntax: **"-(:name)-..."** - starts a match from the start of a sequence (equivalent to "|-[..]-(:name)-...") **"(:name)-..."** - starts a match from event called "name" but a matching sequence can have other events before it **"-(:name1)-(^:name2)-..."** - starts a match from event called "name2" **"^-(:name1)-..."** - starts a match from the start of a sequence **"...-($:name1)-(:name2)-..."** - ends a match at event called "name1" **"...-(:name1)-$"** - ends a match at the end of a sequence **"-(:name1)-[1..3]\\(^$:name2)-(:name3)-..."** - collapses a match to only a 1-3 event sub-sequence of events called "name2" Finally, it is possible to specify meta-parameters and sequence-level properties with a "<...>" part, which needs to be placed at the end of a pattern string after an event pattern part: **"...<_whereToMatch=_ALL>"** - extracts ALL matches in a sequence, so it can split a sequence into several sub-sequences. Default value is "_FIRST", which extracts only the first match for each sequence. **"...<_allowOverlaps=true>"** - extracts all overlapping matches in a sequence (if "_whereToMatch" equals "_ALL"). Default value is "false", which starts the next match within a sequence after the end of a previous match. **"...< seqProp1=name1|name2, seqProp2!=3 >"** - matches sequences with sequence-level properties: "seqProp1" equal to "name1" or "name2" and "seqProp2" not equal to 3 All SPACES in a pattern strings are ignored, so you can add them as you please for better readability. Pattern string syntax is easy to master, apply and read; nevertheless, it provides a powerful interface to express almost any desired sequence question. `38:T564,md` ### Where Condition String Syntax Occasionally, sequence pattern alone might be not enough to filter to desired sequences to answer a data exploration question. This can happen when we need complex event- or sequence-level property matching, for example, computing timestamp difference between events. In such cases, an additional WHERE condition can help do the job. It pairs with a sequence pattern and provides an opportunity to define further filtering while seeing the context of all matched events. First, use **"(codename)"** in a sequence pattern string to give some event a codename "codename". Then use in whereCondition to define a filter. Where condition string is the **whereString** string inside the following function: function whereConditionFunction(ev, seq) { return eval(whereString); } It needs to return a boolean when evaluated by the eval() function and can use the following variables: * **ev** - object with keys equal to codenames of events matched through matchPattern() and values equal to corresponding sequence events. Because each event in a pattern can match a sub-sequence of more than one event in a sequence, each "ev" property is a list of all matched sequence events. * **seq** - sequence object for the corresponding sequence. `39:T4dd,md` ### New Event Names String Syntax The string producing the names of events to replace events or sub-sequences matched through a pattern. It can contain new event names directly or provide a formula to compute them based on event-level properties of matched events and sequence-level properties. It is the **newEventNames** string inside the following function: function newEventNamesFunction(ev, seq) { return eval(newEventNames); } It needs to return an array of strings or a string (if only one new event name) when evaluated by the eval() function and can use the following variables: * **ev** - object with keys equal to codenames of events matched through matchPattern() and values equal to corresponding sequence events. Because each event in a pattern can match a sub-sequence of more than one event in a sequence, each "ev" property is a list of all matched sequence events. * **seq** - sequence object for the corresponding sequence. There is a reserved event name "_REMOVE". It is treated as an instruction not to add a new event, so it can be used to remove events or replace events with sequences of varying lengths. ------------ `3a:T7e2,// re-organize data into an hierarchy to plot data = { const rootNode = { name: "root", node_id: 1, node_depth: 0, node_count: 0, children: [] }; let nextId = 2; let children, foundChild; for (let seq of dataMatchedSequences) { let currentNode = rootNode; 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; 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, children: [] }; children.push(childNode); nextId += 1; } 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; 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, value: 1 }); } nextId += 1; } for (let j = 0; j < rootNode.children.length; j++) { rootNode.node_count += rootNode.children[j].node_count; } return rootNode; }3b:[{"id":"58835cefdcbfb8d8089c21199ef0234b9888c5949c1f5bdbe6f84456ebd8f4275162d549386423edb2d3180330caff91d66a711ad18c3a37b72875707fa724ef","href":"https://static.observableusercontent.com/files/58835cefdcbfb8d8089c21199ef0234b9888c5949c1f5bdbe6f84456ebd8f4275162d549386423edb2d3180330caff91d66a711ad18c3a37b72875707fa724ef","name":"tennis_sbs_men@2.csv","type":"text/csv","lastModified":1593334782253.345,"size":12523283},{"id":"e76dded3282979e440a2df3982f4aaa9ec03ac3cd9dc04d850e060d74edc3e9ed81aeb9220b2ddd688828083f7c77c6962eae1b8929790ead2c7b01e3914f6bd","href":"https://static.observableusercontent.com/files/e76dded3282979e440a2df3982f4aaa9ec03ac3cd9dc04d850e060d74edc3e9ed81aeb9220b2ddd688828083f7c77c6962eae1b8929790ead2c7b01e3914f6bd","name":"tennis_sbs_women.csv","type":"text/csv","lastModified":1593384355085.781,"size":5945359},{"id":"8dc2be885ba160b12e4a4fab51a8f74167b3e02e15d8417bcae5f6905e4818142c41483aad3a811c335c1b981afca21e11392eb9783648c916299a0d23ba8ffe","href":"https://static.observableusercontent.com/files/8dc2be885ba160b12e4a4fab51a8f74167b3e02e15d8417bcae5f6905e4818142c41483aad3a811c335c1b981afca21e11392eb9783648c916299a0d23ba8ffe","name":"tennis_matches_women@1.csv","type":"text/csv","lastModified":1593389789223.921,"size":103771},{"id":"22adec42baa4bdf9d4443374fc6f3ca7d72b35fdf56ad9bd8164bf1ee962d5b06798f937c48028bf03a83f4cc563501429a86e7c051361aba1a8e0ca69b019d8","href":"https://static.observableusercontent.com/files/22adec42baa4bdf9d4443374fc6f3ca7d72b35fdf56ad9bd8164bf1ee962d5b06798f937c48028bf03a83f4cc563501429a86e7c051361aba1a8e0ca69b019d8","name":"tennis_matches_men@1.csv","type":"text/csv","lastModified":1593389789257.205,"size":186266}] 31:{"id":"cf54d14eed48da6b","slug":"tennis-rallies-sunburst-chart","title":"Tennis Rallies - Interactive Sunburst Chart","thumbnail":"a1d5cbea2aba8c9476a3fc2ef242c638c903e8d9e3b174cf16cf8c67e65f172b","access_level":"public","create_time":"$D2020-06-28T07:04:46.029Z","update_time":"$D2020-07-06T05:14:56.808Z","view_time":null,"first_public_time":"$D2020-06-29T06:05:53.219Z","has_unpublished_edits":null,"fork":{"id":"cb339d5a09fdada9","slug":"nfl-plays-sunburst-chart","title":"NFL Plays - Interactive Sunburst Chart","owner":{"id":"531623778d1cfe6e","login":"mikpanko","name":"Mikhail Panko"}},"stars":24,"starred":false,"owner":{"type":"team","id":"531623778d1cfe6e","login":"mikpanko","name":"Mikhail Panko","avatar_url":"https://avatars-next.observableusercontent.com/4a7a289505521108a32d4f2cf435c51238acba316b0880dd12565bbc7bb1363e","tier":"starter_2024"},"version":2588,"publish_version":2588,"role":null,"authored":false,"authors":[{"type":"individual","id":"c6cedd1a4153dc26","login":"mikpanko","name":"Mikhail Panko","avatar_url":"https://avatars-next.observableusercontent.com/4a7a289505521108a32d4f2cf435c51238acba316b0880dd12565bbc7bb1363e","tier":null}],"members":[{"type":"individual","id":"c6cedd1a4153dc26","login":"mikpanko","name":"Mikhail Panko","avatar_url":"https://avatars-next.observableusercontent.com/4a7a289505521108a32d4f2cf435c51238acba316b0880dd12565bbc7bb1363e","tier":null,"role":"editor"}],"comments":[{"id":"a80f54bacda38875","reply_to_id":null,"content":"This is beautiful!","create_time":"$D2020-06-30T17:22:40.070Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"91bdf2ff601b1d38","login":"kudakwashe","name":"Kudakwashe Paul Mushaike","avatar_url":"https://avatars-next.observableusercontent.com/db029d620d2886af7d0aec537e64b866bdf3cb50019a1d05ed3e6d47789c96b1","tier":null}},{"id":"77735f159f7c5056","reply_to_id":"a80f54bacda38875","content":"Thank you!","create_time":"$D2020-07-04T09:20:18.641Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"c6cedd1a4153dc26","login":"mikpanko","name":"Mikhail Panko","avatar_url":"https://avatars-next.observableusercontent.com/4a7a289505521108a32d4f2cf435c51238acba316b0880dd12565bbc7bb1363e","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":17,"collection":{"id":"46304ac18e00369f","slug":"sequences","title":"Sequences","owner":{"id":"531623778d1cfe6e","login":"mikpanko","name":"Mikhail Panko"}},"type":"notebook","body":{"title":"Tennis Rallies - Interactive Sunburst Chart","cells":[{"id":1019,"value":"md`# Tennis Rallies - Interactive Sunburst Chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1115,"value":"viewof playerGenderVisible = radio({\n title: \"Visualize rallies for gender:\",\n options: [\n { value: \"men\", label: \"Men\" },\n { value: \"women\", label: \"Women\" }\n ],\n value: urlParams.has(\"playerGenderVisible\") ? urlParams.get(\"playerGenderVisible\") : defaultState.playerGenderVisible\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2431,"value":"viewof playerVisible = autoSelect({\n title: \"Visualize rallies for player:\",\n options: playerNames,\n placeholder: \"Start typing player's name...\",\n value: urlParams.has(\"playerVisible\") ? urlParams.get(\"playerVisible\") : defaultState.playerVisible\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2480,"value":"viewof playerRalliesVisible = radio({\n title: 'Player rally types:',\n options: (playerVisible != '_ALL_') ?\n [\n { value: \"both\", label: \"Serve & Receive\" },\n { value: \"serve\", label: \"Serve\" },\n { value: \"receive\", label: \"Receive\" }\n ] :\n [\n { value: \"both\", label: \"Serve & Receive\" }\n ],\n value: urlParams.has(\"playerRalliesVisible\") ? urlParams.get(\"playerRalliesVisible\") : defaultState.playerRalliesVisible\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1865,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1142,"value":"viewof numStepsVisible = select({\n title: \"Number of steps 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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1416,"value":"viewof sequencePattern = textarea({\n title: \"Filter by sequence pattern (see syntax explained under the chart below):\",\n width: (width >= 800) ? \"85%\" : (width +'px'),\n rows: 1,\n submit: \"Submit\",\n placeholder: 'ex: -(:winner)-',\n value: urlParams.has(\"sequencePattern\") ? urlParams.get(\"sequencePattern\") : defaultState.sequencePattern\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1563,"value":"viewof whereCondition = textarea({\n title: \"Filter by WHERE condition BASED ON pattern filtering above (see syntax explained under the chart below):\",\n width: (width >= 800) ? \"85%\" : (width +'px'),\n rows: 1,\n submit: \"Submit\",\n value: urlParams.has(\"whereCondition\") ? urlParams.get(\"whereCondition\") : defaultState.whereCondition\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1762,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1085,"value":"{\n let colors = color;\n colors.domain(eventNames);\n return swatches({\n color: color,\n columns: \"150px\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1055,"value":"md`\n----------\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1487,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1490,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2239,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1265,"value":"md`\nNumber of all nodes in the data hierarchy: **${root.descendants().length}**\n\nNumber to nodes/arcs currently visible in the Sunburst view: **${root.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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1759,"value":"state = ({\n playerGenderVisible: playerGenderVisible,\n playerVisible: playerVisible,\n playerRalliesVisible: playerRalliesVisible,\n modifyEventsRules: modifyEventsRules,\n numStepsVisible: numStepsVisible,\n minPlotAngle: minPlotAngle,\n sequencePattern: sequencePattern,\n whereCondition: whereCondition,\n selectedPathNodeId: urlParams.has('selectedPathNodeId') ? urlParams.get('selectedPathNodeId') : null,\n centerNodeId: urlParams.has('centerNodeId') ? urlParams.get('centerNodeId') : 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1792,"value":"defaultState = ({\n playerGenderVisible: 'men',\n playerVisible: '_ALL_',\n playerRalliesVisible: 'both',\n modifyEventsRules: [],\n numStepsVisible: '8',\n minPlotAngle: '0.5',\n sequencePattern: '',\n whereCondition: '',\n selectedPathNodeId: null,\n centerNodeId: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1736,"value":"urlParams = new URLSearchParams(location.search)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":596,"value":"diameter = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":440,"value":"breadcrumbHeight = 30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"breadcrumbWidth = 200","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"color = {\n let eventColors = [];\n for (let i = 0; i < (eventNames.length - 1); i++) {\n if (defaultColors.hasOwnProperty(eventNames[i])) {\n eventColors.push(defaultColors[eventNames[i]]);\n } else {\n eventColors.push(d3.schemeCategory10[i % 10]);\n //eventColors.push(d3.interpolateSinebow(i/eventNames.length));\n }\n }\n eventColors.push('black');\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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2376,"value":"defaultColors = ({\n serve_wide: d3.schemeCategory10[4],\n serve_middle: d3.schemeCategory10[4],\n serve_body: d3.schemeCategory10[4],\n \n forehand: d3.schemeCategory10[0],\n f_slice: d3.schemeCategory10[0],\n f_drop: d3.schemeCategory10[0],\n f_half_volley: d3.schemeCategory10[0],\n f_lob: d3.schemeCategory10[0],\n f_smash: d3.schemeCategory10[0],\n f_swing_volley: d3.schemeCategory10[0],\n f_volley: d3.schemeCategory10[0],\n \n backhand: d3.schemeCategory10[1],\n b_slice: d3.schemeCategory10[1],\n b_drop: d3.schemeCategory10[1],\n b_half_volley: d3.schemeCategory10[1],\n b_lob: d3.schemeCategory10[1],\n b_smash: d3.schemeCategory10[1],\n b_swing_volley: d3.schemeCategory10[1],\n b_volley: d3.schemeCategory10[1],\n \n trick: d3.schemeCategory10[8],\n \n ace: d3.schemeCategory10[2],\n winner: d3.schemeCategory10[2],\n \n serve_fault: d3.schemeCategory10[3],\n error_forced: d3.schemeCategory10[3],\n error_unforced: d3.schemeCategory10[6],\n error_unknown: d3.schemeCategory10[6]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"partition = data => {\n const root = d3.hierarchy(data)\n .sum(d => d.value)\n .sort((a, b) => b.value - a.value);\n return d3.partition()\n .size([2 * Math.PI, root.height + 1])\n (root);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1276,"value":"root = partition(data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1394,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1452,"value":"dataMatchedSequences = (sequencePattern && (sequencePattern.length > 0)) ?\n extractPattern(dataModifiedSequences, sequencePattern, whereFunction)\n : dataModifiedSequences","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1567,"value":"// Filter sequences by a WHERE clause based on event codenames from the sequence pattern & sequence properties\n// Only works together with the sequence pattern input\nwhereFunction = {\n if (whereCondition.length > 0) {\n return function(ev, seq) {\n return eval(whereCondition);\n };\n } else {\n return function(ev, seq) {\n return true;\n }; \n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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('end');\n return names;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2190,"value":"dataModifiedSequences = {\n if (modifyEventsRules.length > 0) {\n let sequences = JSON.parse(JSON.stringify(dataFilteredSequences));\n for (let i = 0; i < modifyEventsRules.length; i++) {\n sequences = replacePattern(sequences, modifyEventsRules[i].newEventNames, modifyEventsRules[i].pattern, modifyEventsRules[i].where);\n }\n return sequences;\n } else {\n return dataFilteredSequences;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2472,"value":"dataFilteredSequences = {\n if (playerVisible != '_ALL_') {\n let matchIds = dataMatches\n .filter(m => [m.player1, m.player2].includes(playerVisible))\n .map(m => m.id);\n let isPlayer1, isServing;\n return dataSequences\n .filter(p => matchIds.includes(p.matchId))\n .filter(p => {\n if (playerRalliesVisible == 'both') {\n return true;\n }\n isPlayer1 = (dataMatches.filter(m => (m.id == p.matchId))[0].player1 == playerVisible);\n isServing = ((isPlayer1 && p.isPlayer1Serving) || (!isPlayer1 && !p.isPlayer1Serving));\n return (playerRalliesVisible == 'serve') ? isServing : !isServing;\n });\n } else {\n return dataSequences;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2347,"value":"dataSequences = convertPointsToShots(dataRawShots)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2415,"value":"dataRawShots = dataRaw.shots","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2444,"value":"tournamentNames = {\n let names = [];\n for (let match of dataMatches) {\n if (!names.includes(match.tournamentName)) {\n names.push(match.tournamentName);\n }\n }\n names.sort().unshift('_ALL_');\n return names; \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2437,"value":"playerNames = {\n let names = [];\n for (let match of dataMatches) {\n if (!names.includes(match.player1)) {\n names.push(match.player1);\n }\n if (!names.includes(match.player2)) {\n names.push(match.player2);\n }\n }\n names.sort().unshift('_ALL_');\n return names;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2406,"value":"dataMatches = dataRaw.matches","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1005,"value":"dataRaw = {\n if (!dataRawAll.hasOwnProperty(`data_${playerGenderVisible}_shots`)) {\n if (playerGenderVisible == 'men') {\n dataRawAll.data_men_shots = d3.csvParse(await FileAttachment('tennis_sbs_men@2.csv').text(), d3.autoType);\n dataRawAll.data_men_matches = d3.csvParse(await FileAttachment('tennis_matches_men@1.csv').text(), d3.autoType); \n } else if (playerGenderVisible == 'women') {\n dataRawAll.data_women_shots = d3.csvParse(await FileAttachment('tennis_sbs_women.csv').text(), d3.autoType);\n dataRawAll.data_women_matches = d3.csvParse(await FileAttachment('tennis_matches_women@1.csv').text(), d3.autoType);\n }\n }\n return {\n shots: dataRawAll[`data_${playerGenderVisible}_shots`],\n matches: dataRawAll[`data_${playerGenderVisible}_matches`]\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1125,"value":"dataRawAll = new Object({})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1429,"value":"import {extractPattern, replacePattern} from \"@mikpanko/sequence-pattern-matching\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2344,"value":"import {convertPointsToShots} from \"@mikpanko/tennis-shot-by-shot-data\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1081,"value":"import {swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1117,"value":"import {radio, select, autoSelect, textarea} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3b","stdlib":"1","titling":"auto"}} 32:"$31:body"