29:null 2a:["$","title",null,{"children":"Weekly Mileage, Stacked Bar Chart | Steve Kasica | Observable"}] 2f:T954,md`

Runners call the total distance they run in the seven-day week their weekly mileage. Some people call this metric weekly volume, but since we're only dealing with two dimensions, distance and time, they should at least say weekly area^🔊.

Weekly mileage on Strava athlete's profile

Weekly mileage on Strava is often visualized with bar charts. However, these visual representations fall short when trying to answer actual questions about this data.

[Strava](www.strava.com) is a social network where endurance athletes upload GPS data of their activities. This site also visualizes this data with bar charts, such as those to the right. But, these visualizations don't actually help me answer the questions I have about this data: * What percentage of my overall weekly mileage was a specific run? * Roughly how much of my weekly mileage was in workouts vs easy runs? * How many weeks has my weekly mileage been more than *x* miles? * How far did I actually run on any given week? While the bar chart is an effective way to compare weeks, aggregating the entire week into one bar smoothes over salient details that can help me answer these questions. My version simply stacks without aggregating, creating columns out of stacks of *activity bricks.* Each brick represent one run. The taller the brick, the longer the activity. Bricks are grouped and color coded by workout type. The stacking order of workout type is fixed so that hard efforts, such as *long runs* and *workouts*, are at the bottom of the y-axis. This ordering facilitates easily comparisons against a common baseline. Hovering over any individual brick brings up a tooltip of stats about that run and the entire week. *Hat tip to Shirley Wu who used this technique for a Google News Lab project [visualizing search data of travel destinations](http://explore-adventure.com).*

`30:T17ce,function spec(opts) { const activityMargin = 1; // Space between bricks const precision = 2; // number of digits after decimal when displaying floats const barOpacity = 0.9; const round = function(expr, places) { return "round((" + expr + ") * pow(10," + places + ")) / 100"; }; let measureExpression; switch (opts.measure) { case "Distance (mi)": measureExpression = "datum.distance / 1609.344"; break; case "Distance (km)": measureExpression = "datum.distance / 1000"; break; case "Elevation Gain (m)": measureExpression = "datum.total_elevation_gain"; break; case "Elevation Gain (ft)": measureExpression = "datum.total_elevation_gain * 3.281"; break; case "Time (hrs)": measureExpression = "datum.moving_time / (60 * 60)"; break; } let activity; switch (opts.activity) { case "Run": activity = "Running"; break; case "Ride": activity = "Cycling"; break; default: activity = opts.activity; } const fontStyles = { labelFont: "Roboto", labelFontSize: 11, labelColor: "#666", titleFont: "Roboto", titleFontSize: 11, titleColor: "#333", titleFontWeight: 700 }; opts.data.activities = opts.data.activities.map(activity => { activity.commute = Boolean(activity.commute); activity.created_at = activity.start_date_local.slice(0, -1) + activity.timezone.substring(4, 10); activity.week_start = MMDDYYYY( getWeekStart(new Date(activity.start_date_local)) ); activity.week_end = MMDDYYYY( incDate(getWeekStart(new Date(activity.start_date_local)), 6) ); activity.workout_type_hr = workoutTypeLookup( activity.workout_type, activity.type ); activity.duration = getDuration(activity.moving_time); return activity; }); return { $schema: "https://vega.github.io/schema/vega-lite/v3.json", title: { text: "Weekly " + activity + " Mileage" + (opts.isNormalize ? " (Normalized)" : ""), color: fontStyles.titleColor, font: fontStyles.titleFont, fontSize: fontStyles.titleFontSize + 2, fontWeight: 700 }, width: opts.width, height: 600, autosize: "fit", data: { values: opts.data.activities, format: { type: "json", parse: { start_date_local: "date", type: null, distance: "number", elapsed_time: "number", moving_time: "number", total_elevation_gain: "number", week_start: "date", week_end: "date", activity_id: null } } }, transform: [ { filter: { field: "type", equal: opts.activity } }, { calculate: "if(datum.workout_type_hr == 'Run', 0, if(datum.workout_type_hr == 'Workout', 1, if(datum.workout_type_hr == 'Race', 2, if(datum.workout_type_hr == 'Long Run', 3, 4))))", as: "activity_order" }, { calculate: round(measureExpression, precision), as: "amount" }, { calculate: "timeFormat(datum.start_date_local, '%A, %B %e, %Y, at %I:%M %p')", as: "date_created" }, { calculate: "timeFormat(datum.week_start, '%B %e') + ' to ' + timeFormat(datum.week_end, '%B %e')", as: "training_week" }, { calculate: "time(datum.week_start)", as: "week_order" }, { calculate: "month(datum.start_date_local)", as: "month" }, { calculate: "day(datum.start_date_local)", as: "day_of_week" }, { joinaggregate: [{ op: "sum", field: "amount", as: "week_total" }], groupby: ["training_week"] }, { calculate: "parseFloat(" + round("datum.amount / datum.week_total * 100", precision) + ") + '%'", as: "percent_of_week_total" } ], // end transform config: { axis: fontStyles, legend: { orient: "left" } }, mark: { type: "bar", stroke: "#FFF", strokeOpacity: opts.opacity, strokeWidth: activityMargin, opacity: barOpacity }, encoding: { y: { field: "amount", type: "quantitative", axis: { title: opts.measure, tickCount: 12, orient: "right" }, stack: opts.isNormalize ? "normalize" : "zero" }, x: { timeUnit: "yearmonthdate", field: "week_start", type: "ordinal", axis: { format: "%B \\`%y", ticks: false, title: "Date" } }, color: { field: "workout_type_hr", type: "nominal", sort: ["Long Run", "Workout", "Race", "Run", "Commute"], scale: { range: opts.colorRange }, axis: { title: opts.activity + " Type" }, value: "grey" }, order: { field: "activity_order", type: "quantitative", sort: "aescending" }, tooltip: [ { field: "date_created", type: "nominal", title: 'Date' }, { field: 'amount', type: "quantitative", title: opts.measure }, { field: "workout_type_hr", type: "nominal", title: "Workout Type" }, { field: "duration", type: "nominal", title: "Duration" }, { field: "training_week", type: "nominal", title: "Week" }, { field: "week_total", type: "quantitative", title: "Weekly Mileage" }, { field: "percent_of_week_total", type: "nominal", title: "Weekly Percentage" } ] // end tooltip } // end encoding }; // end return } // end spec function31:[{"id":"19611df54beac7a24d19d97ffb45745a9043686dbe1c9fbbf234db068e9d6bfec1fa14c65721fa76cdb4e95fa9da1c9380a6d958b86cc5e1ac5d9fb4a64237b8","href":"https://static.observableusercontent.com/files/19611df54beac7a24d19d97ffb45745a9043686dbe1c9fbbf234db068e9d6bfec1fa14c65721fa76cdb4e95fa9da1c9380a6d958b86cc5e1ac5d9fb4a64237b8","name":"2020-activities.json","type":"application/json","lastModified":1632957102273.904,"size":3290186}] 2d:{"id":"52880058ed6d2873","slug":"weekly-mileage-with-unaggregated-stacked-bar-charts","title":"Weekly Mileage, Stacked Bar Chart","thumbnail":"4745634f7ef970207709bbda21e7658f525cd247396c5071f181aef9822280ae","access_level":"public","create_time":"$D2019-05-18T12:56:17.706Z","update_time":"$D2021-10-22T14:03:52.680Z","view_time":null,"first_public_time":"$D2020-01-27T17:47:36.180Z","has_unpublished_edits":null,"fork":false,"stars":15,"starred":false,"owner":{"type":"team","id":"1cebfd5d1e47fa9b","login":"stvkas","name":"Steve Kasica","avatar_url":"https://avatars-next.observableusercontent.com/b10311feda71ac109d4c36f5ef7f30ba700e7c0f8160bc5750596e4c28d9e1ab","tier":"starter_2024"},"version":1855,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a483da0cdef190cc","login":"stvkas","name":"Steve Kasica","avatar_url":"https://avatars-next.observableusercontent.com/b10311feda71ac109d4c36f5ef7f30ba700e7c0f8160bc5750596e4c28d9e1ab","tier":null}],"members":[{"type":"individual","id":"a483da0cdef190cc","login":"stvkas","name":"Steve Kasica","avatar_url":"https://avatars-next.observableusercontent.com/b10311feda71ac109d4c36f5ef7f30ba700e7c0f8160bc5750596e4c28d9e1ab","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":14,"collection":{"id":"74dc8c4d287090ee","slug":"visualizing-running","title":"Visualizing Strava Data","owner":{"id":"1cebfd5d1e47fa9b","login":"stvkas","name":"Steve Kasica"}},"type":"notebook","body":{"title":"Weekly Mileage, Stacked Bar Chart","cells":[{"id":1353,"value":"md`\n# Weekly Mileage, Stacked Bar Chart\n\n

Miles ran per week in 2020, broken down by workout type
Data: [Strava API, List Athlete Activities](https://developers.strava.com/docs/reference/#api-Activities-getLoggedInAthleteActivities) (cached in file attachment).

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"chart = {\n let vegaSpec = spec({\n measure: measureSelect,\n textThreshold: 5,\n opacity: 0.75,\n activity: \"Run\",\n width: width,\n data: data,\n isNormalize: normCheckbox === 'toggle',\n colorRange: colors[\"scheme\" + colorSelect.replace(\" \", \"\")]\n });\n let div = document.createElement(\"div\");\n let runtime = Vega.parse(VegaLite.compile(vegaSpec).spec);\n let handler = new vegaTooltip.Handler();\n let view = (div.value = new Vega.View(runtime)\n .tooltip(handler.call)\n .initialize(div)\n .runAsync()\n .then(function() {\n return div;\n }));\n return view;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1572,"value":"md`### Settings\n\nYou can modify many of the settings in the above visualization, such as the color palette.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1381,"value":"viewof colorSelect = select({\n description: \"Choose a color palette\",\n options: ['Tableau 10', 'Category 10', 'Set 1', 'Set 2', 'Set 3']\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1599,"value":"md `Not everyone measures their runs by distance. Some people run by time. MUT runners seem to only talk about elevation gain. The select box below changes what's encoded on the y-axis above.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"viewof measureSelect = select({\n description: \"How do you measure your runs?\",\n options: [\n 'Distance (mi)',\n 'Distance (km)',\n 'Time (hrs)',\n 'Elevation Gain (ft)',\n 'Elevation Gain (m)'\n ],\n value: 'Distance (mi)'\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1143,"value":"md`If you're only concerned with how the composition of weekly mileage breaks down by activity type, then the chart can be fully normalized.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":851,"value":"viewof normCheckbox = checkbox({\n description: \"Normalize \" + measureSelect.toLowerCase() + \"?\",\n options: [{ value: \"toggle\", label: \"Normalize\" }],\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1795,"value":"data = FileAttachment('2020-activities.json').json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1064,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1811,"value":"function getWeekStart(dt) {\n // Get the first day of the week given an arbitrary day.\n // Return {Date} A new date object\n var d = new Date(dt.getTime());\n var monday = 1;\n while (d.getDay() !== monday) {\n d.setDate(d.getDate() - 1);\n }\n return d;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1818,"value":"function getDuration(dur) {\n // Convert seconds into HH:MM:SS format\n // Uses date locale string hack, but it formats with optional leading zeros.\n //\n // param {Number} an integer representing the number of seconds\n // return {string} A HH:MM:SS formatted string\n //\n var hrs = Math.floor(dur / (60 * 60));\n var mins = Math.floor((dur / (60 * 60) - hrs) * 60);\n var secs = Math.floor(dur - hrs * 60 * 60 - mins * 60);\n var dt = new Date(2020, 1, 1, hrs, mins, secs);\n return dt.toLocaleString(\"fr-FR\", {\n hour: \"numeric\",\n minute: \"numeric\",\n second: \"numeric\"\n });\n} //","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1815,"value":"function incDate(dt, days) {\n // Increment date by one day\n // Return {Date, this} for chaining\n dt.setDate(dt.getDate() + days);\n return dt;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1813,"value":"function MMDDYYYY(dt) {\n // Export date in American date format\n // Return {String} date in MM/DD/YYYY format\n var month = dt.getMonth() + 1;\n var date = dt.getDate();\n var year = dt.getFullYear();\n return month + '/' + date + '/' + year;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1809,"value":"function workoutTypeLookup(id, type) {\n // Get workout type based on Strava's workout type codes,\n // considering commute as a workout type.\n //\n // param {Number} id: Strava's Activity IDs\n // param {String} type: the type of activity, e.g. run, ride, etc.\n //\n // return {String} the workout type, e.g. \"Workout\", \"Race,\" etc...\n //\n id = +id;\n switch (Number(id)) {\n case 1:\n case 11:\n return 'Race';\n case 2:\n return 'Long Run';\n case 3:\n case 12:\n return 'Workout';\n default:\n return type;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"import {select, checkbox} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"VegaLite = require('vega-lite@v4.0.0-beta.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"Vega = require('vega@3');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"vegaTooltip = require('vega-tooltip');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":933,"value":"d3 = require('d3-fetch')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1385,"value":"colors = require('d3-scale-chromatic')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body"