{"id":28140237,"url":"https://github.com/efeozalpp/survey-data-visualization-app","last_synced_at":"2025-06-15T21:41:50.612Z","repository":{"id":272156223,"uuid":"915675820","full_name":"EfeOzalpp/Survey-Data-Visualization-App","owner":"EfeOzalpp","description":"An interactive single page app survey with persistent real-time data visualization powered by Three.js. Sanity.io backend providing instant gamified results. Q5.js canvas and modular approach to deliver conditional storytelling that dynamically adapts the narrative based on user input.","archived":false,"fork":false,"pushed_at":"2025-04-14T07:43:57.000Z","size":2701,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-14T08:41:27.237Z","etag":null,"topics":["gamification","microinteractions","p5js","procedural","procedural-art","real-time-rendering","sanity","survey-form","threejs"],"latest_commit_sha":null,"homepage":"https://butterflyeff3ct.online/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"cc0-1.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/EfeOzalpp.png","metadata":{"files":{"readme":"README","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-01-12T14:09:18.000Z","updated_at":"2025-04-14T07:44:01.000Z","dependencies_parsed_at":"2025-01-12T15:36:30.760Z","dependency_job_id":"2b30e14c-a9c5-4d8f-b25c-5da5c407c6ca","html_url":"https://github.com/EfeOzalpp/Survey-Data-Visualization-App","commit_stats":null,"previous_names":["efeozalpp/butterfly-habits","efeozalpp/real-time-survey-data-visualization-app","efeozalpp/survey-data-visualization-app"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EfeOzalpp%2FSurvey-Data-Visualization-App","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EfeOzalpp%2FSurvey-Data-Visualization-App/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EfeOzalpp%2FSurvey-Data-Visualization-App/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EfeOzalpp%2FSurvey-Data-Visualization-App/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/EfeOzalpp","download_url":"https://codeload.github.com/EfeOzalpp/Survey-Data-Visualization-App/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254198512,"owners_count":22030966,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gamification","microinteractions","p5js","procedural","procedural-art","real-time-rendering","sanity","survey-form","threejs"],"created_at":"2025-05-14T18:11:03.932Z","updated_at":"2025-06-15T21:41:50.600Z","avatar_url":"https://github.com/EfeOzalpp.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🌍 Survey - Storytelling - Real-Time Data Visualization\n\nAn interactive web app that reveals **gamified results** after users complete a climate change survey.  \nUsers explore their answers and compare with others inside a **3D visualization environment** powered by Three.js.\n\n---\n\n## 🧠 Project Goals\n\n- Deliver real-time visual feedback from survey answers\n- Use 3D environments for storytelling and engagement\n- Create gamified, spatial UI interactions with zoom- and touch-support\n\n---\n\n## 🛠️ Technologies Used\n\n- `React`\n- `Three.js`, `@react-three/fiber`, `@react-three/drei`\n- `CSS Modules`\n- `HTML-over-3D` anchoring logic\n- Touch \u0026 gesture handling for mobile\n\n---\n\n## 🎮 Key Features \u0026 Engineering Solutions\n\n### 📌 Anchoring DOM to 3D (beyond Drei.Html)\n\n- Enhanced `Drei.Html` with **dynamic offsets** to keep popups aligned to 3D anchor points\n- Prevented misalignment during zoom, pan, and orbit\n- Added `.is-top`, `.is-bottom`, etc., classes dynamically for **edge case styling**\n\n### 🧲 Draggable UI Elements\n\n- Toggleable popups anchored to draggable buttons\n- Preserved separation between **dragging intent** vs **interaction**\n- Ensured buttons stay visible (never off-viewport)\n\n### 🎥 Motion UX Considerations\n\n- Disabled canvas rotation while dragging UI to reduce **motion sickness**\n- Supported mobile **pinch**, **zoom**, and **rotate** gestures\n\n### 🎭 Rendering “I AM DONE” Button in 3D Context\n\n- Couldn’t pass logic cleanly via context into `Drei` — limitations in bridging `Survey.jsx` logic into R3F\n- Rendered **invisible version** inside Drei to maintain layout/transform\n- Overlayed a visible copy in `dotGraph.jsx` for perfect hitbox + transform control\n\n---\n\n## 🤯 Lessons Learned\n\n- R3F + React context don’t always play well — separate rendering layers help maintain logic control\n- DOM ↔️ Canvas UX requires careful attention to *both z-index* and *transform origin*\n- Blending 2D and 3D interaction requires more than positioning — you have to design for **intent**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fefeozalpp%2Fsurvey-data-visualization-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fefeozalpp%2Fsurvey-data-visualization-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fefeozalpp%2Fsurvey-data-visualization-app/lists"}