📌 您的可视化方案旨在解答什么问题？
本次交互式可视化作业专注于电影产业的商业与口碑分析 (Movies Explorer)。我们经常会问：高预算的电影一定能换来高票房吗？商业片（如动作、科幻）和文艺片（如剧情）在影评人和大众市场之间的表现有何不同？此工具旨在帮助用户回答以下引人入胜的探索性问题：
- 口碑与票房的权衡： 电影的烂番茄评分（口碑）与其全球总票房（商业）之间存在什么整体关系？
- 预算的影响： 制作预算（通过散点大小映射）是否显著提高了电影的票房上限？
- 类型的差异： 不同类型的电影（喜剧、恐怖、动作等）分布在象限的哪些位置？哪些类型更容易实现“叫好又叫座”？
🎨 设计决策的依据是什么？
视觉编码 (Visual Encodings)
- X轴 (烂番茄评分)： 线性刻度 (0-100)，最直观地体现电影在专业影评人眼中的质量。
- Y轴 (全球总票房对数)： 由于票房数据呈长尾分布（少数几部电影票房极高），采用 log 对数坐标轴能有效拉开数据的聚集，让高低票房的电影对比更清晰。
- 大小 (Size)： 圆点大小映射“制作预算”(Production Budget)，直观反映“投资规模”。
- 颜色 (Color)： 映射电影类型 (Major Genre)，使用预设分类色板以示区分。
交互设计原理
考虑到作业要求“聚焦明确且精良的图表”，我采用了 Overview first, zoom and filter, then details-on-demand（先总览，后过滤，再按需查看细节）的经典交互可视化法则：
- 刷选联动 (Brushing & Linking) - 核心交互： 在散点图中提供矩形刷选 (interval selection) 功能。当用户框选一组位于特定“票房和口碑”的电影时，右侧的柱状图会立即过滤，仅显示选中范围内的电影类型分布，下方也会同步筛选出 Top 10 列表。
- 交叉过滤 (Cross-Filtering)： 点击柱状图中的特定类型（如“Horror(恐怖片)”），会反向让散点图非该类型的点变透明，实现下钻分析。这比起传统的下拉菜单更加自然，体现了“视图即界面”的原则。
- 缩放与平移 (Pan & Zoom)： 对于重叠密集的高票房/高分区域，允许用户通过鼠标滚轮进行无级缩放查看。我们还通过按住 Shift 键的隔离，完美兼容了图表拖拽平移与框选过滤（Brush）。
- 悬停提示 (Tooltips - Details on Demand)： 辅助查看精确名称和数值。
🌐 外部资源引用
- 可视化库： 采用了 Vega-Lite 架构构建声明式交互逻辑；底层由 D3.js 及其配套渲染器支撑。
- 使用的外部组件： vega@5, vega-lite@5, vega-embed@6 (通过 jsDelivr CDN 引入)。
- 数据源： 采用了开源开放的 Vega Datasets - movies.json。这是一份经典的多维数据集，我通过 transform 去除了空值并过滤掉无票房冗余项以保证展示质量。
⏳ 开发流程概述
- 选题与数据分析 (约 4 小时)： 放弃了最初考虑的一些包罗万象但杂乱的数据集，最终定位到经典的电影属性多维数据，确立“商业 vs 口碑”的故事线。
- 静态视觉映射实现 (约 3 小时)： 使用 Vega-Lite 将散点图和数据连接通道打通，处理对数轴(Log Scale)等细节，处理数据过滤。
- 交互与多视图协同编写 (约 7 小时) [耗时最多]：
- 调试多视图合并 vconcat 和 hconcat 的布局排列问题（花费较多时间）。
- 梳理双向绑定的逻辑：需确保散点图的 brush interval 参数能作用于柱状图的 count，同时柱状图的 point selection 参数又能控制散点图的颜色透明度条件。
- 实现 Top 10 联动窗口，使用 window function 即时计算排名。
- 前端界面 UI 美化与部署 (约 2 小时)： 设计了一套干净现代的说明 UI 面板，调试最终的排版效果。
总估算耗时： 约 16 工作时 (工时)。