以下为针对“城市×星期热力图（辅以色标与阈值过滤）”的专业化改进评审与实现方案。内容聚焦于纠正现有问题、给出可落实的设计规范与数据处理逻辑，确保可视化在4K大屏上清晰、可信、可操作。
一. 问题诊断与影响
- 红绿渐变且含义不一致，色盲不友好：红绿在不同图中语义反转常引发误读；约8%男性红绿色盲，区分度低，风险高。
- 色标无数值范围与刻度：无法比较不同区域/时间的强弱，用户难以判断相对位置与异常。
- 网格行高不一致：造成视觉噪音，破坏视线扫读节奏，增加阅读负担。
- 城市标签倾斜45°且间距过近：长列表下倾斜标签降低可读性，2米阅读距离下难以快速定位行。
- 城市按拼音排序而非业务重要度：影响任务导向分析，难以快速聚焦问题城市。
- 百分比格式不统一（0.2与20%混用）：单位不一致导致误判。
- 未设访问量阈值导致小样本误判：低基数下转化率波动大，易产生“伪高/伪低”。
- 缺少周末或活动日标注：无法解释规律性峰谷，影响策略制定。
- 色标位置与图体偏移，版式不齐：损害专业感与易读性。
二. 纠正与优化方案（设计规范）
- 数据口径与聚合
- 时间窗：滚动30天（含T-29至T日）。
- 指标定义：
- 访问数（denominator）：新访客访问次数（或会话数），来自网站访问日志；剔除异常流量。
- 下单数（numerator）：新访客的首单数（订单事实表）。
- 转化率 = 下单数 / 新访客访问数。输出统一为百分比格式，保留一位小数（例如 3.4%）。
- 维度：城市（前48）、星期（Mon–Sun）、渠道（App/H5）。
- 过滤：
- 访问量阈值：city×weekday×channel 在30天窗口内访问数≥500才计算与着色；否则显示为“Filtered (<500)”并斜纹灰化。
- 异常流量剔除：排除已标记bot/爬虫、同IP超高频访问、黑名单UA、异常referer；必要时按会话级阈值（如>60pv/min）剔除。
- 缺失：无数据（N/A）与被过滤（Filtered）区分显示与提示。
- 色彩与色标（品牌与无障碍）
- 背景：#1E1E1E（深灰）。
- 主梯度：单色连续梯度（亮青系），感知均匀、色盲安全倾向。
- 建议5点连续梯度（低→高）：#0B2F2D → #0E5A55 → #0F8D83 → #00C2A8 → #75EDE1
- 在深色背景上，高值更亮更饱和，形成直接“亮=好”的单调映射，避免红绿歧义。
- 色盲安全方案（备选）：采用“Viridis”或“Cividis”作为无品牌模式；提供视觉选项切换。
- 色标形态：连续色条，竖直放置于图右侧，与图体顶/底对齐。
- 色标标注：
- 标题：Conversion Rate（30D, new visitors only）
- 数值范围：0% 到 cap值（建议取95分位或上限=10%/20%，根据历史分布确定），标注上下限说明：
- 例如：Range 0%–12% (capped at P95=12%)
- 刻度：5–7个刻度（0%、3%、6%、9%、12%），显示百分号且统一格式。
- 网格与版式
- 网格：48×7，单格≥30px；建议单格36px（行高=36px），保证2米距离可见。
- 排版区域（在3840×2160内）：
- 标题与说明区：高约200–240px（含时间窗与口径说明）。
- 主图区域：高约48×36=1728px，含行标签；宽约7×120=840px，足以容纳。
- 色标与筛选区：右侧或上侧对齐主图网格；采用8px基线栅格，保证对齐。
- 网格线与分隔：
- 单像素、#2A2A2A 辅助线，低对比，保持整齐不抢眼。
- 单元边界圆角0，避免卡通感。
- 标签与可读性
- 城市名：左侧固定列，文本横排（不倾斜），颜色#E5E7EB，字号22–24px，字重500。
- 星期列头：Mon–Sun，字号18–20px，字重500，对齐居中。
- 间距：行距与列距一致（建议8px垂直间距，0–4px水平间距），保证紧凑而不拥挤。
- 读数：格内不显示具体数值，仅颜色编码，避免噪音；极值/异常可加小角标或描边。
- 排序逻辑（业务导向）
- 默认排序：按最近30天“城市整体转化率（聚合7天、渠道可选）”降序。
- 次级排序：转化率相同按访问数降序；支持“按访问量排序”、“固定重点城市优先（白名单）”、“按近期波动度”可选。
- 显式标注排序依据与时间窗：Sort by 30D CR (new visitors), Desc。
- 阈值与缺失处理
- 阈值过滤（访问数<500）：
- 单元格不着主色，采用斜纹灰化填充（45°细斜线），底色#2B2B2B，边框虚线#3A3A3A。
- Tooltip显示：Filtered: visits=xxx (<500), not used in ranking or coloring。
- 缺失（N/A）：
- 以“N/A”灰度文本（#9CA3AF）置中+斜纹填充，Tooltip说明原因（无数据或无覆盖）。
- 这两类不参与城市排序与色标映射。
- 周末与活动日标注
- 周末（Sat、Sun）：
- 列背景加浅色叠层（透明白/青，5–8%不透明度），在不干扰颜色编码的前提下建立视觉分区。
- 活动日：
- 顶部增加事件带（event band）或列顶角标，颜色#00C2A8描边+白字日期/活动名；Hover显示活动详情。
- 图例区增加说明：Weekend shaded; Events marked with ◉。
- 交互与筛选
- 渠道筛选：App/H5/All（默认All）。
- 城市群筛选：一线、新一线、省会、东部/中部/西部等标签；支持多选。
- 悬浮工具提示（tooltip）：
- City, Weekday, Channel
- Visits (30D, new visitors), Orders (first orders), Conversion Rate
- Status: Normal / Filtered (<500) / N/A
- 若为周末/活动日，追加标识信息。
- 固定行：允许将若干重点城市“置顶固定”，便于对比。
- 标题与口径说明（中英切换）
- 标题示例（中文）：城市×星期转化率热力图（滚动30天，新访客首单；阈值：访问量≥500）
- 英文标题：City × Weekday Conversion Heatmap (30D Rolling, New Visitors’ First Orders; Threshold: Visits ≥ 500)
- 子标题/说明：
- 时间范围：YYYY-MM-DD – YYYY-MM-DD，更新时刻
- 色标范围与上限说明（含分位数截断情况）
- 排序规则：按30天整体转化率降序
- UI语言切换按钮：中/EN；数值格式同步切换（中文%与英文%一致显示，不混用小数与百分号）。
- 无障碍与对比度
- 对比度：色块与背景的相对亮度差≥3:1；标签文字与背景≥4.5:1。
- 提供“高对比模式”与“色盲友好色板”切换。
- 交互控件尺寸≥32px，点击区域≥44px。
三. 验收对照清单（与需求逐项对应）
- 色标带数值范围与上下限说明：有，标注0%–上限及P95截断说明，5–7刻度。
- 标签可读、间距合理：行高一致（≥30px），城市横排，字号≥22px，8px基线栅格。
- 排序遵循业务重要度：默认按30D整体转化率降序，支持固定重点城市。
- 阈值过滤避免小样本误判：访问量<500斜纹灰化，不参与排序与着色。
- 标题包含时间与口径说明：时间窗、口径、阈值、排序、色标范围明确。
- 支持中英文切换：标题、图例、tooltip、控件文案双语。
- 红绿渐变问题修复：改为品牌单色连续梯度并提供色盲安全方案。
- 网格统一：行高一致；城市标签不倾斜；版式对齐；色标与图体上下齐平。
- 周末/活动标注：列叠层与事件标记就位，tooltip补充说明。
- 百分比格式统一：全部以百分号显示，保留一位小数。
四. 实施参考
- 数据准备（SQL示例，按需调整表名/字段）
-- 假定表
-- visits_log(user_id, visit_ts, city, channel, is_bot, is_abnormal, is_new_visitor)
-- orders_fact(user_id, order_ts, city, channel, is_first_order)
-- calendar_dim(date, is_weekend, event_name)
WITH params AS (
SELECT DATE '${as_of_date}' AS as_of_date, DATEADD(day, -29, DATE '${as_of_date}') AS start_date
),
visits AS (
SELECT
v.city,
v.channel,
TO_CHAR(v.visit_ts, 'DY', 'NLS_DATE_LANGUAGE=ENGLISH') AS weekday_en, -- Mon..Sun
DATE_TRUNC('day', v.visit_ts) AS visit_date,
COUNT() AS visits
FROM visits_log v
JOIN params p ON v.visit_ts >= p.start_date AND v.visit_ts < p.as_of_date + INTERVAL '1 day'
WHERE COALESCE(v.is_bot, false) = false
AND COALESCE(v.is_abnormal, false) = false
AND COALESCE(v.is_new_visitor, true) = true
AND v.city IN (SELECT city FROM top_48_cities)
GROUP BY 1,2,3,4
),
first_orders AS (
SELECT
o.city,
o.channel,
TO_CHAR(o.order_ts, 'DY', 'NLS_DATE_LANGUAGE=ENGLISH') AS weekday_en,
DATE_TRUNC('day', o.order_ts) AS order_date,
COUNT() AS orders
FROM orders_fact o
JOIN params p ON o.order_ts >= p.start_date AND o.order_ts < p.as_of_date + INTERVAL '1 day'
WHERE COALESCE(o.is_first_order, true) = true
AND o.city IN (SELECT city FROM top_48_cities)
GROUP BY 1,2,3,4
),
agg_30d AS (
SELECT
v.city,
v.channel,
v.weekday_en,
SUM(v.visits) AS visits_30d,
COALESCE(SUM(o.orders), 0) AS orders_30d
FROM (
SELECT city, channel, weekday_en, SUM(visits) AS visits
FROM visits
GROUP BY 1,2,3
) v
LEFT JOIN (
SELECT city, channel, weekday_en, SUM(orders) AS orders
FROM first_orders
GROUP BY 1,2,3
) o
ON v.city=o.city AND v.channel=o.channel AND v.weekday_en=o.weekday_en
GROUP BY 1,2,3
),
final AS (
SELECT
city,
channel,
CASE weekday_en
WHEN 'MON' THEN 'Mon' WHEN 'TUE' THEN 'Tue' WHEN 'WED' THEN 'Wed'
WHEN 'THU' THEN 'Thu' WHEN 'FRI' THEN 'Fri' WHEN 'SAT' THEN 'Sat'
WHEN 'SUN' THEN 'Sun' END AS weekday,
visits_30d,
orders_30d,
CASE WHEN visits_30d >= 500 THEN orders_30d::decimal / NULLIF(visits_30d,0) ELSE NULL END AS cr,
CASE WHEN visits_30d < 500 THEN 'Filtered' ELSE 'Normal' END AS status
FROM agg_30d
)
SELECT * FROM final;
- 说明：
- 仅统计新访客访问与其首单。
- 访问量阈值=500在city×weekday×channel层级执行。
- 若存在更精细的异常流量标签，务必在WHERE中追加。
- 前端映射与控件
- 颜色映射：连续尺度 d3.scaleSequential().domain([0, cr_cap]).interpolator(brandTealInterpolator)
- 上限cr_cap：建议用历史P95，定期计算；UI中展示cap说明。
- 斜纹填充：使用SVG pattern或Canvas hatch；Filtered与N/A采用不同灰度。
- 组件尺寸：
- 单元格36×36px；行标签列宽≥220px（长城市名截断省略号+hover全名）。
- 字体：城市22–24px、列头18–20px、图例/注释16–18px。
- 交互：
- 筛选：渠道（单选/多选），城市群（多选）。
- 固定城市：pin交互，置顶后行序保持稳定。
- 导出：CSV导出包含口径与筛选条件元数据。
- 标注与叙事实现
- 周末列叠层：绘制在热力图底层，透明度0.05–0.08。
- 活动标识：列头添加◉并在tooltip中展示calendar_dim.event_name。
- 叙事区：顶部展示“Top下降城市”（近7天vs前7天CR变化）的小型条形或标注列表，引导关注。
- 质量控制与监控
- 一致性检查：百分比统一格式；所有tooltip与图例数值一致；单位不混用。
- 数据覆盖率：显示“可着色单元格占比”，追踪<500阈值影响面。
- 异常检测：对CR>cap的单元格进行上色钳制但在tooltip中提示“超出上限（已钳制）”。
通过以上修正，热力图在4K大屏上将具备：颜色语义一致、色盲友好、数值可比、布局整齐、标签清晰、排序贴合业务、阈值过滤避免误判、周末/活动明确标注、元信息完备且中英文可切换，满足区域运营与客服团队快速定位问题城市与高峰日的目标。
