2a:null 2b:["$","title",null,{"children":"Laser tag - Game statistics | Line Ton That | Observable"}] 31:T641,// Define the CCS for the game statistics sheet html` `32:T975,stat_row = (svg, data, statName, statFunction, statXPosition, xScale, xLabel, tickValues) => { // add selectedName (to filter and highlight) // Create the x axis svg.append("g") .attr("transform", `translate(0,${y(statName)+y.bandwidth()/6})`) .call(d3.axisBottom(xScale).ticks(null, data.format).tickValues(tickValues)) .call(g => g.selectAll(".tick line").clone().attr("stroke-opacity", 0.1) .attr("transform", `translate(0,${-y.bandwidth()/6})`).attr("y2", y.bandwidth()/6)) .call(g => g.selectAll(".domain").remove()); const g = svg.append("g") // Append a grey line g.append("line") .attr("stroke", "#aaa") .attr("x1", xScale(0))//d3.min([(xScale(0), xScale(d3.min(data, statFunction)))])) .attr("x2", xScale(d3.max(data, statFunction))) .attr("y1", y(statName)) .attr("y2", y(statName)) .style("stroke-dasharray", ("1,1")); // Append the dots g.selectAll("circle") .data(data) .join("circle") .attr("id", "dotsPlayers") .attr("cx", statXPosition) .attr("cy", y(statName)) .attr("fill", d => colorDots(d,player))//d => (d.team === "red") ? darkRed(0.3) : darkBlue(0.3))//blue) //"orange")//red(0.7) .attr("stroke", d => strokeDots(d,player)) .attr("stroke-width",d => (d.name === player) ? 3 : 0) .attr("r", 10) .append("title") .text((d,i) => `${d.name}: ${game_stats.map(statFunction)[i]}`); // Append the label g.append("text") .attr("dy", "0.35em") .attr("x", 0)//xLabel) // place the label at the begining of the row .attr("y", y(statName)) //.text(d=> `${statName}`) .text(d=> `${statName}${(statName === "efficiency") ? "*" : ""}`) //.text(d=> `${statName}${(statName === "efficiency") ? " (m/s)" : ""}${(statName === "efficiency") ? "*" : ""}`) // display the unit for efficiency .style("text-transform", "capitalize") // Append the figure g.append("text") .attr("dy", "0.35em") .attr("text-anchor", "end") .attr("text-align", "right") .attr("x", xStat) .attr("y", y(statName)) .text(d=> `${game_stats.filter(d=>d.name === player).map(statFunction)[0]}`); /* // used to place figures and dot charts g.append("circle") .attr("cx", xStat) .attr("cy", y(statName)) .attr("fill", "orange") .attr("r", 5); */ return svg.node(); }33:[{"id":"a88bf172147a266c9900743abf627f5f637d5d8d1c3edbf62bfe66cddf105e48b7dad74e7c8d880fd6b39649d4bac176aaac8ea259b964be38bda486953fce5e","href":"https://static.observableusercontent.com/files/a88bf172147a266c9900743abf627f5f637d5d8d1c3edbf62bfe66cddf105e48b7dad74e7c8d880fd6b39649d4bac176aaac8ea259b964be38bda486953fce5e","name":"game.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1686978846707.869,"size":9180}] 2e:{"id":"9dd737ede62accdb","slug":"laser-tag-game-statistics","title":"Laser tag - Game statistics","thumbnail":"27eae39400dbf1507663f0ce8a269330ac95cd206edec1d0c7094848fb0964d3","access_level":"public","create_time":"$D2023-06-14T07:43:40.423Z","update_time":"$D2023-07-06T05:46:14.713Z","view_time":null,"first_public_time":"$D2023-06-28T20:41:12.961Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"1280d736486ab85b","login":"linetonthat","name":"Line Ton That","avatar_url":"https://avatars-next.observableusercontent.com/ab500aeaecf9e12c5394b2acae0befba53662661fe30fc21f77b489444addba8","tier":"starter_2024"},"version":1717,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3210f3767f4a8fcb","login":"linetonthat","name":"Line Ton That","avatar_url":"https://avatars-next.observableusercontent.com/ab500aeaecf9e12c5394b2acae0befba53662661fe30fc21f77b489444addba8","tier":null}],"members":[{"type":"individual","id":"3210f3767f4a8fcb","login":"linetonthat","name":"Line Ton That","avatar_url":"https://avatars-next.observableusercontent.com/ab500aeaecf9e12c5394b2acae0befba53662661fe30fc21f77b489444addba8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Laser tag - Game statistics","cells":[{"id":0,"value":"# Laser tag - Game statistics","pinned":false,"hidden":false,"mode":"md"},{"id":676,"value":"viewof player = Inputs.select(game_stats.map(d=>d.name), {label: \"Select a player\", multiple: false})","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"html`\n

Laser tag • Game Statistics

Player: ${player}
Team: ${playerTeam}
Rank: #${playerRank}

Date: June 28, 2023
Start time: 10:00 A.M.
Duration: 1 hour 30 mins

\n ${charts}\n

\n \n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1295,"value":"## Layout","pinned":false,"hidden":false,"mode":"md"},{"id":836,"value":"### Font faces","pinned":false,"hidden":false,"mode":"md"},{"id":326,"value":"viewof fontTitle = Inputs.radio([\"Baskerville\", \"Noto Serif\",\"Creepster\",\"Pirata One\",\"Emilys Candy\",\"Uncial Antiqua\",\"Wallpoet\", \"Futura\", \"Poppins\", \"Oswald\",\"Bruno Ace\",\"Overpass Mono\", \"Rajdhani\", \"Play\",\"Orbitron\", \"Monomaniac One\", \"Saira\",\"Jura\",\"Chakra Petch\",\"Poiret One\",\"Glegoo\",\"Orbit\",\"Abel\",\"Josefin Sans\",\"Space Grotesk\",\"Metrophobic\",\"Gugi\",\"Black Ops One\",\"Goldman\",\"Cabin\",\"Righteous\",\"Staatliches\",\"Londrina Solid\",\"Comforter\", \"Caveat\",\"Dancing Script\"], {label: \"Select a font face for the title\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"viewof fontName = Inputs.radio([\"Baskerville\", \"Noto Serif\",\"Creepster\",\"Pirata One\",\"Emilys Candy\",\"Uncial Antiqua\",\"Wallpoet\", \"Futura\", \"Poppins\", \"Oswald\",\"Bruno Ace\",\"Overpass Mono\", \"Rajdhani\", \"Play\",\"Orbitron\", \"Monomaniac One\", \"Saira\",\"Jura\",\"Chakra Petch\",\"Poiret One\",\"Glegoo\",\"Orbit\",\"Abel\",\"Josefin Sans\",\"Space Grotesk\",\"Metrophobic\",\"Gugi\",\"Black Ops One\",\"Goldman\",\"Cabin\",\"Righteous\",\"Staatliches\",\"Londrina Solid\",\"Comforter\", \"Caveat\",\"Dancing Script\"], {label: \"Select a font face for the body text\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":538,"value":"### Font import","pinned":false,"hidden":false,"mode":"md"},{"id":95,"value":"// Import the selected font faces\nstyle1 = {\n yield html``\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":819,"value":"### Colors","pinned":false,"hidden":false,"mode":"md"},{"id":624,"value":"darkRed = (opacity) => d3.color(`rgba(199, 30, 55,${opacity})`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":629,"value":"darkBlue = (opacity) => d3.color(`rgba(24,9,247,${opacity})`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":669,"value":"// function for the dot color\ncolorDots = (d,name) => {if (d.name === name) {return (d.team === \"red\") ? darkRed(0.8) : darkBlue(0.8);}\n else {return (d.team === \"red\") ? darkRed(0.3) : darkBlue(0.3);}}","pinned":true,"hidden":false,"mode":"ojs"},{"id":702,"value":"// function for the dot stroke\nstrokeDots = (d,name) => {if (d.name === name) {return (d.team === \"red\") ? darkRed(1) : darkBlue(1);}\n else {return (d.team === \"red\") ? darkRed(0.5) : darkBlue(0.5);}}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1316,"value":"### Heights and widths","pinned":false,"hidden":false,"mode":"md"},{"id":304,"value":"labelsWidth = 50","pinned":false,"hidden":false,"mode":"ojs"},{"id":525,"value":"xStat = 145\n//viewof xStat = Inputs.range([130, 160], {step: 1, label: \"x position for figure\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"//viewof width = Inputs.range([300, 600], {step: 50, label: \"width of chart\"})\nwidth = 450","pinned":false,"hidden":false,"mode":"ojs"},{"id":1157,"value":"//viewof widthStatsBox = Inputs.range([300, 600], {step: 10, label: \"widthStatsBox\"})\nwidthStatsBox = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"//viewof heightCharts = Inputs.range([300, 700], {step: 50, label: \"heightCharts\"})\nheightCharts = 350","pinned":false,"hidden":false,"mode":"ojs"},{"id":1082,"value":"//viewof heightStatsBox = Inputs.range([300, 700], {step: 50, label: \"heightStatsBox\"})\nheightStatsBox = 430","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"outerWidth = 600\n//viewof outerWidth = Inputs.range([500, 1200], {step: 50, label: \"outerWidth\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"margin = ({top: 20, right: 30, bottom: 0, left: 60})","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"outerHeight = 700\n//viewof outerHeight = Inputs.range([600, 900], {step: 50, label: \"outerHeight\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1088,"value":"heightFeatures = 80\n//viewof heightFeatures = Inputs.range([50, 200], {step: 10, label: \"heightFeatures\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1391,"value":"### CSS","pinned":false,"hidden":false,"mode":"md"},{"id":87,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":879,"value":"## Score card","pinned":false,"hidden":false,"mode":"md"},{"id":1431,"value":"### Displaying all the stats (4 rows)","pinned":false,"hidden":false,"mode":"md"},{"id":354,"value":"charts = {\n const svg = d3.create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, heightCharts]);\n\n // Append a chart for each type of results\n stat_row(svg, game_stats, \"score\", d => d.score, d=> xScore(d.score), xScore, xStat, [0,5000,10000,15000]) ;\n\n stat_row(svg, game_stats, \"tags\", d => d.tags, d=> xTags(d.tags), xTags, xStat, [0,50,100,150]) ;\n\n stat_row(svg, game_stats, \"hits\", d => d.hits, d=> xHits(d.hits), xHits, xStat, [0,25,50,75,100]) ;\n\n stat_row(svg, game_stats, \"efficiency\", d => d.efficiency, d=> xEfficiency(d.efficiency), xEfficiency, xStat, [0,2,4, 6]) ;\n \n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":829,"value":"### One row per statistic including a dot chart","pinned":false,"hidden":false,"mode":"md"},{"id":146,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":1708,"value":"tooltip = {\n stat_row\n \n const tooltip = d3.select(\"body\").append(\"div\")\n .attr(\"class\", \"svg-tooltip\")\n .style(\"position\", \"absolute\")\n .style(\"visibility\", \"hidden\")\n .text(\"I'm a circle!\");\n\n d3.select(\"#dotsPlayers\")\n .on(\"mouseover\", function(){\n return tooltip.style(\"visibility\", \"visible\");\n })\n .on(\"mousemove\", function(){\n return tooltip.style(\"top\", (d3.event.pageY-10)+\"px\").style(\"left\",(d3.event.pageX+10)+\"px\");\n })\n .on(\"mouseout\", function(){\n return tooltip.style(\"visibility\", \"hidden\");\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":817,"value":"## Tests","pinned":false,"hidden":false,"mode":"md"},{"id":685,"value":"playerRank = game_stats.filter(d=>d.name === player).map(d=>d.rank)[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":690,"value":"playerTeam = game_stats.filter(d=>d.name === player).map(d=>d.team)[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":714,"value":"playerTeamColor = (game_stats.filter(d=>d.name === player).map(d=>d.team)[0] === \"red\") ? darkRed(1) : darkBlue(1);","pinned":true,"hidden":false,"mode":"ojs"},{"id":722,"value":"//playerTeamColor.formatHex()","pinned":true,"hidden":false,"mode":"ojs"},{"id":493,"value":"## Scales","pinned":false,"hidden":false,"mode":"md"},{"id":109,"value":"y = d3.scaleBand()\n .domain(statsList)\n .range([margin.top, heightCharts - margin.bottom])\n .padding(0.1)\n .round(true)","pinned":true,"hidden":false,"mode":"ojs"},{"id":107,"value":"xScore = d3.scaleLinear()\n .domain(d3.extent(game_stats, d => d.score))\n .range([xStat + margin.left, width - margin.right])\n .interpolate(d3.interpolateRound)","pinned":true,"hidden":false,"mode":"ojs"},{"id":491,"value":"xTags = d3.scaleLinear()\n .domain([0, d3.max(game_stats, d => d.tags)])\n .range([xStat + margin.left, width - margin.right])\n .interpolate(d3.interpolateRound)","pinned":true,"hidden":false,"mode":"ojs"},{"id":506,"value":"xHits = d3.scaleLinear()\n .domain([0, d3.max(game_stats, d => d.hits)])\n .range([xStat + margin.left, width - margin.right])\n .interpolate(d3.interpolateRound)","pinned":true,"hidden":false,"mode":"ojs"},{"id":510,"value":"xEfficiency = d3.scaleLinear()\n .domain([0, d3.max(game_stats, d => d.efficiency)])\n .range([xStat + margin.left, width - margin.right])\n .interpolate(d3.interpolateRound)","pinned":true,"hidden":false,"mode":"ojs"},{"id":100,"value":"## References:\n* Font-family and styling: https://observablehq.com/@virginiapoltrack/dinosaurs\n* How to center a div: https://observablehq.com/@triptych/how-to-center-a-div\n* Dot plot: https://observablehq.com/@d3/dot-plot/2\n* Dot strip plot: https://observablehq.com/@d3/dot-strip-plot\n* Inputs: https://observablehq.com/@observablehq/inputs?collection=@observablehq/inputs\n* [TO DO] Tooltip: https://observablehq.com/@d3/mareys-trains, https://observablehq.com/@d3/line-with-tooltip?collection=@d3/charts","pinned":false,"hidden":false,"mode":"md"},{"id":1420,"value":"## Data","pinned":false,"hidden":false,"mode":"md"},{"id":297,"value":"statsList = [\"score\",\"tags\",\"hits\",\"efficiency\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":253,"value":"workbook = FileAttachment(\"game.xlsx\").xlsx()","pinned":true,"hidden":false,"mode":"ojs"},{"id":255,"value":"game_stats = workbook.sheet(0, { headers: true, range: \":H\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":261,"value":"game_stats","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":16,"value":"html = htl.html","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2f:"$2e:body"