44:["$","title",null,{"children":"Volleycomps 2.0 Demo | Sam Rosenberg | Observable"}] 4c:T437,demo_graphic = { let svg = d3.create('svg').style("background-color", 'white').attr("preserveAspectRatio", "none").attr("viewBox", "0 0 900 600"); let data_graph = data; if (checkboxes === "kills") { data_graph = data_graph.filter(d => d.result === "kill") } let x_scale = d3.scaleLinear() .domain([0, 100]) .range([200, 700]); let y_scale = d3.scaleLinear() .domain([0, 100]) .range([50, 650]); svg.append("rect") .attr("id", "court") .attr("x", x_scale(0)) .attr("y", y_scale(0)) .attr("width", 500) .attr("height", 500).attr("fill", "white").attr("stroke", "black").attr("stroke-thickness", 4);'' svg.selectAll('shots') .data(data_graph) .join('line') .attr('x1', function(d, i){return x_scale(d.start_x)}) .attr('x2', function(d, i){return x_scale(d.end_x)}) .attr('y1', function(d, i){return y_scale(d.start_y)}) .attr('y2', function(d, i){return y_scale(d.end_y)}) .attr("stroke", function(d) {if (d.result === "kill"){return "#000"} else {return "red"}}); return svg.node(); }4d:Tcd1,heatmap_zones = { let svg = d3.create('svg').style("background-color", 'white').attr("preserveAspectRatio", "none").attr("viewBox", "0 0 900 700"); let zoneColor = d3.scaleLinear() .domain([0, 1]) .range(['white', '#ca0b1b']) .interpolate(d3.interpolateLab) let data_graph = data; if (checkboxes === "kills") { data_graph = data_graph.filter(d => d.result === "kill") } let x_zone_scale = d3.scaleOrdinal() .domain([1, 2, 3, 4, 5, 6, 7, 8, 9]) .range([200, 367, 533, 200, 367, 533, 200, 367, 533]); let y_zone_scale = d3.scaleOrdinal() .domain([1, 2, 3, 4, 5, 6, 7, 8, 9]) .range([50, 50, 50, 250, 250, 250, 450, 450, 450]); let x_zone = d3.scaleQuantize() .domain([0, 100]) .range([1, 2, 3]); let y_zone = d3.scaleQuantize() .domain([0, 100]) .range([0, 1, 2]); let zone_freq = {1:0, 2:0, 3:0, 4:0, 5:0, 6:0, 7:0, 8:0, 9:0} let kill_freq = {1:0, 2:0, 3:0, 4:0, 5:0, 6:0, 7:0, 8:0, 9:0} for (let i = 0; i d.result === "kill") } let x_scale = d3.scaleLinear() .domain([0, 100]) .range([200, 700]); let y_scale = d3.scaleLinear() .domain([0, 100]) .range([50, 650]); svg.append("rect") .attr("id", "court") .attr("x", x_scale(0)) .attr("y", y_scale(0)) .attr("width", 500) .attr("height", 500).attr("fill", "white").attr("stroke", "black").attr("stroke-thickness", 4);'' const curve = d3.line().curve(d3.curveNatural); // N.B. There are several pre-defined functions for curve interpolation in D3; curveNatural is one. // It's also possible to define your own curve. // See https://github.com/d3/d3-shape/blob/master/README.md#curves for (let i = 0; i 12 * i + 16)); const timer = d3.timer(tick); timer.stop(); canvas.update = function(event, pointers) { lastPointers = pointers || d3.pointers(event, canvas); if (event) events.push({ date: +new Date(), event }); tick(); }; function tick() { const now = +new Date(); // remove old events while (events.length > 0 && events[0].date < now - 1000) events.shift(); if (!events.length) clean(); else timer.restart(tick); paint(); } function clean() { lastPointers = []; paint(); timer.stop(); } function paint() { context.clearRect(0, 0, width, height); context.fillStyle = "#333"; context.fillText(`.on(…)`, 2, 8); context.fillStyle = "#777"; for (const type of canvas.__on.map(d => d.type)) { context.fillText(`${type}`, 2, h(type) + 8); } for (const [type, list] of d3.group(events, d => d.event.type)) { list.reverse(); context.fillStyle = timeColor(list[0].date); context.fillRect(0, h(type), 120, 10); for (let i = 0; i < list.length; i++) { context.fillStyle = timeColor(list[i].date); context.fillRect(122 + 12 * i, h(type), 10, 10); } context.fillStyle = "black"; context.fillText(`${type}`, 2, h(type) + 8); } context.fillStyle = "black"; for (const pointer of lastPointers) { context.setLineDash([2, 2]); context.lineWidth = 0.5; context.beginPath(); context.moveTo(pointer[0], 0); context.lineTo(pointer[0], height); context.moveTo(0, pointer[1]); context.lineTo(width, pointer[1]); context.stroke(); context.setLineDash([]); context.lineWidth = 0.25; context.beginPath(); context.moveTo(...pointer); const sx = pointer[0] < width / 2 ? 1 : -1; const sy = pointer[1] < height / 2 ? 1 : -1; context.lineTo(pointer[0] + sx * 23, pointer[1] + sy * 23); context.stroke(); context.textAlign = sx > 0 ? "start" : "end"; context.fillText( `${+pointer[0].toFixed(3)}, ${+pointer[1].toFixed(3)}`, pointer[0] + sx * 28, pointer[1] + sy * 26 ); context.textAlign = "start"; } if (context.canvas.callback) context.canvas.callback(context); } // repaint after the listeners have been attached setTimeout(paint, 10); return canvas; }50:[] 48:{"id":"5dad4621115e00e0","slug":"volleycomps-2-0-demo","title":"Volleycomps 2.0 Demo","thumbnail":"d6f122eb5d8f66b2be78bf483ba3bd77a9ae5850108ecdbb77a42cdf554556d0","access_level":"public","create_time":"$D2022-10-18T00:18:38.022Z","update_time":"$D2023-02-13T06:12:41.188Z","view_time":null,"first_public_time":"$D2022-11-11T15:27:41.167Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"0b364ffce007b0e2","login":"flameserpent","name":"Sam Rosenberg","avatar_url":"https://avatars-next.observableusercontent.com/f6b2e40978a5a77f650f79fce7e084075974965a44c6896859475fe868c236f7","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":232,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5526659a985a146e","login":"flameserpent","name":"Sam Rosenberg","avatar_url":"https://avatars-next.observableusercontent.com/f6b2e40978a5a77f650f79fce7e084075974965a44c6896859475fe868c236f7","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"5526659a985a146e","login":"flameserpent","name":"Sam Rosenberg","avatar_url":"https://avatars-next.observableusercontent.com/f6b2e40978a5a77f650f79fce7e084075974965a44c6896859475fe868c236f7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Volleycomps 2.0 Demo","cells":[{"id":0,"value":"# Volleycomps 2.0 Demo","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":127,"value":"Major Questions for Data Aquisition:\nDo we want an svg to draw on for data collection? Or what might make sense is whatever element we need, layered on top of a svg which will track things?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":41,"value":"viewof checkboxes = Inputs.radio([\"kills\", \"all\"], {label: \"Select:\", value: [\"all\"]})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"viewof colorBy = Inputs.radio([\"kills\", \"frequency\", \"kill percentage\"], {label: \"Color by:\", value: [\"frequency\"]})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"Data Calls should either occur on a rotation by rotation basis, or a team by team basis. it's easy to filter by rotation.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":148,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"//https://observablehq.com/d/5dad4621115e00e0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"d3.select(newchart())\n .on(\n \"click wheel \" +\n \"mouseenter mouseout mousedown mouseup mousemove \" +\n \"touchstart touchend touchmove \" +\n \"pointerenter pointerout pointerup pointerdown pointermove lostpointercapture\",\n function(event) {\n event.preventDefault();\n this.update(event);\n }\n )\n .node()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"$4f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"timeColor = {\n const r = d3.scaleSequential(d3.interpolateCool).domain([1000, -1000]);\n return t => r(t - new Date());\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"r = d3.scaleSequential(d3.interpolateCool).domain([1000, -1000]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"x_zone = d3.scaleQuantize()\n .domain([0, 100])\n .range([1, 2, 3]);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"x_zone(43)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"url = \"https://docs.google.com/spreadsheets/d/17aJZXUJYCIiwvAcNDApP59jWHviTJ74GUDxbn0E8SUY/edit?usp=sharing\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"data = d3.csv(getCsvUrl(url), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"console.log(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"rotation_url = \"https://docs.google.com/spreadsheets/d/1-2xlDwuyv7931E2xxH6gN9LrDWrBkarynG6vCW00ojo/edit?usp=sharing\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"rotation_data = d3.csv(getCsvUrl(rotation_url), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"console.log(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"// Converts a Google Sheets website URL to its CSV URL. You can also go to “File → Publish to web”, select the “Comma-separated values (.csv)” type, select the sheet with your data, and use that CSV URL directly with `d3.csv` above.\n\ngetCsvUrl = url => {\n url = new URL(url);\n const id = url.pathname.split(\"/\")[3]\n const sheet = new URLSearchParams(url.hash.slice(1)).get(\"gid\") || 0;\n return `https://docs.google.com/spreadsheets/d/${id}/gviz/tq?tqx=out:csv&sheet=${sheet}`\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"svgPath = (points, command) => {\n // build the d attributes by looping over the points\n const d = points.reduce((acc, point, i, a) => i === 0\n // if first point\n ? `M ${point[0]},${point[1]}`\n // else\n : `${acc} ${command(point, i, a)}`\n , '')\n return ``\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"trace = {\n let svg = d3.create('svg').style(\"background-color\", 'white').attr(\"preserveAspectRatio\", \"none\").attr(\"viewBox\", \"0 0 900 600\");\n\n const points = [[5, 10], [10, 40], [40, 30], [60, 5], [90, 45], [120, 10], [150, 45], [200, 10]]\n\n const lineCommand = point => `L ${point[0]} ${point[1]}`\n\n svg.innerHTML = svgPath(points, lineCommand)\n \n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":206,"value":"points = [[5, 10], [10, 40], [40, 30], [60, 5], [90, 45], [120, 10], [150, 45], [200, 10]]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"lineCommand = point => `L ${point[0]} ${point[1]}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"svg = document.querySelector('.svg')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"trace.innerHTML = trace.innerHTML+ svgPath(points, lineCommand)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"line = (pointA, pointB) => {\n const lengthX = pointB[0] - pointA[0]\n const lengthY = pointB[1] - pointA[1]\n return {\n length: Math.sqrt(Math.pow(lengthX, 2) + Math.pow(lengthY, 2)),\n angle: Math.atan2(lengthY, lengthX)\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"controlPoint = (current, previous, next, reverse) => {\n // When 'current' is the first or last point of the array\n // 'previous' or 'next' don't exist.\n // Replace with 'current'\n const p = previous || current\n const n = next || current\n // The smoothing ratio\n const smoothing = 0.2\n // Properties of the opposed-line\n const o = line(p, n)\n // If is end-control-point, add PI to the angle to go backward\n const angle = o.angle + (reverse ? Math.PI : 0)\n const length = o.length * smoothing\n // The control point position is relative to the current point\n const x = current[0] + Math.cos(angle) * length\n const y = current[1] + Math.sin(angle) * length\n return [x, y]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"bezierCommand = (point, i, a) => {\n // start control point\n const [cpsX, cpsY] = controlPoint(a[i - 1], a[i - 2], point)\n // end control point\n const [cpeX, cpeY] = controlPoint(point, a[i - 1], a[i + 1], true)\n return `C ${cpsX},${cpsY} ${cpeX},${cpeY} ${point[0]},${point[1]}`\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"trace.innerHTML = trace.innerHTML+ svgPath(points, bezierCommand)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W50","stdlib":"1"}} 24:null