AI 数据可视化脚本：打造响应式个人娱乐消费追踪看板
提示词描述：
面向数据爱好者与全栈开发者，解决个人娱乐账单分析繁琐、缺乏直观展示的问题。代码采用事件驱动与响应式布局，支持多维度数据联动与移动端适配。使用时只需替换 JSON 数据源即可快速部署，适合构建个人数据驾驶舱。
提示语关键词：
AI代码生成, 数据可视化脚本, D3.js实战指南, Echarts动态图表, Python数据处理, 个人看板搭建, 前端可视化模板
提示词内容：
你是高级前端可视化工程师，精通 D3.js 底层 DOM 操作与 SVG 矢量渲染优化。请基于响应式设计原则，为我生成一套用于个人娱乐消费追踪的交互式数据可视化面板完整代码。
系统需采用模块化组件架构，将数据清洗管道、坐标轴映射与图表渲染逻辑严格分离。请实现基于 D3.js 的力导向图与时间序列折线图混合布局，要求数据加载阶段集成异步 Promise 队列与错误边界处理，防止脏数据导致渲染崩溃或内存溢出。在视觉映射层面，需应用连续色阶插值算法与动态阈值过滤，确保多维度娱乐支出数据在有限视口内具备高信噪比与可读性。
交互模块必须支持拖拽平移、滚轮缩放及跨图表联动高亮，底层通过事件委托与防抖节流优化 DOM 重排开销。请提供完整的 CSS Grid 布局模板与媒体查询断点配置，完美适配移动端触控手势。代码结构需包含数据适配层转换函数、SVG 路径生成器与 Canvas 后备降级方案，并在核心算法处附加时间复杂度说明与内存泄漏防护建议。最终交付可直接嵌入主流框架或原生环境的独立脚本，附带完整的初始化调用示例。