jp206100/datagouv-3d-viz

# datagouv-3d-viz 可视化 基于 Three.js 构建的法国交通事故数据（2005–2024）交互式 3D 可视化。探索法国各地的事故热点、严重程度、天气状况和时间段分布。 **数据来源**：https://www.data.gouv.fr — ONISR / BAAC（法国国家道路交通安全局） ## 功能特性 - 从 data.gouv.fr BAAC 数据集（2020–2024）获取的**真实事故数据** - 通过自定义 GLSL 着色器渲染的 **GPU 加速粒子**（过滤更改时无需重建几何体） - **时间导航** — 按年份（2020–2024）和时间段（12小时制 AM/PM 格式）筛选 - **天气筛选器** — 按晴朗、下雨、大雾或下雪隔离显示事故 - **严重程度颜色编码** — 致命（红色）、住院（橙色）、轻伤（绿色） - **法国高速公路地图**叠加层，带有城市标签 - 主要城市热点（巴黎、马赛、里昂等）的**动画脉冲波** - **动态氛围** — 场景光照随选定的时间段变化 - **交互式工具提示** — 将鼠标悬停在粒子上以查看事故详情 - **实时统计面板** — 总数随过滤器更改实时更新 ## 技术栈 - **Three.js** — WebGL 3D 渲染 - **Vite** — 开发服务器与构建工具 - **原生 JavaScript** (ES modules) — 无框架依赖 ## 快速开始 ### 前置条件 - Node.js (v14+) 和 npm ### 安装 ``` npm install ``` ### 获取数据 ``` npm run fetch-data # Download BAAC accident CSVs → public/data/accidents.json npm run fetch-geo # Fetch France geographic boundaries ``` ### 开发 ``` npm run dev ``` 在 `http://localhost:3000` 打开，支持热模块重载。首次运行时，应用会尝试从 `/data/accidents.json` 加载缓存数据；如果未找到，则会直接在浏览器中从 data.gouv.fr 下载 CSV 文件。 ### 生产构建 ``` npm run build ``` 输出到 `/dist`。 ### 预览 ``` npm run preview ``` ## 项目结构 ``` src/ ├── core/ # Scene setup, camera, renderer, orbit controls ├── data/ # Data fetching (data.gouv.fr API) and CSV processing ├── viz/ # Particle system, France outline, roads, pulse waves, atmosphere ├── ui/ # Year/hour scrubbers, stats panel, tooltips, weather filters ├── utils/ # Geographic coordinate conversion └── main.js # Entry point and application state scripts/ ├── fetch-accidents.js # Download BAAC data → public/data/accidents.json └── fetch-france-geo.js # Fetch France geographic boundaries ``` ## 工作原理 1. **数据加载** — 从 data.gouv.fr 获取真实的 BAAC 事故记录（2020–2024），要么从预先缓存的 JSON 文件中读取，要么直接在浏览器中下载并解析 CSV 文件 2. **GPU 渲染** — 所有粒子位于单个 `BufferGeometry` 中，具有每粒子属性（位置、严重程度、年份、小时、天气）；过滤完全通过着色器 uniform 在 GPU 上进行 3. **道路叠加层** — 法国高速公路网络渲染为管状几何体，并带有带标签的城市标记 4. **氛围** — 场景背景、雾和光照颜色根据选定的小时进行插值，以模拟白天/黄昏/夜晚循环 ## 控制操作 | 操作 | 输入 | |--------|-------| | 旋转 | 点击 + 拖拽 | | 缩放 | 滚轮 | | 重置视图 | 重置按钮（右上角） | | 自动旋转 | 切换按钮（右上角） | | 按年份筛选 | 底部滑块（2020–2024） | | 按小时筛选 | 底部滑块（ALL / 12AM–11PM） | | 按天气筛选 | 左侧面板按钮（晴朗、下雨、大雾、下雪） | | 切换脉冲波 | 按钮（右上角） | ## 浏览器支持 需要支持 WebGL 的现代浏览器（Chrome、Firefox、Safari、Edge）。支持移动端触摸控制。 ## 许可证 MIT

标签：3D可视化, BAAC, CMS安全, Data.gouv.fr, ECharts替代方案, GLSL着色器, JavaScript, MITM代理, ONISR, Three.js, Vite, WebGL, 交互式地图, 交通事故分析, 公共安全, 城市热点, 大数据可视化, 开源数据, 数据可视化, 时空数据分析, 智慧交通, 法国, 粒子系统, 自定义脚本