平时看惯了枯燥的后台管理系统和常规的业务图表，前端数据可视化还能怎么玩出花样？
今天给大家分享一个极具视觉冲击力的开源可视化项目——DeepTime Mammalia (哺乳纲演化树)。这是一个完全基于浏览器端的交互式作品，用纯前端技术重构了哺乳动物跨越 2 亿年的生命演化史诗！
从微观的 3D DNA 双螺旋画廊，到宏观精细的 D3 动态演化树，全程丝滑过渡。项目已经开源，零构建依赖，开箱即用，非常适合想学习前端 3D 交互和复杂可视化的同学把玩！
✨ 核心亮点，先睹为快
1. 🌌 3D 沉浸式序幕
一打开页面，迎接你的是一个基于 Three.js (CSS3DRenderer) 构建的 DNA 双螺旋卡片画廊，背景则是 WebGL 驱动的流体星空粒子。配合 Tween.js 的平滑运镜，实现了从微观卡片到宏观演化树的“影院级”无缝视角切换。
2. 🌿 高性能交互式演化树
进入主视角后，是一棵基于 D3.js (v7) 渲染的庞大树状图谱（囊括167个科、上千个节点）。支持鼠标滚轮、双指捏合缩放、丝滑拖拽漫游。页面底部自带动态地质时间轴（MYA），并支持中文/拉丁学名智能检索与高亮定位。
3. 🥚 隐藏彩蛋：“溯源”模式
致敬生命韧性的专属模式。寻找并点击界面中的“溯源”按钮，即可点亮一条穿越大灭绝的“幽灵线框”路径，直观展示我们作为“最后的合弓纲”孑遗，一路走到现代哺乳动物的演化之路。
🛠️ 极简技术栈，极致的纯粹
为了让大家更方便地学习和研究，这个项目没有使用任何复杂的构建工具（没有 Webpack/Vite，也不需要 npm install）！
- 核心逻辑：Vanilla JavaScript (ES6+), HTML5, CSS3
- 数据驱动：D3.js (v7) —— 轻松应对上千个节点的大型树状结构计算与渲染。
- 3D / 渲染：Three.js (r128) —— 负责 WebGL 粒子背景与 CSS3D 变换。
所有的图片和拓扑数据都已通过 Base64 和 JSON 格式内嵌在 JS 文件中。你只需要 Clone 代码，双击 index.html 就能直接在浏览器中流畅运行！
🚀 传送门
如果你对前端 3D 可视化、D3.js 数据驱动或是演化生物学感兴趣，千万不要错过这个宝藏项目：
- 🔗 GitHub 源码: github.com/SeanWong17/…
- 🎮 在线体验 (Live Demo): 点击这里沉浸式体验
开源不易，如果这个项目给你带来了灵感或视觉上的享受，欢迎到 GitHub 给个 ⭐️ Star 支持一下！大家有任何代码优化建议或关于可视化的奇思妙想，也欢迎在评论区一起交流探讨！
