2f:T7cc,chart = { const { playing_space_length, playing_space_width, table_length, table_width, sideline_width, net_side_offset, net_thickness, ball_diameter, centerline_width } = visualParameters; const svg = d3 .create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [ -playing_space_length / 2, -playing_space_width / 2, playing_space_length, playing_space_width ]); const text = svg .append("g") .style("text-anchor", "middle") .attr("fill", "white"); const scores = text .append("g") .attr("font-size", 0.3) .attr("class", "scores"), names = text .append("g") .attr("font-size", 0.1) .attr("class", "names") .style("writing-mode", "tb"); const scoreA = scores .append("text") .text("0") .attr("x", 0.4 + -playing_space_length / 2) .attr("y", 0.4 - playing_space_width / 2); const scoreB = scores .append("text") .text("0") .attr("x", -0.4 + playing_space_length / 2) .attr("y", 0.4 - playing_space_width / 2); const playerA = names .append("text") .text(players[0]) .attr( "transform", `rotate(180) translate(${-0.1 + playing_space_length / 2} ${0})` ); const playerB = names .append("text") .attr("transform", ` translate(${-0.1 + playing_space_length / 2} ${0})`) .text(players[1]); const playing_space = svg .append("rect") .attr("x", -playing_space_length / 2) .attr("y", -playing_space_width / 2) .attr("width", playing_space_length) .attr("height", playing_space_width) .attr("fill", playing_space_color); const heatmap = createHeatmap(svg, heatmapA.concat(heatmapB)); const table = createTable(svg, showHeatmap ? "none" : table_color); const bounces = createBounces(svg, []); text.raise(); return Object.assign(svg.node(), { scoreA, scoreB, showService: bounces.showService }); }30:T60f,viewof scrub = { const input = showVideo ? await videoTimeZoom({ src: videoUrl, crossOrigin: "anonymous",getTracks : () => tracksConfig, width: width }) : Scrubber( d3.range((matchDuration ) * 60).map(i => setPrecision(i / 60, 1000)), { // autoplay: trajectories.size < 20, format: v => `${~~(v / 60)}m ${(v % 60).toFixed(1)}s`, delay: 1000 / ( 60) } ) var service = null, idService = -1, idPair = -1, pair = null, pairs = []; function onInput() { const newId = services.findIndex( s => s.end >= input.value && s.start <= input.value ); if (newId !== idService) { service = services[(idService = newId)]; pairs = d3 .pairs(service.values) .map(([a, b], i) => ({ id: i, start: a.time, end: b.time, a, b })); mutable service = service; } const newPairId = pairs.findIndex( s => s.end >= input.value && s.start <= input.value ); if (newPairId !== idPair) { pair = pairs[(idPair = newPairId)]; mutable stroke = pair; } chart.showService(service?.values ? service.values : [], pair?.id); chart.scoreA.text(pair ? pair.a.scoreA : 0); chart.scoreB.text(pair ? pair.a.scoreB : 0); } input.addEventListener('input', onInput); invalidation.then(() => { input.removeEventListener('input', onInput); }); input.addEventListener('change', onInput); invalidation.then(() => { input.removeEventListener('change', onInput); }); onInput(); return input; }31:T961,grids = { await visibility(); const h = height * 1, margin = 1; const { playing_space_length, playing_space_width, table_length, table_width, sideline_width, net_side_offset, net_thickness, ball_diameter, centerline_width } = visualParameters; const svg = d3 .create("svg") .attr('width', width) .attr('height', h); svg.append("defs"); const data = services.filter(({ set }) => set === setToShow).slice(); const xGrid = d3 .scaleLinear() .domain(d3.extent(data, d => d[scatterPlotX])) .range([0, 1]); const yGrid = d3 .scaleLinear() .domain(d3.extent(data, d => d[scatterPlotY])) .range([1, 0]); const scatterPlotMargin = margin * 5; const gridding = d3 .gridding() .mode(scatterPlot ? 'coordinate' : 'grid') .size([width, h]) .offset( scatterPlot ? [-scatterPlotMargin / 2, -scatterPlotMargin / 2] : [0, 0] ) .margin(scatterPlot ? scatterPlotMargin : margin / 2) .padding(1) .valueX(d => xGrid(d[scatterPlotX])) .valueY(d => yGrid(d[scatterPlotY])); function renderService(service) { const values = service.values; const g = d3 .select(this) .append('svg') .attr('width', scatterPlot ? 100 : service.width) .attr('height', scatterPlot ? 100 : service.height) .attr("viewBox", [ -(table_length + 0.8) / 2, -(table_width + 0.8) / 2, table_length + 0.8, table_width + 0.8 ]); const table = createTable(g, table_color) .attr('fill', colorHeatmap(0)) .attr('stroke', 'black'); const bounces = createBounces(g, values); const scoreA = g .append('text') .style('text-anchor', 'middle') .attr('font-size', 0.2) .text(`${service.scoreA}-${service.scoreB}`) .attr('x', 0) .attr('y', 0.2 - playing_space_width / 2); debugger; return g; } const rects = svg .selectAll(".square") .data( gridding( data.map(d => ({ values: d.values, duration: d.duration, length: d.length, scoreA: d.scoreA, scoreB: d.scoreB })) ) ) .enter() .append("g") .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ") "; }) .each(renderService); return Object.assign(svg.node(), { trajectories: rects }); }32:Tbed,function createBounces( g, values = [], { table_length, table_width, sideline_width, net_side_offset, net_thickness, centerline_width } = parameters ) { const bounces = g .append('g') .attr('font-size', 0.08) // .attr('fill-opacity', 0.8) .attr('stroke-width', 0.005) .attr('font-family', 'Verdana') .style('text-anchor', 'middle') .attr('id', "bounces"); const links = bounces .append('g') .attr('stroke', 'black'); const cercles = bounces.append('g'); function showService(values, idPair = -1) { values.sort((a, b) => d3.ascending(a.time, b.time)) const idStroke = values[idPair]?.idStroke; const opacity = (d, i) => { if(!idStroke || idStroke <0 ) return 1 if(d.length) return idPair === i ? 1 : 0.1 else return idPair === i || idPair + 1 === i ? 1 : 0.30 } const line = d3 .line() .curve(d3[curveType]) .context(null); function angleDeviation(laterality) { if(laterality === "Coup droit") return Math.PI/2 else if(laterality === "Revers") return - Math.PI/2 else return 0 } function angleLetter(laterality){ if(laterality === "Coup droit") return "CD" else if(laterality === "Revers") return "R" else return "?" } links .selectAll('path') .data(d3.pairs(values), (d, i) => `${d[0].idStroke}-${d[1].idStroke}`) .join( enter => enter .append('path').attr('fill','none') .attr('stroke', ([{ name }, b]) => colors.get(name)) .attr( 'stroke-width', ([{ strokeType }, b]) => strokeTypes.get(strokeType) * 0.02 ).attr('d', ([a,b]) => line([a,getMiddleDeviation(a,b,angleDeviation(a.laterality)),b].map(({x,y}) => [x,y]))) , update => update, exit => exit.remove() ) .sort( ([a, _], [b, c]) => d3.ascending(a.time, b.time) && a.idStroke <= idStroke ) .attr('opacity', opacity); cercles .selectAll('g') .data(values, d => d.idStroke) .join(enter => enter .append('g') .attr('transform', ({ x, y }) => `translate(${x} ${y})`) .each(function(d, i) { d3.select(this) .append('circle') .attr('fill', d => colors.get(d.name)) .attr('r', 0.15); d3.select(this) .append('text') .attr('alignment-baseline', 'middle') .attr('fill', 'white') .text(({ idStroke, laterality}) => `${angleLetter(laterality)}${idStroke}`); d3.select(this).attr('id', ({ idStroke }) => `bounce_${idStroke}`); }) ) .attr('opacity', opacity) .each(function(d, i) { if (i <= idPair + 1) d3.select(this).raise(); }); } showService(values,null) return Object.assign(bounces, { showService }); }33:T581,function createTable( g, tableColor, { table_length, table_width, sideline_width, net_side_offset, net_thickness, centerline_width } = parameters ) { const table = g .append('g') .attr('fill', tableColor) .attr('stroke', 'white') .attr('stroke-width', sideline_width); const bottom = table .append('rect') .attr('x', -table_length / 2) .attr('y', -table_width / 2) .attr('width', table_length) .attr('height', table_width); const net = table .append('line') .attr('x1', 0) .attr('x2', 0) .attr('y1', -(net_side_offset + table_width / 2)) .attr('y2', net_side_offset + table_width / 2) .attr('stroke-width', net_thickness); const gridding = table.append('g').attr('stroke-width', centerline_width / 2); const horizontalLines = gridding .append('g') .selectAll('line') .data([1, 2]) .join('line') .attr('x1', -table_length / 2) .attr('x2', table_length / 2) .attr('y1', d => d * cellHeight - table_width / 2) .attr('y2', d => d * cellHeight - table_width / 2); const verticalLines = gridding .append('g') .selectAll('line') .data([1, 2, 4, 5]) .join('line') .attr('x1', d => d * cellWidth - table_length / 2) .attr('x2', d => d * cellWidth - table_length / 2) .attr('y1', -table_width / 2) .attr('y2', table_width / 2); return table; }34:T518,function createHeatmap(g, heatmap, {} = parameters) { const heatmapSVG = g .append('g') .style('text-anchor', 'middle') .attr('font-family', 'Verdana') .attr('stroke-width', 0) .attr('transform', `translate(${-cellWidth} ${-cellHeight * 1.5})`) .attr('font-size', cellHeight / 2); const cells = heatmapSVG .selectAll('g') .data(heatmap) .join('g') .attr('transform', (_, i) => i < heatmapA.length ? `translate(${-cellWidth * (i % 3)} ${cellHeight * ~~(i / 3)})` : `translate(${cellWidth * (1 + ((i - heatmap.length / 2) % 3))} ${cellHeight * ~~((i - heatmap.length / 2) / 3)})` ); cells .append('rect') .attr('fill-opacity', '0.95') .attr('x', 0) .attr('y', 0) .attr('width', cellWidth) .attr('height', cellHeight) .attr('fill', ([key, val], i) => showHeatmap ? colorHeatmap(val) : 'none' ); cells .append('text') .attr('fill-opacity', '0.1') .attr('alignment-baseline', 'middle') .attr('fill', ([key, val]) => val > extentBounce[1] / 2 ? colorHeatmap(extentBounce[0]) : colorHeatmap(extentBounce[1]) ) .attr('x', cellWidth / 2) .attr('y', cellHeight / 2) .text(([key, val], i) => key); return heatmapSVG; }35:T5bc,csv = { var scoreA = 0, scoreB = 0, idService = 0, server = true, set = 0, winner = null; return raw_csv .sort((a, b) => d3.ascending(a.Position, b.Position)) .map((d, i) => { const name = parseName(d.Nom), zone = d['Zone de jeu'], service = d['Type de service'] || d['Type service']; if (d.Nom.includes('SET')) { scoreA = scoreB = 0; set = parseIdCoup(d.Nom); return undefined; } if (service) idService++; if (d.Coup.includes('Point')) { const symbol = d.Coup.slice(-1); if ((server && symbol === '+') || (!server && symbol === '-')) { scoreA += 1; winner = players[0]; } else { scoreB += 1; winner = players[1]; } } else winner = null; if (service) server = parseName(d.Nom) === players[0]; const [x, y] = findXY(name, zone, service); return { idStroke: i, name, time: d.Position, duration: d.Durée, x, y, idPlayerStroke: parseIdCoup(d.Nom), set, zone, stroke: d.Coup !== parseName(d.Nom) ? d.Coup : null, idService, laterality: d.Latéralité, strokeType: d['Type Coup TK'], serviceType: service, scoreA, scoreB, server: server ? players[0] : players[1], serviceWinner: winner }; }) .filter(d => d); }36:T542,services = [ ...d3 .rollup( data_tennis_table, v => { const start = d3.min(v.map(d => d.time)), end = d3.max(v.map(d => d.time+d.duration)), duration = end - start; const distances = d3 .pairs(v) .map(([a, b]) => Math.sqrt((b.x - a.x) ** 2, (b.y - a.y) ** 2)); const bounceCount = d3.rollup( v, s => s.length, d => d.name, d => d.zone?.slice(0, 2) ), zoneLetters = ['D', 'M', 'G'] const heatmap = players.map((p,i) => (i === 0 ? zoneLetters : zoneLetters.reverse()).map(l => d3 .range(1, 4) .map(i => `${l}${i}`) .map(k => [k, bounceCount.get(p)?.get(k) || 0]))) return { id: v[0].idService, set: v[0].set, start, end, duration, values: v, size: v.length, length: v.length > 1 ? d3.sum(distances) : 0, scoreA: v[0].scoreA, scoreB: v[0].scoreB, serviceType: v[0].serviceType, serviceName: v[0].name, serviceWinner: v[v.length - 1].serviceWinner || 'Aucun', diffScore: v[0].scoreA - v[0].scoreB, distances,heatmap : heatmap.flat(2) }; }, d => d.idService ) .values() ]37:[{"id":"d30c96838652b0b372ef0f61d3ecacf2ccc3376515ab26ddc2e906cfca8cc07963d2e5a2f01e866b859a47c40637c42182027f82e42314c8ae803244d42dc223","href":"https://static.observableusercontent.com/files/d30c96838652b0b372ef0f61d3ecacf2ccc3376515ab26ddc2e906cfca8cc07963d2e5a2f01e866b859a47c40637c42182027f82e42314c8ae803244d42dc223","name":"2016-ittf-korea-open-tristan-flore-vs-timo-boll-short@1.csv","type":"text/csv","lastModified":1674635064933.89,"size":630},{"id":"8b8aadc7b2c82265e9cd5ce117e24ba21b3a5761c0c4f50d336e6b3c43091d29386751324f73ab6f49600d61f8760773f85c9177b40af96cbe82e90a4b145ac3","href":"https://static.observableusercontent.com/files/8b8aadc7b2c82265e9cd5ce117e24ba21b3a5761c0c4f50d336e6b3c43091d29386751324f73ab6f49600d61f8760773f85c9177b40af96cbe82e90a4b145ac3","name":"Table avec zones.png","type":"image/png","lastModified":1674635064933.89,"size":36326},{"id":"cfa89f073ac37c18880b2b43556b916da22986382511774829eb939be5cf9b4f64bf67c3af54d4098723c2f2747c0dd5247bd805c1833946d1c847c60570bfd9","href":"https://static.observableusercontent.com/files/cfa89f073ac37c18880b2b43556b916da22986382511774829eb939be5cf9b4f64bf67c3af54d4098723c2f2747c0dd5247bd805c1833946d1c847c60570bfd9","name":"2016-ittf-korea-open-tristan-flore-vs-timo-boll-short.csv","type":"text/csv","lastModified":1674639894281.084,"size":726},{"id":"25dc39e247a095aa082d64e231cf5bce30b14c773d1a894b06f1d25f3f79afe58817866f40df70b4ed6bd0e37ba6e4157e47ba77e23ba50dbe7e08bc0faf27a7","href":"https://static.observableusercontent.com/files/25dc39e247a095aa082d64e231cf5bce30b14c773d1a894b06f1d25f3f79afe58817866f40df70b4ed6bd0e37ba6e4157e47ba77e23ba50dbe7e08bc0faf27a7","name":"2016-ittf-korea-open-tristan-flore-vs-timo-boll-short_correction.csv","type":"text/csv","lastModified":1674640205230.117,"size":738}] 2d:{"title":"Visualisation données Tennis de Table","cells":[{"id":0,"value":"md`# Visualisation données Tennis de Table\n\nCe notebook regroupe toutes les informations et liens par rapport au projet de fouille et visualisation de données de Tennis de Table. \n\nLe jeux de données est entre les joueurs BOLL vs FLORE dont la [vidéo est disponible](https://dataroom.liris.cnrs.fr/vizvid_json/2016-ittf-korea-open-tristan-flore-vs-timo-boll.mp4). \n\n- Le match dure **${Math.floor(matchDuration)}**\n- Le jeu de données complet contient ${raw_csv.length} lignes (stroke)\n- ${services.length} services en ${sets.length} sets pour un total de ${data_tennis_table.length} coups (stroke)\n- Les coups sont ${Array.from(strokeTypes).map(d => d[0]).filter(d => d).join(\", \")}.\n- Le [tableau de bord de vues coordonnées](https://observablehq.com/@liris/dashboard-ittf-vega-sync)\n\nVoici un échantillon du dataset:\n\n

${sample}

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1955,"value":"viewof data_tennis_table = Table(csv, { rows: expendTable ? 20 : 5 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2007,"value":"[...strokeTypes]","pinned":true,"hidden":false,"mode":"ojs"},{"id":2020,"value":"Array.from(strokeTypes).filter(d => d[0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":2000,"value":"Plot.plot({\n height: 150,\n width: 500,\n padding: .1,\n marks: [\n Plot.barY(Array.from(strokeTypes).filter(d => d[0]), {x: d => d[0], y: d => d[1]})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1979,"value":"Questions (FFTT) :\n- Quelles sont les combinaisons de jeu les plus efficaces (type de service, zones de jeu, etc.) ? \n- Existe-t-il des comportements récurrents qui permettent à un joueur de gagner certains points ? \n- Ou au contraire de les perdre ? \n- Caractériser les profils de joueurs afin de permettre une classification et ainsi mieux préparer tactiquement un match. \n- Quel est le lien entre la zone de placement du service sur la table adverse (divisée en 9 zone) et la performance du joueur?\n","pinned":true,"hidden":false,"mode":"md"},{"id":2047,"value":"// https://github.com/d3/d3-dsv\npsv = d3.dsvFormat(\";\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1923,"value":"raw_csv = FileAttachment(\"2016-ittf-korea-open-tristan-flore-vs-timo-boll-short.csv\").text().then(psv.parse).then(d => {\n return d.map((d) => ({\n ...d,\n Position: parseTime(d.Position),\n Durée: +d[\"Dur�e\"] //parseTime(d.Durée)\n }))\n \n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":756,"value":"legend({\n color: colorHeatmap,\n title: \"Bounces count\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":1078,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1333,"value":"mutable stroke = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":1052,"value":"mutable service = null","pinned":false,"hidden":false,"mode":"ojs"},{"id":1066,"value":"set = service ? sets[service.set - 1] : this","pinned":false,"hidden":false,"mode":"ojs"},{"id":822,"value":"viewof showHeatmap = Toggle({ value: true, label: 'Heatmap' })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1532,"value":"viewof showVideo = Toggle({ value: true, label: 'Show video' })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1251,"value":"md`# Services gridding`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1469,"value":"viewof setToShow = Range([1, sets.length], { step: 1, label: \"Set to show\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1255,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1800,"value":"viewof deviationRatio = Range([0, 1], {\n step: 0.01,\n value: 0,\n label: \"Deviation ratio\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1546,"value":"viewof scatterPlot = Toggle({ value: false, label: 'Scatterplot mode' })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1555,"value":"viewof scatterPlotX = Select(scatterPlotDimensions, {\n label: \"Scatter plot X axis\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1560,"value":"viewof scatterPlotY = Select(scatterPlotDimensions, { label: \"Scatter plot Y axis\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1270,"value":"md`# Visu temporelle`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1640,"value":"duration = (await vidvid.info(videoUrl, { crossOrigin: 'anonymous' })).duration","pinned":false,"hidden":false,"mode":"ojs"},{"id":1629,"value":"viewof timeline = stack(timelineConfig)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1731,"value":"timelineConfig = ({\n value: 0,\n min: 0,\n max: duration,\n step: 0.1,\n width: width,\n zoomRange: [0, 1000],\n zoomTranslateExtent: [-5, 11],\n zoomScaleExtent: [width / duration, 5000],\n tracks: tracksConfig\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1735,"value":"tracksConfig = [\n {\n constructor: springRuler,\n options: { speed: 5 }\n },\n ...scoresAB.map(data => ({\n constructor: intervals,\n options: {\n data,\n color: d => d.color\n }\n }))\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1675,"value":"scoresA = d3\n .groups(services, d => d.scoreA)\n .map(([score, data]) =>\n data.map(({ start, end }) => ({\n score,\n start,\n end,\n color: colors.get(players[0])\n }))\n )\n .flat()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1679,"value":"scoresB = d3\n .groups(services, d => d.scoreB)\n .map(([score, data]) =>\n data.map(({ start, end }) => ({\n score,\n start,\n end,\n color: colors.get(players[1])\n }))\n )\n .flat()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1700,"value":"scoresAB = d3\n .groups(scoresA.concat(scoresB), d => d.score)\n .sort((a, b) => d3.ascending(a[0], b[0]))\n .map(([_, data]) => data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":809,"value":"md`## SVG`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1761,"value":"function getMiddleDeviation(a, b, angle) {\n const dx = b.x - a.x,\n dy = b.y - a.y,\n norm = Math.sqrt(dx ** 2 + dy ** 2);\n\n const teta = Math.atan2(dy, dx),\n alpha = teta + angle;\n\n return {\n x: a.x + dx / 2 + norm * Math.cos(alpha) * deviationRatio,\n y: a.y + dy / 2 + norm * Math.sin(alpha) * deviationRatio\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1753,"value":"viewof curveType = {\n const curvesNames = Object.keys(d3).filter(k => k.includes('curve'));\n return Select(\n curvesNames.filter(\n name => !(name.includes('Open') || name.includes('Closed'))\n ),\n {\n value: \"curveBasis\",\n title: \"Curve type\"\n }\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1242,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":639,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1596,"value":"{\n const svg = d3\n .create(\"svg\")\n .attr('width', width)\n .attr('height', height)\n .attr(\"viewBox\", [\n -visualParameters.table_length / 2,\n -(visualParameters.table_width + 0.1) / 2,\n visualParameters.table_length,\n visualParameters.table_width + 0.1\n ]);\n createTable(svg);\n createHeatmap(svg, heatmapA.concat(heatmapB));\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":831,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":503,"value":"md`## Parsing`","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"function parseTime(time) {\n const [h, m, s] = time.split(':').map(d => Number(d));\n return h * 60 * 60 + m * 60 + s;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"function parseName(name) {\n return name.split('(')[0].trim();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"function parseIdCoup(name) {\n return Number(name.match(/\$([^)]+)\$/)[1]);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"function setPrecision(number, precision = 1000) {\n return Math.round(number * precision) / precision;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":432,"value":"findXY = (name, zone, service) => {\n var [x, y] = [0, 0];\n const r = name === players[1] ? 1 : -1;\n\n if (zone) {\n [x, y] = zoneToXY(zone);\n } else {\n const up = service?.toLowerCase().includes('droit');\n [x, y] = [cellWidth * 3.5, up ? cellHeight * 1.5 : -cellHeight * 1.5];\n }\n\n return [x, y].map(d => d * r);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":433,"value":"function zoneToXY(zone) {\n const col = zone.charAt(0),\n index = Number(zone.slice(1, 3));\n\n const y = (['D', 'M', 'G'].indexOf(col) - 1) * cellHeight,\n x = index === 21 ? cellWidth : cellWidth * index - cellWidth / 2;\n\n return [setPrecision(x), setPrecision(y)];\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1646,"value":"videoUrl = \"https://dataroom.liris.cnrs.fr/vizvid/2016-ittf-korea-open-tristan-flore-vs-timo-boll.mp4\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1568,"value":"scatterPlotDimensions = [\"length\", \"duration\", \"scoreA\", \"scoreB\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"players = [\n ...new Set(raw_csv.map(d => parseName(d.Nom)).filter(d => !d.includes('SET')))\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1106,"value":"colors = new Map([\n [players[0], d3.schemeBrBG[3][0]],\n [players[1], d3.schemeBrBG[3][2]]\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":183,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":335,"value":"sets = {\n const grps = d3.group(csv, d => d.set);\n\n const values = [];\n\n for (let s of grps.values()) {\n const start = s[0].time,\n { scoreA, scoreB, time } = s[s.length - 1];\n values.push({\n set: s[0].set,\n start,\n end: time,\n scoreA,\n scoreB,\n winner: scoreA > scoreB ? players[0] : players[1],\n values: s\n });\n }\n\n return values;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1855,"value":"services[0].heatmap","pinned":false,"hidden":false,"mode":"ojs"},{"id":873,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":194,"value":"viewof expendTable = Toggle({ label: 'Expend table' })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1222,"value":"strokeTypes = new Map([\n [\"Controle / Résistance\", 1.5],\n [\"Attaque / Offensif\", 5],\n [\"Poussette\", 0.5],\n [null, 3]\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":519,"value":"data_tennis_table","pinned":false,"hidden":false,"mode":"ojs"},{"id":883,"value":"matchDuration = d3.max(data_tennis_table.map(d => d.time))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1983,"value":"sample = `Nom;Position;Durée;Genre;Latéralité;Set;Système;Coup;Type de service;Type Coup TK;Zone de jeu;Type service\nSET (1);0:00:00.000;0:00:00.000;Garçons;Droitier/gaucher;1;Att/att;;;;;\nFLORE Tristan (1);0:00:00.000;0:00:00.000;Garçons;Coup droit;SET;Att/att;FLORE Tristan;Latéral droit;;;\nBOLL Timo (1);0:00:00.266;0:00:00.417;Garçons;Revers;SET;Att/att;BOLL Timo;;Controle / Résistance;M2;\nFLORE Tristan (2);0:00:00.684;0:00:00.350;Garçons;Revers;SET;Att/att;FLORE Tristan;;Attaque / Offensif;M3;\nBOLL Timo (2);0:00:01.034;0:00:00.333;Garçons;Revers;SET;Att/att;BOLL Timo;;Controle / Résistance;M3;\nFLORE Tristan (3);0:00:01.368;0:00:00.417;Garçons;Revers;SET;Att/att;FLORE Tristan;;Attaque / Offensif;M3;\nBOLL Timo (3);0:00:01.785;0:00:00.350;Garçons;Coup droit;SET;Att/att;BOLL Timo;;Attaque / Offensif;G3;\nFLORE Tristan (4);0:00:02.135;0:00:00.450;Garçons;Revers;SET;Att/att;Serveur Point -;;Controle / Résistance;G3;`","pinned":false,"hidden":false,"mode":"ojs"},{"id":744,"value":"md`## Geometry`","pinned":false,"hidden":false,"mode":"ojs"},{"id":376,"value":"parameters","pinned":false,"hidden":false,"mode":"ojs"},{"id":395,"value":"cellWidth = setPrecision(parameters.table_length / 6, 10000)","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"cellHeight = setPrecision(parameters.table_width / 3, 10000)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1040,"value":"visualParameters = ({\n ...parameters,\n playing_space_length: setPrecision(parameters.playing_space_length / 3),\n playing_space_width: setPrecision(parameters.playing_space_width / 3)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1608,"value":"visualViewbox = [\n -visualParameters.playing_space_length / 2,\n -visualParameters.playing_space_width / 2,\n visualParameters.playing_space_length,\n visualParameters.playing_space_width\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":373,"value":"import { parameters } from '@severo/table-tennis-pitch'","pinned":false,"hidden":false,"mode":"ojs"},{"id":738,"value":"md`## Bounces`","pinned":false,"hidden":false,"mode":"ojs"},{"id":721,"value":"heatmapA = ['D', 'M', 'G']\n .map(l =>\n d3\n .range(1, 4)\n .map(i => `${l}${i}`)\n .map(k => [k, bounceCount.get(players[0]).get(k) || 0])\n )\n\n .flat()","pinned":false,"hidden":false,"mode":"ojs"},{"id":787,"value":"heatmapB = ['D', 'M', 'G']\n .reverse()\n .map(l =>\n d3\n .range(1, 4)\n .map(i => `${l}${i}`)\n .map(k => [k, bounceCount.get(players[1]).get(k) || 0])\n )\n\n .flat()","pinned":false,"hidden":false,"mode":"ojs"},{"id":783,"value":"heatmap = players\n .map(p =>\n ['D', 'M', 'G'].map(l =>\n d3\n .range(1, 4)\n .map(i => `${l}${i}`)\n .map(k => [k, bounceCount.get(p).get(k) || 0])\n )\n )\n .flat(2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":727,"value":"extentBounce = d3.extent(heatmap.flat(Infinity).filter(d => Number(d)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":761,"value":"colorHeatmap = d3.scaleSequential(extentBounce, d3.interpolateBlues)","pinned":false,"hidden":false,"mode":"ojs"},{"id":663,"value":"bounceCount = d3.rollup(\n data_tennis_table,\n v => v.length,\n d => d.name,\n d => d.zone?.slice(0, 2)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"md`## Pretty`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1403,"value":"table_color = '#5687F6'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1408,"value":"playing_space_color = '#EA514D'","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"urlImage = FileAttachment(\"Table avec zones.png\").url()","pinned":false,"hidden":false,"mode":"ojs"},{"id":63,"value":"// FileAttachment(\"Table avec zones.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"margin = ({ top: 10, right: 10, bottom: 10, left: 10 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1074,"value":"import { videoTimeZoom } from 'd270e3fe3a3bf771'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1652,"value":"vidvid = import('https://unpkg.com/vidvid-info?module')","pinned":true,"hidden":false,"mode":"ojs"},{"id":753,"value":"import { legend } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":610,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"import { Table, Toggle, Range, Select } from '@observablehq/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1636,"value":"import { stack, springRuler, intervals } from '505ccf83529f32b3'","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"d3@v6\", \"d3-gridding@0.1\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}