29:null 2a:["$","title",null,{"children":"A4: Interactive Visualization | Columbia Dataviz | Observable"}] 2f:T571,The source data consists of three raw trip-level CSV files from the Citi Bike system data archive: one file covering January 2016 and two files covering January 2026 (split due to volume exceeding one million trips). Each file contains one row per ride with fields for start/end timestamps, start/end coordinates, and rider type (member or casual.) Before aggregation, timestamps with invalid values (specifically, rides recorded with hour=24 rather than 00, a known data quality issue in the 2016 archive) were dropped using pandas' coerce error handling. Rides with a duration exceeding 180 minutes were also removed as likely undocked or abandoned bikes rather than genuine trips. Each file was processed identically: timestamps were parsed to extract hour of day and day of week, and trip duration was derived in minutes by subtracting start from end time. The two 2026 files were concatenated and re-aggregated before being combined with the 2016 data to avoid double-counting rides that spanned the split between files. The final aggregation groups every ride into buckets defined by four dimensions: year, hour of day (0–23), day of week (0=Monday, 6=Sunday), and rider type (member or casual). For each bucket, three values are computed: total ride count, mean duration, and median duration. The resulting dataset contains 669 rows: 24 hours × 7 days × 2 rider types × 2 years.30:T2c44,chart5_sideBySide = { // Constants const DOW = [0,1,2,3,4,5,6]; const HOURS = d3.range(0, 24); const DOW_LBLS = ["Mon","Tue","Wed","Thu","Fri","Sat","Sun"]; // Grid function buildGrid(year, rider) { const base = data .filter(d => d.year === year) .filter(d => rider === "all" ? true : d.rider_type === rider); const m = d3.rollup( base, v => { const rides = d3.sum(v, d => d.count); const wmean = rides ? d3.sum(v, d => d.mean_duration * d.count) / rides : NaN; return { count: rides, mean_duration: wmean }; }, d => d.dow, d => d.hour ); const out = []; for (const dow of DOW) { for (const hour of HOURS) { const cell = m.get(dow)?.get(hour) ?? { count: 0, mean_duration: NaN }; out.push({ dow, hour, ...cell }); } } return out; } // Color scale function cellColor(t) { const s = Math.sqrt(t); return d3.interpolateRgbBasis([ "#06111f", "#0a2240", "#0d3566", "#1059a8", "#1a7fd4", "#4aaee8", "#a8d8f5" ])(s); } const probe = d3.create("div").style("width","100%").style("height","0"); document.body.appendChild(probe.node()); const availW = probe.node().getBoundingClientRect().width || 960; probe.node().remove(); const OUTER_PAD = 36; const GUTTER = 48; const mLeft = 48; const mRight = 16; const mTop = 50; const mBottom = 32; const PANEL_W = Math.floor((availW - 2 * OUTER_PAD - GUTTER) / 2); const GRID_W = PANEL_W - mLeft - mRight; const GAP_X = 4; const GAP_Y = 4; const CELL_W = Math.floor((GRID_W - 6 * GAP_X) / 7); const CELL_H = Math.round(CELL_W * 0.85); const ACTUAL_GRID_W = 7 * CELL_W + 6 * GAP_X; const ACTUAL_GRID_H = 24 * CELL_H + 23 * GAP_Y; const SVG_W = PANEL_W * 2 + GUTTER; const SVG_H = mTop + ACTUAL_GRID_H + mBottom; const TOTAL_W = availW - 2 * OUTER_PAD; // Tooltip dimensions (for flip logic) const TIP_W = 175; let riderSel = "member"; const wrap = d3.create("div") .style("background", "#ffffff") .style("padding", `24px ${OUTER_PAD}px 28px`) .style("border-radius", "12px") .style("font-family", "'Inter', 'Helvetica Neue', Arial, sans-serif") .style("color", "#1a1a1a") .style("width", `${availW - 2}px`) .style("box-sizing", "border-box") .style("position", "relative"); // Adding the source information const eyebrowRow = wrap.append("div") .style("display","flex") .style("justify-content","space-between") .style("align-items","baseline") .style("margin-bottom","6px"); eyebrowRow.append("div") .style("font-size","11px").style("letter-spacing",".14em") .style("color","rgba(0,0,0,.38)").style("text-transform","uppercase") .style("font-family","'Inter','Helvetica Neue',Arial,sans-serif") .text("Citi Bike NYC · January"); eyebrowRow.append("div") .style("font-size","11px").style("letter-spacing",".04em") .style("color","rgba(0,0,0,.28)") .style("font-family","'Inter','Helvetica Neue',Arial,sans-serif") .html(`Data sourced from citibikenyc.com/system-data`); wrap.append("div") .style("font-size","26px").style("font-weight","700") .style("color","#0a1e3d").style("margin-bottom","5px") .style("letter-spacing","-.3px") .style("font-family","'Inter','Helvetica Neue',Arial,sans-serif") .text("When does the city ride?"); wrap.append("div") .style("font-size","14px").style("color","rgba(0,0,0,.45)") .style("margin-bottom","22px").style("line-height","1.5") .style("font-family","'Inter','Helvetica Neue',Arial,sans-serif") .text("Ride volume by day of week and hour, 2016 vs. 2026"); // Rider pills const pillRow = wrap.append("div") .style("display","flex").style("align-items","center").style("gap","10px") .style("margin-bottom","22px"); pillRow.append("span") .style("font-size","12px").style("letter-spacing",".08em") .style("text-transform","uppercase").style("color","rgba(0,0,0,.35)") .style("font-weight","500") .style("font-family","'Inter','Helvetica Neue',Arial,sans-serif") .text("Rider type"); const pillGroup = pillRow.append("div").style("display","flex").style("gap","6px"); const pillStyle = (sel, active) => sel .style("padding","7px 18px").style("border-radius","24px") .style("font-size","13px").style("font-weight", active ? "600" : "400") .style("font-family","'Inter','Helvetica Neue',Arial,sans-serif") .style("border", active ? "2px solid #1059a8" : "1.5px solid rgba(0,0,0,.15)") .style("background", active ? "#1059a8" : "transparent") .style("color", active ? "#ffffff" : "rgba(0,0,0,.45)") .style("cursor","pointer") .style("transition","all .15s"); const PILLS = ["member","casual"]; const pillEls = PILLS.map(v => { const btn = pillGroup.append("button") .attr("data-v", v).text(v.charAt(0).toUpperCase() + v.slice(1)) .on("click", () => { riderSel = v; redraw(); }); pillStyle(btn, v === riderSel); return btn; }); // SVG canvas const svg = wrap.append("svg") .attr("width", TOTAL_W).attr("height", SVG_H + 36); // Tooltip const tip = wrap.append("div") .style("position","absolute").style("pointer-events","none") .style("opacity","0").style("background","rgba(10,26,60,.96)") .style("border","1px solid rgba(255,255,255,.12)").style("border-radius","8px") .style("padding","10px 14px").style("color","rgba(255,255,255,.88)") .style("font-size","11px") .style("font-family","'Inter','Helvetica Neue',Arial,sans-serif") .style("min-width",`${TIP_W}px`).style("width",`${TIP_W}px`) .style("z-index","9999") .style("transition","opacity .1s") .style("box-shadow","0 6px 24px rgba(0,0,0,.18)"); // Draw panel function drawPanel(g, grid, maxCount, year, offsetX) { g.selectAll("*").remove(); g.attr("transform", `translate(${offsetX}, 0)`); // Year label g.append("text") .attr("x", mLeft + ACTUAL_GRID_W / 2).attr("y", 17) .attr("text-anchor","middle") .attr("fill","#0a1e3d") .style("font","700 14px 'Inter','Helvetica Neue',Arial,sans-serif") .text(`${year} · Jan`); // X axis: day labels DOW.forEach(d => { g.append("text") .attr("x", mLeft + d * (CELL_W + GAP_X) + CELL_W / 2) .attr("y", mTop - 7) .attr("text-anchor","middle") .attr("fill","rgba(0,0,0,.38)") .style("font","10px 'Inter','Helvetica Neue',Arial,sans-serif") .text(DOW_LBLS[d]); }); // Y axis: hour ticks [0,3,6,9,12,15,18,21,23].forEach(h => { const label = h === 0 ? "12am" : h === 12 ? "12pm" : formatHour(h); g.append("text") .attr("x", mLeft - 6) .attr("y", mTop + h * (CELL_H + GAP_Y) + CELL_H / 2 + 3) .attr("text-anchor","end") .attr("fill","rgba(0,0,0,.28)") .style("font","9px 'Inter','Helvetica Neue',Arial,sans-serif") .text(label); }); // Weekday / weekend separator const sepX = mLeft + 5 * (CELL_W + GAP_X) - GAP_X / 2; g.append("line") .attr("x1", sepX).attr("x2", sepX) .attr("y1", mTop - 2).attr("y2", mTop + ACTUAL_GRID_H + 2) .attr("stroke","rgba(0,0,0,.1)").attr("stroke-width","1") .attr("stroke-dasharray","3 3"); // Cells g.append("g") .attr("transform", `translate(${mLeft}, ${mTop})`) .selectAll("rect").data(grid).join("rect") .attr("x", d => d.dow * (CELL_W + GAP_X)) .attr("y", d => d.hour * (CELL_H + GAP_Y)) .attr("width", CELL_W).attr("height", CELL_H).attr("rx", 4) .attr("fill", d => cellColor(maxCount > 0 ? d.count / maxCount : 0)) .on("mousemove", function(event, d) { const [mx, my] = d3.pointer(event, wrap.node()); // Flip tooltip left for 2026 Sat (dow=5) and Sun (dow=6) const flipLeft = year === 2026 && (d.dow === 5 || d.dow === 6); const tipLeft = flipLeft ? mx - TIP_W - 14 : mx + 14; const day = DOW_LBLS[d.dow].toUpperCase(); const hh = formatHourCaps(d.hour); const rides = d3.format(",")(d.count); const dur = Number.isFinite(d.mean_duration) ? `${d3.format(".1f")(d.mean_duration)} min` : "—"; tip.style("opacity","1") .style("left", `${tipLeft}px`) .style("top", `${my - 10}px`) .html(`

${year} · ${day} · ${hh}

rides ${rides}

avg duration ${dur}

`); }) .on("mouseleave", () => tip.style("opacity","0")); } const g2016 = svg.append("g"); const g2026 = svg.append("g"); // Divider const divX = PANEL_W + GUTTER / 2; svg.append("line") .attr("x1", divX).attr("x2", divX) .attr("y1", mTop - 14).attr("y2", mTop + ACTUAL_GRID_H + 8) .attr("stroke","rgba(0,0,0,.07)").attr("stroke-width","1"); // Legend const lgY = mTop + ACTUAL_GRID_H + 16; const lgX = mLeft; const lgW = TOTAL_W - mLeft - mRight; const lgH = 7; const defs = svg.append("defs"); const gradId = `grad-${Math.random().toString(16).slice(2)}`; const grad = defs.append("linearGradient").attr("id", gradId) .attr("x1","0%").attr("x2","100%"); d3.range(0, 1.001, 0.04).forEach(t => { grad.append("stop") .attr("offset", `${t * 100}%`) .attr("stop-color", cellColor(t)); }); svg.append("rect") .attr("x", lgX).attr("y", lgY) .attr("width", lgW).attr("height", lgH) .attr("rx", 3).attr("fill", `url(#${gradId})`) .attr("stroke","rgba(0,0,0,.07)").attr("stroke-width",".5"); [["fewer rides", lgX, "start"], ["more rides", lgX + lgW, "end"]].forEach(([label, x, anchor]) => { svg.append("text") .attr("x", x).attr("y", lgY + lgH + 14) .attr("text-anchor", anchor) .attr("fill","rgba(0,0,0,.28)") .style("font","9px 'Inter','Helvetica Neue',Arial,sans-serif") .text(label); }); // Redraw function redraw() { pillEls.forEach((btn, i) => pillStyle(btn, PILLS[i] === riderSel)); const grid16 = buildGrid(2016, riderSel); const grid26 = buildGrid(2026, riderSel); const sharedMax = Math.max( d3.max(grid16, d => d.count), d3.max(grid26, d => d.count) ); drawPanel(g2016, grid16, sharedMax, 2016, 0); drawPanel(g2026, grid26, sharedMax, 2026, PANEL_W + GUTTER); } redraw(); return wrap.node(); } //Written with the help of Claude Opus 4.631:Tc09,## Write-up **Alternative Designs** While a heatmap was the representation we began with and ultimately returned to, there were three alternative designs we tried in between the static visualizations and final interactive visualization. Fig. 1 was for an overlapping area chart, which we decided against because it both failed to show the difference between the number of riders in 2016 and 2026 and also failed to allow comparisons between different days of the week. Fig. 2, our second design, was for a butterfly chart. While this allowed comparison between members and casual riders in an easily understandable visual, it failed to allow users to see the distribution over multiple days of the week. In Fig. 3, we thought about creating a multitude of heatmaps, once for the premium members and the other for casual riders. We decided against this design because we hoped to make direct comparisons, which the different color scales made impossible. Besides that, this visualization failed to show the difference between the data in 2016 and in 2026. **Design Challenges and User Testing** When designing the final interactive visualization, our biggest hurdle was distilling conversations with users into actionable suggestions, and then making the judgment call on if and how to execute on the feedback. Oftentimes users have the right instincts about ease of usability, but we found that a user’s ability to identify a problem sometimes outweighed their willingness to suggest a viable alternative. Challenges were more likely when a user seemed uncertain about the validity of their complaint - moments where chasing their thought processes to the underlying issue yielded variable results. The legend position on the initial (red) version of our interactive visualization wasn’t initially noted as a problem area, and only came up when we asked for areas of potential improvement. A contrary instance: in the blue interactive visualization, one of the first points of feedback we got was that the tooltip was obscured by the edge of the visualization on the two rightmost columns. It required a little thinking on how to address this, but placing the tooltip on the other side of the mouse seemed a simple, if not elegant, way to address this issue. Working directly with users, we learned, requires stronger than expected listening and interpretation skills. If we had another week, the focus would have been on doing another round of user testing, but in a format where we could trial live AI-generated divergent visualizations to extract and record the user’s reactions and interactions with multiple different solutions to their observation. **Work Split among Team Members** James: Designed initial version of interactive data visualization (red version); Led writing of final report Mannat: Static visualizations; Abandoned visualizations; 2x user tests; Final report; Varun: Dataset sourcing, cleaning, guiding questions; Tableau EDAs; Final version of interactive visualization (blue version); 2x user tests; Final report Shireen: Final report 32:T5d8,chart2 = { const year = yearSel; const metric = durationMetric; const days = new Set(daySel); const rows = data .filter(d => d.year === year) .filter(d => days.has(d.dow)); const durationTitle = metric === "mean_duration" ? "Mean Duration" : "Median Duration"; const top = Plot.plot({ width: 980, height: 330, marginLeft: 60, marginBottom: 30, title: "Members depend on Citi Bike for M-F commutes", x: {label: null, domain: d3.range(0, 24), tickFormat: d3.format("d")}, y: {label: durationTitle, grid: true}, color: {legend: true, label: "Member Casual"}, marks: [ Plot.dot(rows, { x: "hour", y: metric, stroke: "rider_type", r: 4, opacity: 0.9, title: formatTip }) ] }); const bottom = Plot.plot({ width: 980, height: 230, marginLeft: 60, marginTop: 10, marginBottom: 50, x: {label: "Hour", domain: d3.range(0, 24), tickFormat: d3.format("d")}, y: {label: "Count", grid: true}, color: {legend: false}, marks: [ Plot.lineY(rows, { x: "hour", y: "count", stroke: "rider_type", curve: "catmull-rom", strokeWidth: 2 }), Plot.ruleY([0]) ] }); // No dependency on htl; pure DOM container const div = document.createElement("div"); div.style.display = "flex"; div.style.flexDirection = "column"; div.style.gap = "10px"; div.append(top, bottom); return div; };33:Tdd4,**User #1:** Strengths: - User #1 liked the visual language of the heatmap and its effectiveness in communicating the entire scope of the dataset in a quick glance. - User #1 thought the color palette was effective in communicating the depth of ride volume and highlighting the user behavior. Improvements: - User #1 was interested in seeing the data from 2016 alongside the 2026 data, resulting in some experimenting with our viewpane and graph orientation. - User #1 was curious if the legend could be placed in an area that allowed easier view, as the back and forth between the graph and the legend, while not cumbersome, didn’t seem thoughtfully designed (we realized after some questioning) - User #1 wondered if we could invert the “Hour of day” and “Day of week” axes, as that seemed more logical than viewing hours on the horizontal axis. We had initially done a horizontal layout as a judgment call because it seemed easier to view, but took this comment into consideration when developing the final interactive visualization. **User #2:** Strengths: - User #2 said that they associated the bright orange tones with distress, and immediately thought that the darker patches (indicating higher traffic) were undesirable. - User #2 said that they liked the visibility the heatmap gave into the transition between different ride volumes Improvements: - User #2 was curious if we could replace the color palette with cooler, more neutral tones to avoid our visualization from appearing normative. - User #2 wondered if we could split up the transitions between times more finely in order to see better how the number of riders changed between the highest-density and lower-density times. - User #2 was opposed to the overlapping text between the slider and the selectors, and thought that text for “Ride Volume” and the legend were too closely placed. **User #3:** Strengths: - User #3 liked how the hues transitioned neatly and without switching colors, which made it possible for them to take in and process different instances of traffic simultaneously. - User #3 liked how the hours x days layout made it easy to find any particular instance of traffic. Improvements: - User #3 noticed that on the rightmost two columns of the right graph (2026 ridership), the tooltip was obscured by the edge of the panel, obscuring its view. We addressed this by adding a condition that those affected columns alone would show the tooltip on the left side of the mouse. - When asked what could improve the perceived credibility of the visualization, User #3 suggested having the dataset source citation somewhere on visualization and not just as a footnote elsewhere in the notebook. We thought that was a good suggestion and included it as an eyebrow header in the top right corner. **User #4:** Strengths: - User #4 liked the visual language of the heatmap and how the blues of the graph reminded them of the Citibike colors. Improvements: - User #4 thought that comparing values vertically and horizontally was a bit tough given the large size of the graph, but found it easier after zooming out (CTRL -) on their screen. While we didn’t change anything from this particular point of feedback, it was an important reminder that visual decisions made on a designer’s device might not always reflect cleanly on the end user’s screen. - User #4 thought the text was a little small and hard to read, so we increased everywhere except for the axis labels, where we wanted to avoid crowding the visualization. 34:[{"id":"fa1a1411aa1e8f8ec6936c02723ecc9c5313449ed5f2e40a5aaf8446602d87efd5605fc2a5461cb6d27e7899a1dcb609255af4584ebd136e5025192b53130657","href":"https://static.observableusercontent.com/files/fa1a1411aa1e8f8ec6936c02723ecc9c5313449ed5f2e40a5aaf8446602d87efd5605fc2a5461cb6d27e7899a1dcb609255af4584ebd136e5025192b53130657","name":"citibike_combined_agg.csv","type":"text/csv","lastModified":1774318875179.938,"size":20347},{"id":"d54c092dee0183c79f1fb25fca714c57ae7677582317af5528575ba8dc18bb05c9b47b2ea4960bf718b660a1a44390000672c639bb223c7d9378588bcb3a64f7","href":"https://static.observableusercontent.com/files/d54c092dee0183c79f1fb25fca714c57ae7677582317af5528575ba8dc18bb05c9b47b2ea4960bf718b660a1a44390000672c639bb223c7d9378588bcb3a64f7","name":"Screenshot 2026-03-01 225941.png","type":"image/png","lastModified":1774318875179.938,"size":112562},{"id":"30d16e8ba2ed8fd51453191590d348cea79d2c949f777b703c021d961e956db6fff304832b68372482589c400a910be9b7efb9fe2aabb0ecfb61177ed62c71e5","href":"https://static.observableusercontent.com/files/30d16e8ba2ed8fd51453191590d348cea79d2c949f777b703c021d961e956db6fff304832b68372482589c400a910be9b7efb9fe2aabb0ecfb61177ed62c71e5","name":"Screenshot 2026-03-01 230750.png","type":"image/png","lastModified":1774318875179.938,"size":95287},{"id":"c3c0d80c82f276dce341c198ecdeee0f71b383c701986b0e3f674751ff1b4342fa706cb55de2ef7867ba7636c15445ad72878eeafe51e72fc25e63f81d203d49","href":"https://static.observableusercontent.com/files/c3c0d80c82f276dce341c198ecdeee0f71b383c701986b0e3f674751ff1b4342fa706cb55de2ef7867ba7636c15445ad72878eeafe51e72fc25e63f81d203d49","name":"Screenshot 2026-03-25 at 10.26.52 PM.png","type":"image/png","lastModified":1774500923829.827,"size":40216},{"id":"7b2ed2ae6da0cb24e7d3953fd841f7c43998288dc53e2aa2f8ba6e96802d9de2288e84c659a610922bfaf8666f9a5dd395455831e5a6ed0467190f517aac8fa8","href":"https://static.observableusercontent.com/files/7b2ed2ae6da0cb24e7d3953fd841f7c43998288dc53e2aa2f8ba6e96802d9de2288e84c659a610922bfaf8666f9a5dd395455831e5a6ed0467190f517aac8fa8","name":"Screenshot 2026-03-25 at 10.23.32 PM.png","type":"image/png","lastModified":1774500833287.944,"size":55852},{"id":"47249ae05cdb7287dea2d550fd34d825db8699458c7b4dcd1d23f45fb434f64ef6e6a95b1c5f4c4a43b5c6f6ede9dc3398e2d9a3a9696c72b33ac22653583738","href":"https://static.observableusercontent.com/files/47249ae05cdb7287dea2d550fd34d825db8699458c7b4dcd1d23f45fb434f64ef6e6a95b1c5f4c4a43b5c6f6ede9dc3398e2d9a3a9696c72b33ac22653583738","name":"Screenshot 2026-03-01 232825.png","type":"image/png","lastModified":1774318875179.938,"size":95618},{"id":"53ceaa9fa44eb93bd42298507c5e49f597866b4d3c947a8348bfc74bd33b2a5c9b2e35ce2455157f8b479fe5e35c8402194e67d28487c11c975251b644931cba","href":"https://static.observableusercontent.com/files/53ceaa9fa44eb93bd42298507c5e49f597866b4d3c947a8348bfc74bd33b2a5c9b2e35ce2455157f8b479fe5e35c8402194e67d28487c11c975251b644931cba","name":"Screenshot 2026-03-25 at 10.23.05 PM.png","type":"image/png","lastModified":1774500902746.914,"size":100546}] 2d:{"id":"55a5bbf9de6bd023","slug":null,"title":"A4: Interactive Visualization","thumbnail":"36638920a2da1b4165f6932f2f0fcba83300ff0e0c0f934ef4b7f44ebda1e096","access_level":"public","create_time":"$D2026-03-24T02:21:15.179Z","update_time":"$D2026-03-26T05:00:55.564Z","view_time":null,"first_public_time":"$D2026-04-27T05:10:30.797Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"7a615336d5b186de","login":"columbia-dataviz","name":"Columbia Dataviz ","avatar_url":"https://avatars-next.observableusercontent.com/bef00fdd2fde3755f8d242e6a6dd04e4535ae9d634d372ec959928e1d95fd9dc","tier":"pro_2024"},"version":253,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b8350cf1b60ac455","login":"varun-ramamurthi","name":"Varun Ramamurthi","avatar_url":"https://avatars-next.observableusercontent.com/d58f1656b93e2221d160412c30a831d6e31a2c8cc09d0fdad2094c4c85153cf1","tier":null}],"members":[{"type":"team","id":"7a615336d5b186de","login":"columbia-dataviz","name":"Columbia Dataviz ","avatar_url":"https://avatars-next.observableusercontent.com/bef00fdd2fde3755f8d242e6a6dd04e4535ae9d634d372ec959928e1d95fd9dc","tier":"pro_2024","role":"editor"},{"type":"individual","id":"b8350cf1b60ac455","login":"varun-ramamurthi","name":"Varun Ramamurthi","avatar_url":"https://avatars-next.observableusercontent.com/d58f1656b93e2221d160412c30a831d6e31a2c8cc09d0fdad2094c4c85153cf1","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"A4: Interactive Visualization","cells":[{"id":0,"value":"# A4: Interactive Visualization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":38,"value":"**Guiding Questions:**\n\n\"How does mean and median ride duration vary by time of day, day of week, and premium membership status? How have these changed from 2016 to 2026?\"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":5,"value":"**Raw Data Information:**\n\nDataset 1: Citi Bike rides, New York City, January 2016\n\nDataset 2: Citi Bike rides, New York City, January 2026\n\nDataset index [link](https://s3.amazonaws.com/tripdata/index.html) ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":219,"value":"## Dataset Treatment:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":221,"value":"$2f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":188,"value":"## Final Interactive Visualization: When does the city ride?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":177,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":144,"value":"formatHour = (h) => {\n const ampm = h < 12 ? \"am\" : \"pm\";\n const hh = h % 12 === 0 ? 12 : (h % 12);\n return `${hh}${ampm}`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":140,"value":"formatHourCaps = (h) => {\n const ampm = h < 12 ? \"AM\" : \"PM\";\n const hh = h % 12 === 0 ? 12 : (h % 12);\n return `${hh}${ampm}`;\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":136,"value":"heatGrid = {\n const year = heatYear;\n const rider = heatRider;\n\n // filter base rows\n const base = data\n .filter(d => d.year === year)\n .filter(d => rider === \"all\" ? true : d.rider_type === rider);\n\n // key -> aggregate (in case there are duplicates)\n // we keep: sum(count), weighted mean_duration by count\n const m = d3.rollup(\n base,\n v => {\n const rides = d3.sum(v, d => d.count);\n const wmean = rides ? d3.sum(v, d => d.mean_duration * d.count) / rides : NaN;\n return {count: rides, mean_duration: wmean};\n },\n d => d.dow,\n d => d.hour\n );\n\n // fill missing cells with 0\n const out = [];\n for (let dow = 0; dow <= 6; dow++) {\n for (let hour = 0; hour <= 23; hour++) {\n const cell = m.get(dow)?.get(hour) ?? {count: 0, mean_duration: NaN};\n out.push({\n dow,\n hour,\n dow_name: dowLabel.get(dow) ?? String(dow),\n count: cell.count,\n mean_duration: cell.mean_duration\n });\n }\n }\n return out;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":157,"value":"viewof heatYear = Inputs.radio([2016, 2026], {label: \"Year\", value: 2026})\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":162,"value":"viewof heatRider = Inputs.radio([\"all\", \"member\", \"casual\"], {label: \"Rider\", value: \"all\"})\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":226,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":241,"value":"**Fig. 1**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":236,"value":"screenshot20260325At102332Pm = FileAttachment(\"Screenshot 2026-03-25 at 10.23.32 PM.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":247,"value":"**Fig. 2**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":246,"value":"screenshot20260325At102652Pm = FileAttachment(\"Screenshot 2026-03-25 at 10.26.52 PM.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":244,"value":"**Fig. 3**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":243,"value":"screenshot20260325At102305Pm = FileAttachment(\"Screenshot 2026-03-25 at 10.23.05 PM.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"## EDA Sketches\nTableau","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":50,"value":"image1 = FileAttachment(\"Screenshot 2026-03-01 225941.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":55,"value":"image3 = FileAttachment(\"Screenshot 2026-03-01 230750.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":61,"value":"image5 = FileAttachment(\"Screenshot 2026-03-01 232825.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":73,"value":"## Static Visualizations\nWe created 3 static visualizations during our ideation phase, based on our EDA sketches and before our final interactive visualization.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":87,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":90,"value":"Plot = require(\"@observablehq/plot@0.6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":92,"value":"Inputs = require(\"@observablehq/inputs@0.11\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":94,"value":"rows = await FileAttachment(\"citibike_combined_agg.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":106,"value":"data = rows\n .map(d => ({\n year: +d.year,\n hour: +d.hour,\n // your file uses day_of_week (0=Mon..6=Sun)\n dow: +(d.day_of_week ?? d.dow),\n // your file uses member_casual (\"member\"/\"casual\")\n rider_type: (d.member_casual ?? d.rider_type ?? d.member_type ?? d.usertype ?? d.type ?? \"\")\n .toString()\n .toLowerCase()\n .trim(),\n count: +d.count,\n mean_duration: +d.mean_duration,\n median_duration: +d.median_duration\n }))\n .filter(d =>\n Number.isFinite(d.year) &&\n Number.isFinite(d.hour) && d.hour >= 0 && d.hour <= 23 &&\n Number.isFinite(d.dow) && d.dow >= 0 && d.dow <= 6 &&\n (d.rider_type === \"member\" || d.rider_type === \"casual\") &&\n Number.isFinite(d.count) &&\n Number.isFinite(d.mean_duration) &&\n Number.isFinite(d.median_duration)\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":109,"value":"DOW = [\n {dow: 0, label: \"Mon\"},\n {dow: 1, label: \"Tue\"},\n {dow: 2, label: \"Wed\"},\n {dow: 3, label: \"Thu\"},\n {dow: 4, label: \"Fri\"},\n {dow: 5, label: \"Sat\"},\n {dow: 6, label: \"Sun\"}\n];\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":113,"value":"dowLabel = new Map(DOW.map(d => [d.dow, d.label]));\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":116,"value":"formatTip = (d) => [\n `Year: ${d.year}`,\n `Hour: ${d.hour}`,\n `Day: ${dowLabel.get(d.dow) ?? d.dow}`,\n `Rider: ${d.rider_type}`,\n `Count: ${d3.format(\",\")(d.count)}`,\n `Mean: ${d3.format(\".2f\")(d.mean_duration)} min`,\n `Median: ${d3.format(\".2f\")(d.median_duration)} min`\n].join(\"\\n\");\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":118,"value":"viewof yearSel = Inputs.select([2016, 2026], {label: \"Year\", value: 2026});\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":120,"value":"viewof riderSel = Inputs.select(\n [\"all\", \"member\", \"casual\"],\n {label: \"Rider type (Chart 1 & 3)\", value: \"all\"}\n);\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":122,"value":"viewof durationMetric = Inputs.select(\n [\n {value: \"mean_duration\", label: \"Mean duration\"},\n {value: \"median_duration\", label: \"Median duration\"}\n ],\n {label: \"Duration metric (Chart 2)\", value: \"mean_duration\"}\n);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":124,"value":"viewof daySel = Inputs.checkbox(\n DOW.map(d => d.dow),\n {\n label: \"Days (Chart 2)\",\n value: [0,1,2,3,4,5,6],\n format: (dow) => dowLabel.get(dow) ?? dow\n }\n);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":126,"value":"chart1 = {\n const year = yearSel;\n const rider = riderSel;\n\n const rows = data\n .filter(d => d.year === year)\n .filter(d => (rider === \"all\" ? true : d.rider_type === rider))\n .map(d => ({...d, dow_name: dowLabel.get(d.dow) ?? String(d.dow)}));\n\n return Plot.plot({\n width: 980,\n height: 430,\n marginLeft: 60,\n marginBottom: 50,\n title: \"Citi Bike relies on both commuters and weekend riders\",\n x: {label: \"Hour\", domain: d3.range(0, 24), tickFormat: d3.format(\"d\")},\n y: {label: \"Count\", grid: true},\n color: {legend: true, label: \"Day Of Week\"},\n marks: [\n Plot.lineY(rows, {\n x: \"hour\",\n y: \"count\",\n stroke: \"dow_name\",\n curve: \"catmull-rom\",\n strokeWidth: 2\n }),\n Plot.ruleY([0])\n ]\n });\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":128,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":130,"value":"chart3 = {\n const rider = riderSel;\n const rows = data.filter(d => (rider === \"all\" ? true : d.rider_type === rider));\n\n return Plot.plot({\n width: 980,\n height: 430,\n marginLeft: 60,\n marginBottom: 50,\n title: \"As Citi Bike scaled ridership, behavior became more uniform\",\n x: {label: \"Mean Duration (min)\", grid: true},\n y: {label: \"Count\", grid: true},\n color: {legend: true, label: \"Year\"},\n marks: [\n Plot.dot(rows, {\n x: \"mean_duration\",\n y: \"count\",\n stroke: \"year\",\n r: 4,\n opacity: 0.9,\n title: formatTip\n }),\n Plot.ruleY([0])\n ]\n });\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":211,"value":"## Usability Tests","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":213,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":252,"value":"Resources:\nHeer, Jeffrey, Search about this author, Michael Bostock, Search about this author, Vadim Ogievetsky, and Search about this author. “A Tour through the Visualization Zoo.” Queue 8, no. 5 (2010): 20–30. https://doi.org/10.1145/1794514.1805128.\nBostock, M., V. Ogievetsky, and J. Heer. “D3 Data-Driven Documents.” IEEE Transactions on Visualization and Computer Graphics 17, no. 12 (2011): 2301–9. https://doi.org/10.1109/TVCG.2011.185.\nHeer, Jeffrey, and Ben Shneiderman. “Interactive Dynamics for Visual Analysis: A Taxonomy of Tools That Support the Fluent and Flexible Use of Visualizations.” Queue 10, no. 2 (2012): 30–55. https://doi.org/10.1145/2133416.2146416.\nMunzner, Tamara. Visualization Analysis and Design. AK Peters Visualization Series, CRC Press, 2014. https://doi.org/10.1201/b17511.\nFew, Stephen. Now You See It: Simple Visualization Techniques for Quantitative Analysis. Analytics Press, 2009.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 2e:"$2d:body"