2f:T5b7,Plot.plot({ marks: [ // apply vertical grid lines Plot.gridX({stroke:"black"}), // plot horizontal lines, similar to geom_line Plot.ruleY(by_instructor, {x: "minutes", y: "instructor", strokeWidth: 40, sort: {y: "x", reverse:true}, stroke:'#E13026'}), // plot instructor images Plot.image(by_instructor, {x: 0, y:"instructor", //map src to image url variable in data src:"src", //horizontal offset dx: -30, border: "black", //image size arguments width: 40, height:40}), //customize Y axis Plot.axisY({tickSize: 0, textAnchor:"start", fill:"white", fontWeight:"bold", fontFamily:"Archivo", fontSize:13, size:15, dy: 0, dx: 25}), //customize X axis Plot.axisX({tickSize:0, fontSize:15, fontFamily:"Archivo"}) ], // X & Y axis labels x: { label: "Minutes" }, y: { label: "" }, //plit size width:900, height:600, marginLeft:50, marginRight:100 })30:[{"id":"0f2f645fe70f3b9825d97178a74e36123a476aac0e10d6694ec0449f765b2973fd4b5faf68635f449a85e7c2dfb311617681a6992e89c5f425dd5264b3edd561","href":"https://static.observableusercontent.com/files/0f2f645fe70f3b9825d97178a74e36123a476aac0e10d6694ec0449f765b2973fd4b5faf68635f449a85e7c2dfb311617681a6992e89c5f425dd5264b3edd561","name":"peloton_data.csv","type":"text/csv","lastModified":1676391553379.531,"size":661097},{"id":"b826a2dd0ec49a9251fce5eb503de580edf639d89360f4da038f3bf512f59922743394135ed9f62b5cabe6c4dec71d176bb47a4f6eb5d68d7c6b5c1aa8fc88d1","href":"https://static.observableusercontent.com/files/b826a2dd0ec49a9251fce5eb503de580edf639d89360f4da038f3bf512f59922743394135ed9f62b5cabe6c4dec71d176bb47a4f6eb5d68d7c6b5c1aa8fc88d1","name":"peloton_data@1.csv","type":"text/csv","lastModified":1676421368322.235,"size":665616}] 2d:{"title":"My Peloton Data Analysis","cells":[{"id":525,"value":"# My Peloton Data Analysis","pinned":false,"hidden":false,"mode":"md"},{"id":239,"value":"## Try out Observable Plot\nTest out interactive plot with a custom input (workout types). Input works with a dynamic SQL query above, results are filtered by workout type. Data then feeds to plot below to generate horizontal bar graph.","pinned":false,"hidden":false,"mode":"md"},{"id":241,"value":"viewof workout_type = Inputs.select([\"cycling\", \"strength\", \"yoga\", \"stretching\"], {label: \"Workout Type\", value: \"cycling\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":381,"value":"## Beeswarm Plots with Hovers and Tooltips\n\nUsed Plot function from Mike Freeman's [tutorial](https://observablehq.com/@mkfreeman/plot-tooltip).\n\nFirst plot - test regular beeswarm plot. Second plot - test beeswarm plot with images.","pinned":false,"hidden":false,"mode":"md"},{"id":368,"value":"import {Plot} from \"@mkfreeman/plot-tooltip\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":326,"value":"### Beeswarm Plot: Distribution of Total Output\nPersonal Peloton fitness data for 30min cycling classes","pinned":false,"hidden":false,"mode":"md"},{"id":315,"value":"Plot.plot({\n marks: [\n Plot.gridX({stroke:\"black\"}),\n Plot.dot(rides, \n Plot.dodgeY({x: \"total_output\", \n fill:\"#E13026\",\n title:\"avg_difficulty\",\n // center points in swarm\n anchor:\"middle\",\n r:6}),\n ),\n //customize X axis\n Plot.axisX({tickSize:0,\n fontSize:15,\n fontFamily:\"Menlo\"})\n ],\n height:300,\n width:800,\n marginBottom:50\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":493,"value":"### Beeswarm Plot: Average Difficulty by Instructor\nBased on Personal Peloton Data","pinned":false,"hidden":false,"mode":"md"},{"id":428,"value":"Plot.plot({\n marks: [\n Plot.gridX({stroke:\"black\"}),\n Plot.image(instructor_classes, \n Plot.dodgeY({x: \"avg_diff\", \n src: \"src\",\n title: (d) =>\n `${d.instructor} \\n ${d.avg_diff}`,\n // center points in swarm\n r:21,\n anchor:\"middle\",\n width:40,\n height:40}),\n ),\n //customize X axis\n Plot.axisX({tickSize:0,\n fontSize:15})\n ],\n height:400,\n width:800,\n marginBottom:50,\n marginLeft:50,\n marginRight:50,\n style:{\n backgroundColor:\"white\",\n color:\"black\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":502,"value":"Plot.plot({\n marks: [\n Plot.gridX({stroke:\"black\"}),\n Plot.dot(instructor_classes, \n Plot.dodgeY({x: \"avg_diff\", \n fill:\"#E13026\",\n title: (d) =>\n `${d.instructor} \\n ${d.avg_diff}`,\n // center points in swarm\n r:\"workouts\",\n anchor:\"middle\"}),\n ),\n //customize X axis\n Plot.axisX({tickSize:0,\n fontSize:15})\n ],\n height:400,\n width:800,\n marginBottom:50,\n marginLeft:50,\n marginRight:50,\n style:{\n backgroundColor:\"white\",\n color:\"black\"\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":451,"value":"","pinned":true,"hidden":false,"mode":"sql","output":"","database":"null"},{"id":0,"value":"# Peloton Data\nUsing my personal Peloton Data to test out Observable plots.","pinned":false,"hidden":false,"mode":"md"},{"id":235,"value":"## Import Data from csv","pinned":false,"hidden":false,"mode":"md"},{"id":511,"value":"peloton_data = await FileAttachment(\"peloton_data@1.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":237,"value":"## Use SQL Queries\n\nAggregate data from csv with a SQL query. The table represents the name of the cell where we imported data - `peloton_data`.","pinned":false,"hidden":false,"mode":"md"},{"id":309,"value":"SELECT \n id\n ,ride_image\n ,instructor\n ,end_time\n ,avg_difficulty\n ,CAST(total_output as int) total_output\nFROM peloton_data\nWHERE fitness_discipline = 'cycling' and total_output <> 'NA' and ride_duration = 30*60","pinned":true,"hidden":false,"mode":"sql","output":"rides","database":"var:peloton_data"},{"id":397,"value":"SELECT \n instructor\n ,CONCAT('https://raw.githubusercontent.com/tashapiro/peloton-stats/main/images/instructors/circle/',REPLACE(instructor,' ','_'),'.png') as src\n ,ROUND(sum(avg_difficulty * ride_duration)/sum(ride_duration),2) as avg_diff\n ,COUNT(id)::int as workouts\nFROM peloton_data\nWHERE avg_difficulty>0 and avg_difficulty<10 and instructor!='NA'\nGROUP BY instructor\nHAVING workouts>2","pinned":true,"hidden":false,"mode":"sql","output":"instructor_classes","database":"var:peloton_data"},{"id":257,"value":"SELECT * FROM(\n SELECT \n instructor\n ,CONCAT('https://raw.githubusercontent.com/tashapiro/peloton-stats/main/images/instructors/circle/',REPLACE(instructor,' ','_'),'.png') as src\n ,CAST(sum(CAST(ride_duration as int)) as int)/60 as minutes\n--,cast(count(fitness_discipline) as int) as workouts\n-- ,CAST(sum(CAST(distance as numeric)) as int) as miles\nFROM peloton_data\nWHERE fitness_discipline = ${workout_type} and ride_duration>0 and instructor<>'NA'\nGROUP BY 1\nORDER BY 3 desc)\nLIMIT 7","pinned":true,"hidden":false,"mode":"sql","output":"by_instructor","database":"var:peloton_data"},{"id":548,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":554,"value":"viewof date = Inputs.date({label: \"Date\", value: \"2023-04-29\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":558,"value":"viewof table = Inputs.table(cars)","pinned":true,"hidden":false,"mode":"ojs"},{"id":556,"value":"\n \n \n \n \n \n \n \n \n ${cars.slice(0, 5).map(car => htl.html`\n \n \n \n `)}\n \n

Name	Fuel economy	Year
${car[\"name\"]}	${car[\"economy (mpg)\"]} mpg	’${car[\"year\"]}

","pinned":false,"hidden":false,"mode":"html"}],"files":"$W30","stdlib":"1","titling":"auto"}