2b:null 2c:["$","title",null,{"children":"Reactive Travel Destination Recommendation & Planning System | Northeastern University John A. Guerra Gomez classes | Observable"}] 31:T705,viewof userPreferences = { const form = html``; const budget = Inputs.range([1000, 10000], { label: "Travel Budget ($)", step: 500, value: 3000 }); const duration = Inputs.select([3, 5, 7, 10, 14], { label: "Trip Duration (days)", value: 7 }); const activities = Inputs.checkbox( ["Hiking", "Beaches", "Cultural Sites", "Food", "Shopping", "Adventure Sports"], { label: "Preferred Activities", value: ["Beaches", "Cultural Sites"] } ); const season = Inputs.radio(["Spring", "Summer", "Fall", "Winter", "Any"], { label: "Travel Season", value: "Any" }); const travelers = Inputs.range([1, 10], { label: "Number of Travelers", step: 1, value: 2 }); form.append(budget, duration, activities, season, travelers); form.value = { get budget() { return budget.value; }, get duration() { return duration.value; }, get activities() { return activities.value; }, get season() { return season.value; }, get travelers() { return travelers.value; } }; const dispatch = () => form.dispatchEvent(new CustomEvent("input")); budget.addEventListener("input", dispatch); duration.addEventListener("input", dispatch); activities.addEventListener("input", dispatch); season.addEventListener("input", dispatch); travelers.addEventListener("input", dispatch); return form; } 32:T867,// Cell6c - Styled Recommendations Output { const container = html`

`; const [button, resultDiv] = container.children; button.onclick = async () => { try { if (!userPreferences || !getAIRecommendations) { throw new Error("Missing dependencies"); } const { recommendations } = await getAIRecommendations(userPreferences); if (recommendations.length === 0) { resultDiv.innerHTML = `

No destinations matched your preferences.

`; return; } // Clear previous results resultDiv.innerHTML = ""; // Render each destination as a styled card for (const dest of recommendations) { const card = html`

${dest.name}

${dest.description}

Avg. Cost: $${dest.avgCost}
Best Season: ${dest.bestSeason}
Activities: ${dest.activities.join(", ")}
Match Score: ${dest.matchScore}

`; resultDiv.appendChild(card); } } catch (err) { resultDiv.innerHTML = `Error: ${err.message}`; } }; return container; } 33:T6d5, destinations = [ { name: "New York City, NY", description: "The bustling metropolis with iconic landmarks like Times Square and Central Park.", avgCost: 3500, bestSeason: "Fall", goodSeasons: ["Spring", "Summer"], activities: ["City", "Culture", "Food"] }, { name: "Grand Canyon, AZ", description: "Breathtaking natural wonder with hiking trails and helicopter tours.", avgCost: 1800, bestSeason: "Spring", goodSeasons: ["Fall"], activities: ["Hiking", "Nature"] }, { name: "Miami, FL", description: "Vibrant beaches, Art Deco architecture, and lively nightlife.", avgCost: 2800, bestSeason: "Winter", goodSeasons: ["Spring"], activities: ["Beach", "Party", "Food"] }, { name: "Yellowstone National Park, WY", description: "Geysers, hot springs, and wildlife in America's first national park.", avgCost: 2200, bestSeason: "Summer", goodSeasons: ["Spring", "Fall"], activities: ["Hiking", "Nature", "Wildlife"] }, { name: "San Francisco, CA", description: "Golden Gate Bridge, Alcatraz, and historic cable cars.", avgCost: 3200, bestSeason: "Summer", goodSeasons: ["Fall", "Spring"], activities: ["City", "Culture", "Food"] }, { name: "Orlando, FL", description: "Theme park capital with Disney World and Universal Studios.", avgCost: 3000, bestSeason: "Spring", goodSeasons: ["Winter"], activities: ["Family", "Theme Parks"] }, { name: "Las Vegas, NV", description: "Entertainment capital with casinos, shows, and desert adventures.", avgCost: 2500, bestSeason: "Fall", goodSeasons: ["Spring", "Winter"], activities: ["Party", "Food", "Adventure"] } ];34:[{"id":"0299aec490fdcbad30b186e618a6db2e212b78365b9563fa6d7105c36289f629b8a01dffab290bd26e41c4c5a900866676936c230975c180c6bb412175fa0a11","href":"https://static.observableusercontent.com/files/0299aec490fdcbad30b186e618a6db2e212b78365b9563fa6d7105c36289f629b8a01dffab290bd26e41c4c5a900866676936c230975c180c6bb412175fa0a11","name":"d3.min.js","type":"application/javascript","lastModified":1745517642470.069,"size":279449},{"id":"65635d3650bc92db2a402bdbf33131949e5aedeb31ed147e4fc9812cb58e8aa81c1cdd52887ee770d7e1762b6162783aa1223dc97b662b38c767f85501fa03fe","href":"https://static.observableusercontent.com/files/65635d3650bc92db2a402bdbf33131949e5aedeb31ed147e4fc9812cb58e8aa81c1cdd52887ee770d7e1762b6162783aa1223dc97b662b38c767f85501fa03fe","name":"arquero.min.js","type":"application/javascript","lastModified":1745517647498.543,"size":235970},{"id":"6c6f14a8da42c776a34ca1bff5f5a26b3efad355a9e48e1211156f8af094743a1ac48b5bfa59a759c6a73171b20db2bd2dd819847a1cbd4b4282a8996114cf46","href":"https://static.observableusercontent.com/files/6c6f14a8da42c776a34ca1bff5f5a26b3efad355a9e48e1211156f8af094743a1ac48b5bfa59a759c6a73171b20db2bd2dd819847a1cbd4b4282a8996114cf46","name":"destinations.json","type":"application/json","lastModified":1745558580628.446,"size":12135}] 2f:{"id":"9334f0c86570da6f","slug":null,"title":"Reactive Travel Destination Recommendation & Planning System","thumbnail":"0a2c7d15858021f2f596b264b8eda6929b5674d3f09f998de047d4041e93965c","access_level":"public","create_time":"$D2025-04-24T06:20:50.806Z","update_time":"$D2025-04-25T16:57:35.991Z","view_time":null,"first_public_time":"$D2025-04-24T13:08:13.480Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"afbaa6d30585fd36","login":"nujguerra","name":"Northeastern University John A. Guerra Gomez classes","avatar_url":"https://avatars-next.observableusercontent.com/04e5ef72b3edcda1296894b5d1ecaa9c92ef5d52d69e65e4c115de5534928fe9","tier":"education_2026","bio":""},"version":465,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0af680156a5ae1f6","login":"zehanwang810","name":"ZehanWang810","avatar_url":"https://avatars-next.observableusercontent.com/7dee262a51d1ff0c1ad742628391ba7ca6636000084ca2c83399e7f07acb4d54","tier":null,"bio":""}],"members":[{"type":"team","id":"afbaa6d30585fd36","login":"nujguerra","name":"Northeastern University John A. Guerra Gomez classes","avatar_url":"https://avatars-next.observableusercontent.com/04e5ef72b3edcda1296894b5d1ecaa9c92ef5d52d69e65e4c115de5534928fe9","tier":"education_2026","role":"editor"},{"type":"individual","id":"0af680156a5ae1f6","login":"zehanwang810","name":"ZehanWang810","avatar_url":"https://avatars-next.observableusercontent.com/7dee262a51d1ff0c1ad742628391ba7ca6636000084ca2c83399e7f07acb4d54","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Reactive Travel Destination Recommendation & Planning System","cells":[{"id":0,"value":"# Reactive Travel Destination Recommendation & Planning System","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":63,"value":"## Project Objective \nExisting travel planning tools either provide generic recommendations lacking personalization or are overly complex, resulting in poor user experience. This project aims to build an intelligent travel planning platform that combines AI-powered recommendation engines, interactive itinerary design tools, and dynamic visualizations to help users quickly find destinations matching their preferences and easily create detailed travel plans.\n\n## Key Problems Solved \n\n### 1. Insufficient Personalization \n- Traditional tools rely on basic filters (e.g., budget, season) while ignoring personalized factors like travel history and social preferences. \n\n### 2. Cumbersome Itinerary Planning \n- Manual scheduling of daily activities, route optimization, and time management present high barriers for average users. \n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":71,"value":"## How It Works / Workflow\n\n### 1. Set Your Preferences\n- Input your travel budget range\n- Select preferred activities (e.g., hiking, beaches, cultural sites) \n- Choose your travel season and duration\n- Optional: Connect social accounts for enhanced personalization\n\n### 2. Generate AI Recommendations\n- Our system analyzes your inputs using machine learning\n- Google Gemini processes natural language preferences\n- Returns ranked destination suggestions with compatibility scores (0-100)\n\n### 3. Build Your Itinerary\n- Select destinations from recommendations\n- Interactive timeline automatically organizes activities\n- Smart routing optimizes daily schedules based on:\n - Geographic proximity\n - Opening hours\n - Estimated activity duration\n\n\n### 4. Finalize & Export\n- Receive complete travel plan with:\n - Daily schedules\n - Transportation options\n - Budget breakdown\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":81,"value":"## Components & Technology Used\n\n- **Observable Platform**: Built entirely within Observable notebooks using reactive JavaScript\n- **User Inputs**: \n - Budget/activity selectors using Observable `Inputs`\n - Optional CSV/JSON upload via `FileAttachment`\n\n- **Itinerary Tools**:\n - Vis.js timeline for scheduling\n - Turf.js for route optimization","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":448,"value":"## Please Input your travel preferences","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":135,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":348,"value":"function calculateMatchScore(destination, budget, activities, season) {\n // 参数验证\n if (!destination || typeof budget!== 'number' ||!Array.isArray(activities)) {\n return 0;\n }\n let score = 0;\n\n // 1. Budget match (50% weight)\n if (destination.avgCost) {\n const budgetRatio = Math.min(1, budget / destination.avgCost);\n score += budgetRatio * 50;\n }\n\n // 2. Activity match (30% weight)\n if (destination.activities) {\n const matchedActivities = destination.activities.filter(a => activities.includes(a));\n const activityWeight = 30 / activities.length;\n score += Math.min(30, matchedActivities.length * activityWeight);\n }\n\n // 3. Season match (20% weight, optional)\n if (season && destination.bestSeason === season) {\n score += 20;\n }\n\n return Math.min(100, Math.round(score));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"function getAIRecommendations(userPrefs) {\n // 模拟目的地数据（实际项目可替换为真实数据源）\n \n // 使用您的评分算法\n const scoredDestinations = destinations.map(dest => ({\n ...dest,\n matchScore: calculateMatchScore(\n dest,\n userPrefs.budget,\n userPrefs.activities,\n userPrefs.season\n )\n }));\n\n // 返回过滤后的推荐（分数>50的）\n return {\n recommendations: scoredDestinations\n .filter(d => d.matchScore > 50)\n .sort((a, b) => b.matchScore - a.matchScore)\n };\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":385,"value":"viewof travel = travelRecommendationWidget({\n destinations,\n activities: [\"Beach\", \"City\", \"Culture\", \"Food\", \"Hiking\", \"Nature\", \"Party\", \"Wildlife\", \"Family\", \"Theme Parks\", \"Adventure\"],\n initialBudget: 2500\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"travel","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"import {travelRecommendationWidget} from \"80ddca7362c36143\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"viewof libraries = {\n try {\n let d3;\n try {\n d3 = await import(\"https://cdn.jsdelivr.net/npm/d3@7\");\n } catch {\n d3 = await import(\"https://unpkg.com/d3@7/dist/d3.min.js\");\n }\n \n let aq;\n try {\n aq = await import(\"https://cdn.jsdelivr.net/npm/arquero@latest\");\n } catch {\n aq = await import(\"https://unpkg.com/arquero@latest/dist/arquero.min.js\");\n }\n \n return {\n d3: d3.default || d3,\n aq: aq.default || aq,\n html: html`

✓ Libraries loaded successfully

`\n };\n } catch(e) {\n return {\n error: e.message,\n html: html`

X Failed to load libraries: ${e.message}

`\n };\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"//d3\nviewof d3Loader = {\n var d3; \n try {\n d3 = await import(await FileAttachment(\"d3.min.js\").url());\n } catch {\n d3 = await import(\"https://esm.sh/d3@7.8.2\");\n }\n return html`

\n ${d3 ? '✅ D3 Loaded successfully.' : '❌ D3 加载失败'}\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"//arquero\nviewof aqLoader = {\n var aq; // 使用 var 替代 let/const\n try {\n aq = await import(await FileAttachment(\"arquero.min.js\").url());\n } catch {\n aq = await import(\"https://esm.sh/arquero@latest\");\n }\n return html`

\n ${aq ? '✅ Arquero Loaded successfully.' : '❌ Arquero 加载失败'}\n

Travel Preferences

${dest.name}