25:["$","title",null,{"children":"Coordinate Systems and Data Perception | Mak Ahmad | Observable"}] 49:T658,// Generate realistic 24-hour website traffic data // This simulates a social media platform with clear daily patterns websiteTrafficData = { const hours = Array.from({length: 24}, (_, i) => i); const data = hours.map(hour => { // Create a realistic pattern: low at night (2-6 AM), peaks during lunch and evening let baseTraffic; if (hour >= 2 && hour <= 6) { // Very low traffic during early morning hours baseTraffic = 150 + Math.sin((hour - 2) * Math.PI / 4) * 50; } else if (hour >= 7 && hour <= 11) { // Morning rise baseTraffic = 300 + (hour - 7) * 80; } else if (hour >= 12 && hour <= 14) { // Lunch peak baseTraffic = 700 + Math.sin((hour - 12) * Math.PI / 2) * 100; } else if (hour >= 15 && hour <= 18) { // Afternoon plateau baseTraffic = 650 + Math.sin((hour - 15) * Math.PI / 3) * 50; } else if (hour >= 19 && hour <= 22) { // Evening peak (highest traffic) baseTraffic = 800 + Math.sin((hour - 19) * Math.PI / 3) * 150; } else { // Late night decline baseTraffic = 400 - (hour >= 23 ? (hour - 23) * 200 : (1 - hour) * 100); } // Add some realistic variation const variation = (Math.random() - 0.5) * 80; const traffic = Math.max(50, Math.round(baseTraffic + variation)); return { hour: hour, traffic: traffic, label: hour === 0 ? "12 AM" : hour < 12 ? `${hour} AM` : hour === 12 ? "12 PM" : `${hour - 12} PM` }; }); console.log("Generated traffic data:", data); // Debug output return data; }4a:T2499,{ // Robust error checking and fallback handling if (typeof d3 === 'undefined') { return html`

Error: D3 library is not loaded. Make sure the first cell contains: d3 = require("d3@7")

`; } if (!websiteTrafficData || !Array.isArray(websiteTrafficData)) { return html`

Error: Website traffic data is not available or invalid.

`; } if (!viewType || typeof viewType !== 'string') { return html`

Loading: Please wait for the view selector to initialize. Current value: ${JSON.stringify(viewType)}

`; } // Set up dimensions and margins const width = 600; const height = 500; const margin = {top: 60, right: 60, bottom: 60, left: 60}; // Create SVG container const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("background", "#fafafa") .style("border", "1px solid #ddd"); try { if (viewType === "cartesian-bar") { // Traditional bar chart in Cartesian coordinates const xScale = d3.scaleBand() .domain(websiteTrafficData.map(d => d.hour)) .range([margin.left, width - margin.right]) .padding(0.1); const yScale = d3.scaleLinear() .domain([0, d3.max(websiteTrafficData, d => d.traffic)]) .nice() .range([height - margin.bottom, margin.top]); // Add axes svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(xScale).tickFormat(d => { return d === 0 ? "12AM" : d < 12 ? `${d}AM` : d === 12 ? "12PM" : `${d-12}PM`; })) .selectAll("text") .style("font-size", "10px"); svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(yScale)); // Add bars svg.selectAll(".bar") .data(websiteTrafficData) .join("rect") .attr("class", "bar") .attr("x", d => xScale(d.hour)) .attr("y", d => yScale(d.traffic)) .attr("width", xScale.bandwidth()) .attr("height", d => yScale(0) - yScale(d.traffic)) .attr("fill", d => d3.interpolateBlues(0.3 + 0.6 * d.traffic / d3.max(websiteTrafficData, d => d.traffic))); // Add title and labels svg.append("text") .attr("x", width / 2) .attr("y", margin.top / 2) .attr("text-anchor", "middle") .style("font-size", "16px") .style("font-weight", "bold") .text("Website Traffic by Hour (Bar Chart)"); svg.append("text") .attr("x", width / 2) .attr("y", height - 10) .attr("text-anchor", "middle") .style("font-size", "12px") .text("Hour of Day"); svg.append("text") .attr("transform", "rotate(-90)") .attr("x", -height / 2) .attr("y", 20) .attr("text-anchor", "middle") .style("font-size", "12px") .text("Visitors per Hour"); } else if (viewType === "cartesian-line") { // Line chart showing temporal flow const xScale = d3.scaleLinear() .domain([0, 23]) .range([margin.left, width - margin.right]); const yScale = d3.scaleLinear() .domain(d3.extent(websiteTrafficData, d => d.traffic)) .nice() .range([height - margin.bottom, margin.top]); // Add axes svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(xScale).tickFormat(d => { return d === 0 ? "12AM" : d < 12 ? `${d}AM` : d === 12 ? "12PM" : `${d-12}PM`; })); svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(yScale)); // Create line generator const line = d3.line() .x(d => xScale(d.hour)) .y(d => yScale(d.traffic)) .curve(d3.curveCardinal); // Add the line svg.append("path") .datum(websiteTrafficData) .attr("fill", "none") .attr("stroke", "#4285f4") .attr("stroke-width", 3) .attr("d", line); // Add dots svg.selectAll(".dot") .data(websiteTrafficData) .join("circle") .attr("class", "dot") .attr("cx", d => xScale(d.hour)) .attr("cy", d => yScale(d.traffic)) .attr("r", 4) .attr("fill", "#4285f4"); // Add title and labels svg.append("text") .attr("x", width / 2) .attr("y", margin.top / 2) .attr("text-anchor", "middle") .style("font-size", "16px") .style("font-weight", "bold") .text("Website Traffic Flow (Line Chart)"); svg.append("text") .attr("x", width / 2) .attr("y", height - 10) .attr("text-anchor", "middle") .style("font-size", "12px") .text("Hour of Day"); svg.append("text") .attr("transform", "rotate(-90)") .attr("x", -height / 2) .attr("y", 20) .attr("text-anchor", "middle") .style("font-size", "12px") .text("Visitors per Hour"); } else if (viewType === "polar-clock") { // Radial clock chart in polar coordinates const centerX = width / 2; const centerY = height / 2; const outerRadius = Math.min(width, height) / 2 - margin.top; const innerRadius = outerRadius * 0.3; // Create angle scale (0 at top, going clockwise) const angleScale = d3.scaleLinear() .domain([0, 24]) .range([0, 2 * Math.PI]); // Create radius scale for traffic values const radiusScale = d3.scaleLinear() .domain([0, d3.max(websiteTrafficData, d => d.traffic)]) .range([innerRadius, outerRadius]); // Create arc generator for each hour segment const arc = d3.arc() .innerRadius(innerRadius) .outerRadius(d => radiusScale(d.traffic)) .startAngle(d => angleScale(d.hour) - Math.PI / 24) .endAngle(d => angleScale(d.hour) + Math.PI / 24); // Create group for the clock const clockGroup = svg.append("g") .attr("transform", `translate(${centerX},${centerY})`); // Add hour segments clockGroup.selectAll(".segment") .data(websiteTrafficData) .join("path") .attr("class", "segment") .attr("d", arc) .attr("fill", d => d3.interpolateBlues(0.3 + 0.6 * d.traffic / d3.max(websiteTrafficData, d => d.traffic))) .attr("stroke", "white") .attr("stroke-width", 1); // Add hour labels around the outside clockGroup.selectAll(".hour-label") .data(websiteTrafficData.filter(d => d.hour % 3 === 0)) // Show every 3rd hour to avoid crowding .join("text") .attr("class", "hour-label") .attr("x", d => (outerRadius + 20) * Math.sin(angleScale(d.hour))) .attr("y", d => -(outerRadius + 20) * Math.cos(angleScale(d.hour))) .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .style("font-size", "12px") .style("font-weight", "bold") .text(d => d.label); // Add concentric circles for reference const gridLines = [0.25, 0.5, 0.75, 1].map(f => innerRadius + (outerRadius - innerRadius) * f); clockGroup.selectAll(".grid-circle") .data(gridLines) .join("circle") .attr("class", "grid-circle") .attr("r", d => d) .attr("fill", "none") .attr("stroke", "#ddd") .attr("stroke-width", 1) .attr("stroke-dasharray", "2,2"); // Add center circle clockGroup.append("circle") .attr("r", innerRadius) .attr("fill", "white") .attr("stroke", "#333") .attr("stroke-width", 2); // Add title svg.append("text") .attr("x", width / 2) .attr("y", 30) .attr("text-anchor", "middle") .style("font-size", "16px") .style("font-weight", "bold") .text("Daily Traffic Cycle (Clock View)"); // Add subtitle svg.append("text") .attr("x", width / 2) .attr("y", height - 10) .attr("text-anchor", "middle") .style("font-size", "11px") .style("fill", "#666") .text("Distance from center = traffic volume"); } else { // Handle unexpected viewType values with detailed error info svg.append("text") .attr("x", width / 2) .attr("y", height / 2) .attr("text-anchor", "middle") .style("font-size", "16px") .style("fill", "red") .text(`Unexpected view type: "${viewType}" (${typeof viewType})`); } } catch (error) { console.error("Visualization error:", error); // Show error in the SVG itself svg.append("text") .attr("x", width / 2) .attr("y", height / 2) .attr("text-anchor", "middle") .style("font-size", "14px") .style("fill", "red") .text(`Error: ${error.message}`); } return svg.node(); }4b:T545,## Guided Exploration Try switching between all three views and consider these questions: ### 🤔 Reflection Questions 1. **Pattern Recognition:** In which view is the daily cycle most immediately obvious? Why do you think this is? 2. **Spatial Intuition:** How does the clock view change your understanding of when the "day begins and ends" for this website's users? 3. **Design Choice:** If you were presenting this data to: - A business executive wanting specific peak hours → Choose: _______ - A social scientist studying daily rhythms → Choose: _______ - A web developer optimizing server resources → Choose: _______ 4. **Cyclical vs Linear Time:** The clock view reveals something the linear charts cannot—that 11 PM is "close" to 1 AM. When might this spatial relationship matter for your analysis? ### 💡 Beyond Time Data This principle applies beyond temporal data. Consider: - **Political surveys:** Linear scale vs. circular political spectrum - **Geographic data:** Cartesian maps vs. polar projections - **Seasonal data:** Monthly bars vs. circular calendar representation ### 🎯 The Big Picture Choosing coordinates isn't just technical—it's interpretive. Your choice shapes what patterns your audience will notice first, what comparisons they'll make naturally, and what insights emerge most readily.4c:[] 29:{"id":"ec0eb047effcd825","slug":null,"title":"Coordinate Systems and Data Perception","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2025-06-10T06:56:06.121Z","update_time":"$D2025-06-12T17:36:47.426Z","view_time":null,"first_public_time":"$D2025-06-10T07:47:00.415Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"375612435f7935c9","login":"makahmad","name":"Mak Ahmad","avatar_url":"https://avatars-next.observableusercontent.com/715f582284384f47898ac4d5e738ae71c37139b7e1aae08021f6100f8e02bd89","tier":"education_2026","bio":"","followed_by_you":false,"follows_you":false},"version":56,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a0ee4b29e550daf5","login":"makahmad","name":"Mak Ahmad","avatar_url":"https://avatars-next.observableusercontent.com/715f582284384f47898ac4d5e738ae71c37139b7e1aae08021f6100f8e02bd89","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"375612435f7935c9","login":"makahmad","name":"Mak Ahmad","avatar_url":"https://avatars-next.observableusercontent.com/715f582284384f47898ac4d5e738ae71c37139b7e1aae08021f6100f8e02bd89","tier":"education_2026","role":"editor"},{"type":"individual","id":"a0ee4b29e550daf5","login":"makahmad","name":"Mak Ahmad","avatar_url":"https://avatars-next.observableusercontent.com/715f582284384f47898ac4d5e738ae71c37139b7e1aae08021f6100f8e02bd89","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"6afcab3eab45518a","slug":"klm-summer-2025","title":"KLM - Summer 2025","owner":{"id":"375612435f7935c9","login":"makahmad","name":"Mak Ahmad"}},"type":"notebook","body":{"titling":"auto","title":"Coordinate Systems and Data Perception","cells":[{"id":0,"value":"# Coordinate Systems and Data Perception\n\n## Learning Objectives\nBy the end of this exercise, you will:\n- **Recognize** how the same data tells different stories in different coordinate systems\n- **Understand** when polar coordinates reveal patterns that Cartesian coordinates obscure\n- **Appreciate** that cyclical data often benefits from circular spatial arrangements\n- **Develop** intuition for choosing appropriate coordinate systems for your own data\n\n## The Challenge\nImagine you're analyzing website traffic patterns for a social media platform. The same 24-hour dataset can look completely different depending on how we arrange it spatially. Let's explore how coordinate systems shape our understanding of temporal cycles.\n\n*Use the dropdown below to switch between different views and observe how your perception changes.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"viewof viewType = Inputs.select(\n [\"cartesian-bar\", \"cartesian-line\", \"polar-clock\"], \n {\n label: \"Choose coordinate system:\",\n value: \"cartesian-bar\",\n format: x => ({\n \"cartesian-bar\": \"📊 Bar Chart (Cartesian - Discrete)\",\n \"cartesian-line\": \"📈 Line Chart (Cartesian - Continuous)\", \n \"polar-clock\": \"🕐 Clock Chart (Polar - Cyclical)\"\n })[x]\n }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"md`**Debug Info:**\n- D3 loaded: ${typeof d3 !== 'undefined' ? '✅' : '❌'}\n- Data available: ${websiteTrafficData ? '✅ (' + websiteTrafficData.length + ' points)' : '❌'}\n- Current view type: \"${viewType}\"\n- View type is string: ${typeof viewType === 'string' ? '✅' : '❌ (type: ' + typeof viewType + ')'}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$4b","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"## Technical Notes\n\nThis notebook demonstrates several key concepts:\n\n### Coordinate System Transformations\n- **Cartesian:** Uses x,y positioning with linear scales\n- **Polar:** Converts to angle/radius using \\`angleScale\\` and \\`radiusScale\\`\n- **Arc Generator:** D3's \\`d3.arc()\\` handles the polar coordinate math\n\n### Design Considerations\n- **Color consistency:** All views use the same color encoding (traffic volume)\n- **Scale consistency:** Proportional relationships maintained across views\n- **Label adaptation:** Hour labels formatted appropriately for each context\n\n### Interactive Elements\n- **Reactive cells:** The visualization automatically updates when \\`viewType\\` changes\n- **Observable pattern:** Each view is conditionally rendered within the same cell\n- **Shared data:** All views reference the same \\`websiteTrafficData\\` array\n\nThis approach ensures students see identical data through different spatial lenses, making the coordinate system effect clear and pedagogically powerful.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"d3 = require(\"d3@7\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null