31:[{"id":"31ca24545a0603dce099d10ee89ee5ae72d29fa55e8fc7c9ffb5ded87ac83060d80f1d9e21f4ae8eb04c1e8940b7287d179fe8060d887fb1f055f430e210007c","href":"https://static.observableusercontent.com/files/31ca24545a0603dce099d10ee89ee5ae72d29fa55e8fc7c9ffb5ded87ac83060d80f1d9e21f4ae8eb04c1e8940b7287d179fe8060d887fb1f055f430e210007c","name":"athletes.csv","type":"text/csv","lastModified":1659111699998.199,"size":841836}] 2f:{"title":"Olympic Data!","cells":[{"id":0,"value":"

Observable Inputs › Hello

\n\n# Olympic Data!\n\nOur data comes from a CSV dataset of athletes that participated in the 2016 Rio Olympics (from [Matt Riggott](https://flother.is/2017/olympic-games-data/)). Click to choose a sport, or ctrl-click to select multiple sports. The filtered data will appear in the table and athlete heights are visualized below.","pinned":false,"hidden":false,"mode":"md"},{"id":560,"value":"html` \n

${viewof sport}

${viewof statsTable}

\n ${viewof separate} \n `","pinned":false,"hidden":false,"mode":"ojs"},{"id":570,"value":"html` \n

${viewof graphResult}

${viewof boxplots}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":640,"value":"viewof boxplots = Plot.plot({\n x: {\n grid: true,\n inset: 6,\n domain: [1.3, 2.2]\n },\n y: {\n label: null,\n },\n marks: [\n Plot.boxX(selectedAthletes, {y: \"sport\", x: \"height\"})\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":191,"value":"Inputs.table(selectedAthletes, {columns})","pinned":false,"hidden":false,"mode":"ojs"},{"id":557,"value":"

Appendix

","pinned":false,"hidden":false,"mode":"html"},{"id":125,"value":"columns = athletes.columns.slice(1, -1) // hide the id and info column","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"athletes = FileAttachment(\"athletes.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":313,"value":"\nselectedAthletes = athletes.filter(d => sport.includes(d.sport))","pinned":true,"hidden":false,"mode":"ojs"},{"id":538,"value":"testSportsData = {\n let testSportsData = [];\n sportsDataGroups.forEach((values, keys) => {\n testSportsData.push([keys, d3.mean(values.map( val => val.height )), d3.deviation(values.map( val => val.height ))])\n })\n\n return testSportsData;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":534,"value":"sportsDataGroups = d3.group(selectedAthletes, d=>d.sport)","pinned":true,"hidden":false,"mode":"ojs"},{"id":184,"value":"viewof sport = Inputs.select(athletes.map(d => d.sport), {sort: true, unique: true, label: \"sport\", multiple:true});\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":494,"value":"viewof separate = Inputs.toggle({label: \"Separate plots\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":523,"value":"viewof statsTable = Inputs.table(testSportsData,{\n header:[\"name\", \"mean\", \"sd\"],\nmaxWidth:300})","pinned":true,"hidden":false,"mode":"ojs"},{"id":300,"value":"viewof graphResult = {\n if (separate) { \n return Plot.plot({\n grid: true,\n x: {\n domain: [1.3, 2.2]\n },\n y: {\n label: null\n },\n facet: {\n data:selectedAthletes,\n y:\"sport\",\n },\n marks: [\n Plot.rectY(selectedAthletes, Plot.binX({y: \"count\"}, {x: \"height\", fill: \"sport\"})),\n Plot.ruleY([0])\n ]\n})\n} else {\n return Plot.plot({\n grid: true,\n x: {\n domain: [1.3, 2.2]\n },\n marks: [\n Plot.rectY(selectedAthletes, Plot.binX({y: \"count\"}, {x: \"height\", fill: \"sport\", mixBlendMode: \"multiply\"})),\n Plot.ruleY([0])\n ]\n})\n}\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}