27:null 28:["$","title",null,{"children":"Dashboard: PELOTANYA | Antoine Faché | Observable"}] 2d:T525,dynamicHTML = { const summary = document.querySelector('.summary'); summary.innerHTML = `

${totals[0].workouts}

Workouts

${totals[0].hours.toFixed(1)}

Hours

${totals[0].active_days}

Active Days

${totals[0].distance}

Miles

` }2e:T8d3,2f:[{"id":"86bbcbc0bee10f40e8fe0b77c0bb43d0acb2d4fb204afb72b42716c018876e408e3fa00517ffd28cd226e43704a94837a0b907848e97f7dbeb1becd2a8a45fea","href":"https://static.observableusercontent.com/files/86bbcbc0bee10f40e8fe0b77c0bb43d0acb2d4fb204afb72b42716c018876e408e3fa00517ffd28cd226e43704a94837a0b907848e97f7dbeb1becd2a8a45fea","name":"ref_instructors.csv","type":"text/csv","lastModified":1691168497301.647,"size":20360},{"id":"6324f1b7476a6395b71450d25bb723362759d2eb9f4b8b62045c1b83d1ff6495dd1cc8ac334927b1430719b1f0943b587cc6fce9e8f005c83aed259b3dcb313b","href":"https://static.observableusercontent.com/files/6324f1b7476a6395b71450d25bb723362759d2eb9f4b8b62045c1b83d1ff6495dd1cc8ac334927b1430719b1f0943b587cc6fce9e8f005c83aed259b3dcb313b","name":"peloton-data@14.csv","type":"text/csv","lastModified":1691168497301.647,"size":614638}] 2b:{"id":"bda4dd0a4cc250ca","slug":null,"title":"Dashboard: PELOTANYA","thumbnail":"e32c97d0d61b75bcbc8e3f318a375cc77cfa43f0eaa5df6f1a8cbfe1606195a9","access_level":"public","create_time":"$D2023-08-04T17:01:37.301Z","update_time":"$D2023-08-04T17:01:37.301Z","view_time":null,"first_public_time":"$D2023-08-04T17:01:37.301Z","has_unpublished_edits":null,"fork":{"id":"25236069417628dd","slug":null,"title":"Dashboard: PELOTANYA","owner":{"id":"230f604926360997","login":"tashapiro","name":"Tanya Shapiro"}},"stars":0,"starred":false,"owner":{"type":"team","id":"ab5c695e0d9f5ed0","login":"anthonyzornig","name":"Antoine Faché","avatar_url":"https://avatars-next.observableusercontent.com/73fe10f97d0449896f1255d6ce2abd09ac0d89a7c87afb645a54faeb67cc288a","tier":"starter_2024"},"version":837,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a6dae7277d3d666a","login":"anthonyzornig","name":"Antoine Faché","avatar_url":"https://avatars-next.observableusercontent.com/73fe10f97d0449896f1255d6ce2abd09ac0d89a7c87afb645a54faeb67cc288a","tier":null}],"members":[{"type":"individual","id":"a6dae7277d3d666a","login":"anthonyzornig","name":"Antoine Faché","avatar_url":"https://avatars-next.observableusercontent.com/73fe10f97d0449896f1255d6ce2abd09ac0d89a7c87afb645a54faeb67cc288a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Dashboard: PELOTANYA","cells":[{"id":0,"value":"# Dashboard: PELOTANYA\n\nPersonal workout dashboard based on activity on my Peloton app.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":586,"value":"viewof timeFrame = Inputs.radio([\"ITD\", \"YTD\",\"MTD\"], {label: \"Timeframe:\", value: \"YTD\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"viewof filters = (\n Inputs.form({ \n startDate: Inputs.date({label: \"Start Date\", value: startDate}),\n endDate: Inputs.date({label: \"End Date\", value: today}),\n workoutType: Inputs.select([\"Bike Bootcamp\", \"Cycling\",\"Running\",\"Strength\", \"Stretching\",\"Tread Bootcamp\",\"Walking\",\"Yoga\"], \n {label: \"Workout Type\", multiple:5, value:[\"Bike Bootcamp\", \"Cycling\",\"Running\",\"Strength\",\"Stretching\",\"Tread Bootcamp\",\"Walking\",\"Yoga\"]})\n },\n {template})\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":130,"value":"

By Instructor${instructorTable()}

Monthly${lineChart()}

By Type${barChart()}

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":600,"value":"## Date Selection\nCreate default start and end dates for filter input based on radio button from time frame, e.g. YTD return the first day of the year based on today's date.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":606,"value":"todayRaw = new Date();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":590,"value":"today = new Date().toISOString().slice(0, 10);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":602,"value":"firstDayOfMonth = new Date(todayRaw.getFullYear(), todayRaw.getMonth(), 1).toISOString().slice(0, 10);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":613,"value":"firstDayOfYear = new Date(todayRaw.getFullYear(), 0, 1).toISOString().slice(0, 10);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":623,"value":"firstDateWorkout = d3.min(workouts, d=>d.created_at).toISOString().slice(0, 10);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":616,"value":"startDate = timeFrame === \"ITD\" ? firstDateWorkout : timeFrame===\"YTD\" ? firstDayOfYear : firstDayOfMonth","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":703,"value":"Create list of months to pass into data base. Useful for aggregating by month in queries.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":630,"value":"months = d3.timeMonths(new Date(2019, 1, 1), new Date()).map(function(date) {\n return { month: d3.timeFormat(\"%Y-%m-%d\")(date) };\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"## Custom Functions\n\nFunctions to create chart/table widgets. Helper functions to stylize additional elements, e.g. table images and heatmap effect.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":249,"value":"instructorTable = () => { return Inputs.table(byInstructor, {\n columns: [\"instructor_name\", \"avg_difficulty\",\"workouts\",\"minutes\"],\n header: {\n instructor_name: \"Instructor\",\n avg_difficulty: \"Avg Difficulty\",\n workouts: \"Workouts\",\n minutes: \"Minutes\"\n },\n align: {\n avg_difficulty:\"center\",\n workouts: \"center\",\n minutes: \"left\"\n },\n width: {\n instructor_name:170,\n avg_difficulty:85\n },\n format: {\n instructor_name: x => instructor_image(x),\n avg_difficulty: x => heatmap(x,min_diff-0.1,max_diff+0.1),\n minutes: sparkbar(d3.max(byInstructor, d => d.minutes)),\n },\n maxWidth:550,\n rows:17,\n margin:1\n}\n )\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":559,"value":"max_diff = d3.max(byInstructor, d => d.avg_difficulty)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":562,"value":"min_diff = d3.min(byInstructor, d => d.avg_difficulty)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"function instructor_image(name) {\n var data = instructors.filter(d => d.name === name);\n return htl.html`

${name}

`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"function heatmap(value, minValue, maxValue) {\n // Calculate the color scale based on the value's position\n var scale = (value - minValue) / (maxValue - minValue);\n var color = getColorFromScale(scale);\n\n // Create the output div with the scaled background color\n return htl.html`\n

\n ${value}\n

\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":723,"value":"Sparkbark adapted from [Mike Bostock](https://observablehq.com/@observablehq/input-table)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":721,"value":"function sparkbar(max) {\n return x => htl.html`

${x.toLocaleString(\"en\")}`\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"function getColorFromScale(scale) {\n var colors = ['#50C4AA', '#B6C95C', '#FACB3E', '#FC800F', '#FF4759'];\n\n // Calculate the index of the color in the color ramp based on the scale\n var index = Math.floor(scale * (colors.length - 1));\n\n // Get the start and end colors from the color ramp\n var startColor = hexToRgb(colors[index]);\n var endColor = hexToRgb(colors[index + 1]);\n\n // Calculate the intermediate color based on the scale\n var color = startColor.map(function (channel, i) {\n var range = endColor[i] - channel;\n return Math.round(channel + range * (scale * (colors.length - 1) - index));\n });\n\n // Return the color in RGB format\n return \"rgb(\" + color.join(\",\") + \")\";\n}\n\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":341,"value":"// Helper function to convert hex color to RGB\nfunction hexToRgb(hex) {\n var shorthandRegex = /^#?([a-f\\d])([a-f\\d])([a-f\\d])$/i;\n hex = hex.replace(shorthandRegex, function (m, r, g, b) {\n return r + r + g + g + b + b;\n });\n\n var result = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i.exec(hex);\n return result ? [\n parseInt(result[1], 16),\n parseInt(result[2], 16),\n parseInt(result[3], 16)\n ] : [255, 255, 255]; // Default to white if invalid hex color\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"lineChart = () => { \n \n return Plot.plot({\n y: {grid:true, label:\"Hours\"},\n x: {label:\"Month\"},\n height: 250,\n width: 600,\n marks: [\n Plot.areaY(byMonth, {x: \"month_of\", y: \"hours\", fill:\"#40C9A2\", opacity:0.2}),\n Plot.line(byMonth, {x: \"month_of\", y: \"hours\", stroke:\"#40C9A2\", strokeWidth:2, tip:\"x\"}),\n Plot.ruleY([0])\n ]\n})\n\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"barChart = () => { \n return Plot.plot({\n y: {grid:true, label:\"Hours\"},\n x: {label:\"\"},\n height:250,\n width:600,\n marks: [\n Plot.barY(byType, {x: \"fitness_discipline\", y: \"hours\", fill:\"#40C9A2\", tip:\"x\", sort: {x: \"y\", reverse: false}}),\n Plot.ruleY([0])\n ]\n})\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":479,"value":"## Dynamic HTML\nThis creates the valueBox widgets displayed at the top.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":32,"value":"$2d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"## Form Template \nTaken from Martien van Steenbergen. Used to create a two-column form template for filters.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":458,"value":"// Template credit: This layout is updated from Martien van Steenbergen @martien/horizontal-inputs\n\ntemplate = (inputs) => \nhtl.html`

${Object.values(inputs)}

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"## CSS\nUse CSS to style dashboard components. Import FontAwesome template from cloudflare to add display icons.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":42,"value":"$2e","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"## Aggregations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"select \ncount(*) as workouts\n,sum(ride_duration)/60/60 as hours\n,count(distinct created_at) as active_days\n,coalesce(round(sum(case when distance<>'NA' then distance::double end),0),0) as distance\nfrom workouts\nwhere ride_id<>'NA'","pinned":true,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","output":"totals","database":"var:db"},{"id":69,"value":"select \nmonth::date as month_of\n,coalesce(w.workouts,0) as workouts\n,coalesce(w.active_days,0) as active_days\n,coalesce(w.hours,0) as hours\nfrom months m \nleft join(\n select \ndate_trunc('month', created_at) as month_of\n,count(*) as workouts\n,count(distinct created_at) as active_days\n,sum(ride_duration)/60/60 as hours\nfrom workouts\nwhere ride_id<>'NA'\ngroup by 1\norder by 1 \n) w on w.month_of = m.month::date\nWHERE m.month::date >= ${filters.startDate}::date and m.month::date<= ${filters.endDate}::date\nORDER BY 1 ","pinned":true,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","output":"byMonth","database":"var:db"},{"id":136,"value":"select \nfitness_discipline\n,count(*) as workouts\n,count(distinct created_at) as active_days\n,sum(ride_duration)/60/60 as hours\nfrom workouts\nwhere ride_id<>'NA'\ngroup by 1\norder by 1 ","pinned":true,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","output":"byType","database":"var:db"},{"id":237,"value":"select \nw.instructor_name\n,i.image_url\n--,round(avg(avg_difficulty),2) as avg_difficulty\n,round(sum(avg_difficulty*ride_duration)/sum(ride_duration),2) as avg_difficulty\n,count(*) as workouts\n,count(distinct created_at) as active_days\n,sum(ride_duration)/60 as minutes\nfrom workouts w\n left join instructors i on i.id = w.instructor_id\nwhere ride_id<>'NA' and instructor_name <> 'NA'\ngroup by 1,2\norder by 6 desc","pinned":true,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","output":"byInstructor","database":"var:db"},{"id":10,"value":"## Data Set Up","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"db = DuckDBClient.of({\n workouts: filteredWorkouts, \n instructors: instructors,\n months : months\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"instructors = await FileAttachment(\"ref_instructors.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"instructors","database":"$undefined"},{"id":835,"value":"workouts = await FileAttachment(\"peloton-data@14.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"workouts","database":"$undefined"},{"id":144,"value":"filteredWorkouts = workouts.filter(w => filters.workoutType.includes(w.fitness_discipline) && w.created_at>=filters.startDate && w.created_at<=filters.endDate)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2c:"$2b:body"