2f:Tba9,{ const width = 900; const height = 500; const margin = { top: 50, right: 20, bottom: 30, left: 50 }; const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; // Get unique weeks const weeks = Array.from(new Set(calendarData.map(d => d.week))).sort((a,b) => a-b); const y = d3.scaleBand() .domain(weeks) // <-- use the full array of week numbers .range([margin.top, height - margin.bottom]) .padding(0.05); // Scales const x = d3.scaleBand() .domain(days) .range([margin.left, width - margin.right]) .padding(0.05); // const y = d3.scaleBand() // .domain(d3.extent(calendarData, d => d.week)) // .range([margin.top, height - margin.bottom]) // .padding(0.05); const types = Array.from(new Set(calendarData.map(d => d.type))); const color = d3.scaleOrdinal() .domain(types) .range(d3.schemeSet2); // Create SVG container const svg = d3.create("svg") .attr("width", width) .attr("height", height); // Cells svg.append("g") .selectAll("rect") .data(calendarData) .join("rect") .attr("x", d => x(d.weekday_name)) .attr("y", d => y(d.week)) .attr("width", x.bandwidth()) .attr("height", y.bandwidth()) .attr("rx", 3) .attr("ry", 3) .attr("fill", d => color(d.type)) .attr("stroke", "#ccc") .style("cursor", "pointer") .on("click", (event, d) => { mutable selectedCell = d; }) .append("title") // tooltip .text(d => `Day ${d.day}: ${d.start_city} → ${d.end_city}\nType: ${d.type}`); // Text labels svg.append("g") .selectAll("text") .data(calendarData) .join("text") .attr("x", d => x(d.weekday_name) + x.bandwidth() / 2) .attr("y", d => y(d.week) + y.bandwidth() / 2) .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .attr("font-size", 14) .attr("fill", "black") .text(d => d.date_raw); // Axes svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x)); svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).tickFormat(d => `Week ${d}`)); // Legend group in top-left const legend = svg.append("g") .attr("transform", `translate(${width - margin.right - 130 }, ${height - margin.top - 50})`); types.forEach((type, i) => { const g = legend.append("g") .attr("transform", `translate(${i * 60}, 0)`); // horizontal spacing // color box g.append("rect") .attr("width", 20) .attr("height", 20) .attr("fill", color(type)) .attr("stroke", "#ccc"); // text label next to box g.append("text") .attr("x", 25) // 5px padding after box .attr("y", 15) .attr("font-size", 14) .attr("dominant-baseline", "middle") .text(type); }); return svg.node(); } 30:T8b9,{ if (!selectedCell) { return html`Click a day to see details`; } const metrics = [ { key: "distance", label: "Distance (mi)", value: selectedCell.distance, maximum: 54.25 }, { key: "elev_gain", label: "Elevation Gain (ft)", value: selectedCell.elev_gain, maximum: 5292 }, { key: "av_speed", label: "Avg Speed (mph)", value: selectedCell.av_speed, maximum: 12.3}, { key: "av_power", label: "Avg Power (W)", value: selectedCell.av_power, maximum: 132 } ]; const width = 300; const height = 400; const margin = { top: 30, right: 20, bottom: 30, left: 40 }; const container = d3.create("div") .style("display", "flex") .style("gap", "16px"); metrics.forEach(metric => { const svg = d3.create("svg") .attr("width", width) .attr("height", height); const x = d3.scaleBand() .domain([metric.label]) .range([margin.left, width - margin.right]) .padding(0.4); const y = d3.scaleLinear() .domain([0, metric.maximum]).nice() .range([height - margin.bottom, margin.top]); // Bar svg.append("rect") .attr("x", x(metric.label)) .attr("y", y(metric.value)) .attr("width", x.bandwidth()) .attr("height", y(0) - y(metric.value)) .attr("fill", "steelblue"); // svg.append("rect") // .attr("x", x(metric.label - 100)) // .attr("y", y(metric.maximum)) // .attr("width", x.bandwidth()) // .attr("height", y(0) - y(metric.value)) // .attr("fill", "gray"); // Value label svg.append("text") .attr("x", x(metric.label) + x.bandwidth() / 2) .attr("y", y(metric.value) - 6) .attr("text-anchor", "middle") .attr("font-size", 11) .text(metric.value); // Y axis svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(y).ticks(4)) .selectAll("text") .attr("font-size", 10); // Title svg.append("text") .attr("x", width / 2) .attr("y", 16) .attr("text-anchor", "middle") .attr("font-size", 12) .attr("font-weight", "bold") .text(metric.label); container.append(() => svg.node()); }); return container.node(); } 31:T4ff,selectYVariable = () => { const buttons = html` `; // default selected variable buttons.value = "distance"; buttons.score1.onclick = event => { event.preventDefault(); buttons.value = "distance"; buttons.display = "Distance"; buttons.dispatchEvent(new CustomEvent("input")); // trigger listener } buttons.score2.onclick = event => { event.preventDefault(); buttons.value = "elev_gain"; buttons.display = "Elevation Gain"; buttons.dispatchEvent(new CustomEvent("input")); // trigger listener } buttons.score3.onclick = event => { event.preventDefault(); buttons.value = "av_speed"; buttons.display = "Average Speed"; buttons.dispatchEvent(new CustomEvent("input")); // trigger listener } buttons.score4.onclick = event => { event.preventDefault(); buttons.value = "av_power"; buttons.display = "Average Power"; buttons.dispatchEvent(new CustomEvent("input")); // trigger listener } return buttons; }32:T467,selectColorVariable = () => { const buttons = html` `; // default selected variable buttons.value = "av_speed"; buttons.score1.onclick = event => { event.preventDefault(); buttons.value = "distance"; buttons.dispatchEvent(new CustomEvent("input")); // trigger listener } buttons.score2.onclick = event => { event.preventDefault(); buttons.value = "elev_gain"; buttons.dispatchEvent(new CustomEvent("input")); // trigger listener } buttons.score3.onclick = event => { event.preventDefault(); buttons.value = "av_speed"; buttons.dispatchEvent(new CustomEvent("input")); // trigger listener } buttons.score4.onclick = event => { event.preventDefault(); buttons.value = "av_power"; buttons.dispatchEvent(new CustomEvent("input")); // trigger listener } return buttons; }33:[{"id":"febbf06b119978d7714d4965bda70d81c9b73db35e0b3a32349bae2633ef4d95d86d9c298c474c2fa11b8d2eefd64e9a0cb5c809facca45e49925037476d66ef","href":"https://static.observableusercontent.com/files/febbf06b119978d7714d4965bda70d81c9b73db35e0b3a32349bae2633ef4d95d86d9c298c474c2fa11b8d2eefd64e9a0cb5c809facca45e49925037476d66ef","name":"customRegion.geo.json","type":"application/json","lastModified":1766669390648.499,"size":122064},{"id":"7c6167b65013c12f3978b4d8e85dd28a27e3b5eb580d1e76696ce5b0d399c196de2b02c45e734462931e1af823698e36bb072722253d5e03e7fb61222755bc0c","href":"https://static.observableusercontent.com/files/7c6167b65013c12f3978b4d8e85dd28a27e3b5eb580d1e76696ce5b0d399c196de2b02c45e734462931e1af823698e36bb072722253d5e03e7fb61222755bc0c","name":"countries-110m.json","type":"application/json","lastModified":1766668536910.804,"size":107761},{"id":"473ed0e9b7e98dc96f0f14514b2e597815db0ad1156d72016594fec73aba1799df4e70a066cc9b22a46df5d9f796dc7cbec7dd8acb443e6b448ca0b7044fa503","href":"https://static.observableusercontent.com/files/473ed0e9b7e98dc96f0f14514b2e597815db0ad1156d72016594fec73aba1799df4e70a066cc9b22a46df5d9f796dc7cbec7dd8acb443e6b448ca0b7044fa503","name":"TD_Data - Sheet1@2.csv","type":"text/csv","lastModified":1766670327874.145,"size":21140}] 2d:{"title":"Trans Dinarica","cells":[{"id":0,"value":"# Trans Dinarica\n","pinned":false,"hidden":false,"mode":"md"},{"id":124,"value":"In September of 2025, you completed part of the Trans Dinarica: This is your trip in data. ","pinned":false,"hidden":false,"mode":"md"},{"id":307,"value":"Starting off with an overview of each metric over time. You can use the buttons to select which variable you would like to view on the Y axis and which variable is the bar color! ","pinned":false,"hidden":false,"mode":"md"},{"id":256,"value":"Select Y-Axis Variable: ","pinned":false,"hidden":false,"mode":"md"},{"id":229,"value":"viewof selectedYVariable = selectYVariable()","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"Select Color Variable:","pinned":false,"hidden":false,"mode":"md"},{"id":247,"value":"viewof selectedColorVariable = selectColorVariable()","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"Plot.plot({\n title: `Trends over Time: ${getNice(selectedYVariable)}, Colored by ${getNice(selectedColorVariable)}`,\n width: width,\n color: {legend: true, scheme: \"Blues\", label: getNice(selectedColorVariable)},\n marks: [\n Plot.barY(calendarData.filter(d => d.type != \"rest\"), {\n x: \"date\",\n y: selectedYVariable, \n fill: selectedColorVariable,\n stroke: \"black\"\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"Now, lets look more specifically at each day. Select a day from the calendar to explore!","pinned":false,"hidden":false,"mode":"md"},{"id":108,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":315,"value":"Selected Day: `${selectedCell.weekday_name}`, `${selectedCell.date_raw}`","pinned":false,"hidden":false,"mode":"md"},{"id":129,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"md`${selectedCell.ps_description}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":327,"value":"Lets take a look at your actual route on a map!","pinned":false,"hidden":false,"mode":"md"},{"id":143,"value":"plot = Plot.plot({\n width: width,\n height: 800,\n axis: null, \n \n // projection: {\n // type: \"equal-earth\", \n // fit: countries},\n marks: [\n Plot.geo(countries, {\n fill: \"none\",\n stroke: \"black\",\n strokeWidth: 1.5\n }),\n // Plot.geo(countries, {fill: \"darkblue\", fillOpacity: 0.1}),\n Plot.dot(calendarData, {\n x: \"start_lon\",\n y: \"start_lat\",\n strokeWidth: 5,\n fill: \"red\", \n // title: (d) =>`City: ${d.start_city}`, \n // tip: true\n \n }), \n Plot.geo(routes, {\n stroke: \"red\",\n strokeWidth: 2,\n strokeOpacity: 0.8, \n title: (d) => `From ${d.properties.start_city} to ${d.properties.end_city} on ${d.properties.date_raw}`,\n tip: true,\n on: {\n click: (event, d) => {\n (mutable selectedRide = d.properties) // store the ride data\n }\n }\n })\n ]\n });","pinned":false,"hidden":false,"mode":"ojs"},{"id":333,"value":"Thats all for now, I know this trip was a once in a lifetime opportunity and I'm so glad you got to enjoy it!","pinned":false,"hidden":false,"mode":"md"},{"id":331,"value":"### Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":203,"value":"selectedRide","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"ride_only = calendarData.filter(d => d.type == \"ride\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"routes = ({\n type: \"FeatureCollection\",\n features: ride_only.map(d => ({\n type: \"Feature\",\n geometry: {\n type: \"LineString\",\n coordinates: [\n [+d.start_lon, +d.start_lat],\n [+d.end_lon, +d.end_lat]\n ]\n },\n properties: d\n }))\n})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"countries = FileAttachment(\"customRegion.geo.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":151,"value":"FileAttachment(\"countries-110m.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"rawData = FileAttachment(\"TD_Data - Sheet1@2.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"data = rawData.map(d => ({\n ...d,\n day: +d.day,\n date: new Date(d.date),\n date_raw: d.date,\n distance: +d.distance,\n elev_gain: +d.elev_gain,\n av_speed: +d.av_speed,\n av_power: +d.av_power\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"function getDayName(d) {\n if(d == 0){return \"Sunday\"}\n if(d == 1){return \"Monday\"}\n if(d == 2){return \"Tuesday\"}\n if(d == 3){return \"Wednesday\"}\n if(d == 4){return \"Thursday\"}\n if(d == 5){return \"Friday\"}\n if(d == 6){return \"Saturday\"}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"calendarData = data.map(d => ({\n ...d,\n start_lat: +d.start_lat,\n start_lon: +d.start_lon,\n end_lat: +d.end_lat,\n end_lon: +d.end_lon,\n week: d3.timeWeek.count(d3.timeMonth(d.date), d.date),\n weekday: d.date.getDay(), // 0–6\n weekday_name: getDayName(d.date.getDay())\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"function getNice(d){\n if(d == \"distance\"){return \"Distance\"}\n if(d == \"av_speed\"){return \"Average Speed\"}\n if(d == \"elev_gain\"){return \"Elevation Gain\"}\n if(d == \"av_power\"){return \"Average Power\"}\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"mutable selectedCell = null ","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"mutable selectedRide = null","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}