2e:null 2f:["$","title",null,{"children":"Daily Passenger Counts of Control Points, Hong Kong | zhouyiweidatavisualization | Observable"}] 34:T50c,PopTypeData = { const arr = []; pureData.forEach(row => { const Date = row.Date || ""; const ControlPoint = row.ControlPoint || "Unknown"; const Direction = row.Arrival_or_Departure || ""; const HKResidents = +row.HongKongResidents || 0; const MainlandVisitors = +row.MainlandVisitors || 0; const OtherVisitors = +row.OtherVisitors || 0; // 1. 处理香港居民 (判断是否为 Beishang) arr.push({ Date, ControlPoint, PopulationType: "Hong Kong Residents", Direction, Total: HKResidents, // 逻辑：如果是香港居民且正在离境(Departure)，标记为 Beishang Tag: (Direction === "Departure") ? "Beishang" : null }); // 2. 处理内地访客 (判断是否为 Nanxia) arr.push({ Date, ControlPoint, PopulationType: "Mainland Visitors", Direction, Total: MainlandVisitors, // 逻辑：如果是内地访客且正在入境(Arrival)，标记为 Nanxia Tag: (Direction === "Arrival") ? "Nanxia" : null }); // 3. 处理其他访客 (目前没有特定标签) arr.push({ Date, ControlPoint, PopulationType: "Other Visitors", Direction, Total: OtherVisitors, Tag: null }); }); return arr; }35:Tb0d,InteractiveArray = { let pArray = extractedCPData; const startyearRange = new Date((DateCount[year[0]]).toString());// timezone from utc to local const endyearRange = new Date((DateCount[year[1]]).toString());// timezone from utc to local const LineColorPalette = [ // 1. 航空与特殊枢纽 (保留核心深青色，但略微提亮) "#155E75", // 机场 (原 0E7490 的优化版，保持权威感但不沉闷) // 2. 铁路口岸 (中青色 - 提高明度，确保重叠时有荧光感) "#0891B2", // 西九龙高铁 "#06B6D4", // 红磡 "#67E8F9", // 罗湖 (调高明度，原 22D3EE 的亮化版) // 3. 陆路口岸 (石板灰系 - 整体大幅提亮，避免暗色堆叠) // 这一组现在主要集中在 Slate 400-700 之间，确保线条清晰可见 "#475569", // 落马洲(福田) - (原 334155 提亮) "#64748B", // 香园围(莲塘) "#94A3B8", // 港珠澳大桥 "#A8A29E", // 落马洲(皇岗) - (切换为暖灰，增加辨识度) "#CBD5E1", // 文锦渡 "#334155", // 沙头角 - (原 1e293b 提亮) "#3B4252", // 深圳湾口岸 - (原 0f172a 提亮，改为 Nord 风格的灰蓝) // 4. 港口与客运码头 (水色系 - 保持清爽) "#0D9488", // 中国客运码头 "#14B8A6", // 港口管制 "#2DD4BF", // 启德邮轮码头 "#99F6E4", // 港澳客运码头 "#CCFBF1" // 屯门客运码头 (极浅水色) ]; const tagLinear = [ "non-linear", // 机场 "linear", // 西九龙高铁 "linear", // 红磡 "linear", // 罗湖 "linear", // 落马洲(福田) "linear", // 香园围(莲塘) "non-linear", // 港珠澳大桥 "linear", // 落马洲(皇岗) "linear", // 文锦渡 "linear", // 沙头角 "linear", // 深圳湾口岸 "non-linear", // 中国客运码头 "non-linear", // 港口管制 "non-linear", // 启德邮轮码头 "non-linear", // 港澳客运码头 "non-linear" // 屯门客运码头 ]; pArray = pArray.filter(item => { return item.Date >= startyearRange && item.Date <= endyearRange; }); const uniqueControlPoints = [...new Set(pArray.map(d => d.ControlPoint))]; // 步骤2：创建D3序数比例尺，确保同一ControlPoint对应同一颜色 const colorScale = d3.scaleOrdinal() .domain(uniqueControlPoints) // 定义域：去重后的ControlPoint .range(LineColorPalette); // 值域：自定义色板、 const tagScale = d3.scaleOrdinal() .domain(uniqueControlPoints) .range(tagLinear); // 步骤3：遍历数组，为每个元素新增color属性，值为对应ControlPoint的颜色 pArray = pArray.map(item => ({ ...item, // 保留原有属性 color: colorScale(item.ControlPoint), tag: tagScale(item.ControlPoint) // 新增color属性，赋值为匹配的颜色 })); // 返回添加color属性后的数组 return pArray; } 36:T23ed,function chartline() { // --- 1. 基础画布设置 --- const width = 1152; const height = 720; const marginTop = 60; const marginRight = 20; const marginBottom = 40; const marginLeft = 100; const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) // 这里的根字体设为 Inter .attr("style", "max-width: 100%; height: auto; overflow: visible; font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased;"); // --- 2. 定义比例尺 --- const x = d3.scaleUtc() .domain(d3.extent(INArray, d => d.Date)) .range([marginLeft, width - marginRight]); const y = d3.scaleLinear() .domain([0, d3.max(INArray, d => d.Total)]).nice() .range([height - marginBottom, marginTop]); // --- 3. 定义裁剪遮罩 --- const clipId = "clip-" + Math.random().toString(36).substr(2, 9); svg.append("defs").append("clipPath") .attr("id", clipId) .append("rect") .attr("width", 0) .attr("height", height) .transition() .duration(2000) .ease(d3.easeLinear) .attr("width", width); // --- 4. 绘制坐标轴 (Slate 风格 + Inter 字体) --- svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0)) .attr("color", "#94a3b8") .call(g => g.selectAll(".tick text") .attr("fill", "#64748b") .style("font-family", "'Inter', sans-serif") // 确保刻度为 Inter .style("font-size", "12px") .style("font-weight", "500") .style("letter-spacing", "0.02em")); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y).ticks(10, "~s")) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").attr("stroke-opacity", 0.1).attr("x2", width - marginLeft - marginRight)) .call(g => g.selectAll(".tick text") .style("font-family", "'Inter', sans-serif") // 确保刻度为 Inter .style("font-size", "12px") .style("font-weight", "500") .style("letter-spacing", "0.02em")) .call(g => g.append("text") .attr("x", -marginLeft+20) .attr("y", 30) .attr("fill", "#0E7490") .attr("text-anchor", "start") .style("font-family", "'Inter', sans-serif") .style("font-weight", "800") // 标题加粗 .style("font-size", "14px") .style("letter-spacing", "0.1em") .text("↑ PASSENGER COUNT")); // --- 5. 数据转换与绘图 --- const points = INArray.map((d) => [x(d.Date), y(d.Total), d.ControlPoint, d.Date, d.Total, d.color]); const groups = d3.rollup(points, v => v, d => d[2]); const areaGen = d3.area().x(d => d[0]).y0(y(0)).y1(d => d[1]); const lineGen = d3.line().x(d => d[0]).y(d => d[1]); const mainGroup = svg.append("g").attr("clip-path", `url(#${clipId})`); const group = mainGroup.selectAll("g").data(groups.values()).join("g"); const areas = group.append("path") .attr("fill", d => d[0][5]) .attr("fill-opacity", 0.03) .attr("d", areaGen); const path = group.append("path") .attr("fill", "none") .attr("stroke", d => d[0][5]) .attr("stroke-width", 1) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("fill-opacity", 0.03) .style("mix-blend-mode", "multiply") .attr("d", lineGen); // --- 8. 交互浮窗组件 (Slate 900 深色主题) --- const dot = svg.append("g").attr("display", "none").attr("pointer-events", "none"); const tipBox = dot.append("rect") .attr("rx", 10).attr("ry", 10) .attr("fill", "rgba(0, 0, 0, 1)") .attr("filter", "drop-shadow(0px 10px 15px rgba(0,0,0,0.2))"); const tipText = dot.append("text") .attr("text-anchor", "middle") .style("font-family", "'Inter', sans-serif") // 明确指定 .style("font-size", "13px") .style("letter-spacing", "0.01em"); const tipTitle = tipText.append("tspan") .attr("x", 0) .attr("dy", "-3.5em") .attr("font-weight", "700") // Inter Bold .style("letter-spacing", "0.05em") .attr("fill", "#22d3ee"); const tipDate = tipText.append("tspan") .attr("x", 0) .attr("dy", "1.6em") .attr("fill", "#94a3b8") .style("font-size", "11px") .style("font-weight", "400"); // Inter Regular const tipValue = tipText.append("tspan") .attr("x", 0) .attr("dy", "1.6em") .attr("fill", "#f1f5f9") .style("font-weight", "600"); // Inter Semi-Bold // --- 9. 交互事件函数 --- svg.on("pointerenter", pointerentered) .on("pointermove", pointermoved) .on("pointerleave", pointerleft) .on("touchstart", event => event.preventDefault()); return svg.node(); function pointermoved(event) { const [xm, ym] = d3.pointer(event); const i = d3.leastIndex(points, ([px, py]) => Math.hypot(px - xm, py - ym)); const [px, py, k, l, m, color] = points[i]; dot.attr("display", null).attr("transform", `translate(${px},${py})`); tipTitle.text(k.toUpperCase()); const formatDate = d3.utcFormat("%Y-%m-%d"); tipDate.text(formatDate(new Date(l))); tipValue.text(`${m.toLocaleString()} PASSENGERS`); const bbox = tipText.node().getBBox(); const pad = 12; tipBox.attr("width", bbox.width + pad*2).attr("height", bbox.height + pad*2) .attr("x", -(bbox.width/2 + pad)) .attr("y", -(bbox.height + pad*2 + 5)); path.style("stroke", d => d[0][2] === k ? color : "#e2e8f0") .style("stroke-opacity", d => d[0][2] === k ? 0.5 : 0.15) .attr("stroke-width", d => d[0][2] === k ? 2 : 1.5) .filter(d => d[0][2] === k).raise(); areas.style("fill-opacity", d => d[0][2] === k ? 0.2 : 0.02); svg.on("click", (event) => { const panel = d3.select("#floating-panel"); const panelWidth = 360; const panelHeight = 480; let leftPos = px + 25; let topPos = py - 120; if (leftPos + panelWidth > width) leftPos = px - panelWidth - 25; if (topPos + panelHeight > height) topPos = height - panelHeight - 20; topPos = Math.max(20, topPos); panel.style("display", "block") .style("left", `${leftPos}px`) .style("top", `${topPos}px`) .style("border", `1px solid ${color}44`) .style("border-left", `4px solid ${color}`); d3.select("#modal-title") .text(k) .style("font-family", "'Inter', sans-serif") // 统一 .style("font-weight", "800") // 标题最粗 .style("letter-spacing", "0.02em") .style("color", "#0f172a"); piechart(k, l); }); } function pointerentered() { path.style("stroke", "#cbd5e1").style("stroke-opacity", 0.2); areas.style("fill-opacity", 0.02); } function pointerleft() { path.style("stroke", null).style("stroke-opacity", 1) .transition().duration(200).attr("stroke-width", 1.5); areas.style("fill-opacity", 0.1); dot.attr("display", "none"); } function piechart(ControlPoint, Time){ const container = d3.select("#pie-chart").html(""); const PieArray = PopTypeData.filter(item => item.ControlPoint === ControlPoint && item.Date.getTime() === Time.getTime() ); const pieWidth = 300, pieHeight = 300; const PieColorPalette = ["#0E7490", "#0891B2", "#22D3EE", "#0F172A", "#334155", "#94A3B8"]; const color = d3.scaleOrdinal().range(PieColorPalette); const svgPie = container.append("svg") .attr("viewBox", [-pieWidth/2, -pieHeight/2, pieWidth, pieHeight]) .style("width", "100%").style("height", "auto"); const arc = d3.arc().innerRadius(70).outerRadius(pieWidth / 2 - 10).cornerRadius(4); const pie = d3.pie().sort(null).value(d => d.Total); svgPie.selectAll("path") .data(pie(PieArray)) .join("path") .attr("fill", (d, i) => color(i)) .attr("d", arc) .attr("stroke", "#fff") .style("stroke-width", "2px") .append("title").text(d => `${d.data.PopulationType}: ${d.data.Total}`); d3.select("#detail-text") .style("font-family", "'Inter', sans-serif") .style("color", "#475569") .html(`

Total: ${PieArray.reduce((sum, d) => sum + d.Total, 0).toLocaleString()}

${PieArray.map((d, i) => `

${d.PopulationType} ${d.Total.toLocaleString()}

`).join('')}

`); } }37:T1282,function searchCheckbox(data, options) { options = { value: [], optionsCheckboxes: undefined, format: (d) => d, optionsSearch: { format: () => "", filter: fullSearchFilter }, height: 300, debug: false, ...options, }; function cloneIgnoring(obj, attrToIgnore) { const { [attrToIgnore]: _, ...rest } = obj; return rest; } let debug = options.debug; data = Array.from(data); let checkboxes = Inputs.checkbox( data, options.optionsCheckboxes || cloneIgnoring(options, "label") ); const search = Inputs.search(data, options.optionsSearch || options); // --- 1. 这里删除了原有的 btnAll/btnNone 定义，合并到下方的视觉定义中 --- let selected = new Map(Array.from(options.value).map((d) => [d, true])); function countSelected() { return Array.from(selected.entries()).filter(([k, v]) => v).length; } function changeSome(sel, changeTo) { for (let o of sel) selected.set(o, changeTo); } function selectedFromArray(sel) { changeSome(data, false); changeSome(sel, true); } function selectedToArray() { return Array.from(selected.entries()) .filter(([k, v]) => v) .map(([k, v]) => k); } // --- 2. 统一的 HTML 与视觉样式定义 --- const btnStyle = ` padding: 6px 12px; border: 1px solid #e2e8f0; border-radius: 6px; background: #ffffff; color: #475569; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.2s; box-shadow: 0 1px 2px rgba(0,0,0,0.05); `; // 重新定义带样式的按钮（仅保留这一处定义） const btnAll = htl.html``; const btnNone = htl.html``; let output = htl.html`Selected: ${countSelected()} / ${data.length}`; const component = htl.html`

${options.label ? htl.html`${options.label}` : ""}

${output}

${search}

${btnAll} ${btnNone}

${checkboxes}

Daily Passengers Statistics

${options.label ? htl.html`${options.label}` : ""}

${output}

${search}

${btnAll} ${btnNone}

${checkboxes}

`; // --- 3. 后续逻辑保持不变 --- Object.defineProperty(component, "value", { get() { return selectedToArray(); }, set(v) { selectedFromArray(v); } }); function updateValueFromSelected() { checkboxes.value = selectedToArray(); output.innerHTML = `Selected: ${countSelected()} / ${data.length}`; component.dispatchEvent(new Event("input", { bubbles: true })); component.style.zIndex = 1; } btnAll.addEventListener("click", () => { changeSome(search.value, true); updateValueFromSelected(); }); btnNone.addEventListener("click", () => { changeSome(search.value, false); updateValueFromSelected(); }); component.value = selectedToArray(); search.addEventListener("input", (evt) => { for (let check of checkboxes.querySelectorAll("input")) { if (search.value.includes(data[+check.value])) { check.parentElement.style.display = "inline-flex"; } else { check.parentElement.style.display = "none"; } } }); checkboxes.addEventListener("input", (evt) => { evt.stopPropagation(); selectedFromArray(checkboxes.value); updateValueFromSelected(); }); return component; }3a:T8a9,NIteractiveArray = { // 0. 准备基础数据与范围 const currentRange = (typeof year !== 'undefined') ? year : [0, DateCount.length - 1]; const startyearRange = new Date(DateCount[currentRange[0]]); const endyearRange = new Date(DateCount[currentRange[1]]); const LineColorPalette = [ "#155E75", "#0891B2", "#06B6D4", "#67E8F9", "#475569", "#64748B", "#94A3B8", "#A8A29E", "#CBD5E1", "#334155", "#3B4252", "#0D9488", "#14B8A6", "#2DD4BF", "#99F6E4", "#CCFBF1" ]; const targetPoints = [ "Express Rail Link West Kowloon", "Heung Yuen Wai", "Hung Hom", "Lo Wu", "Lok Ma Chau", "Lok Ma Chau Spur Line", "Man Kam To", "Sha Tau Kok", "Shenzhen Bay" ]; // 1. 过滤：时间范围 + 目标口岸 + 必须有 Tag const filteredData = PopTypeData.filter(d => d.Tag !== null && targetPoints.includes(d.ControlPoint) && d.Date >= startyearRange && d.Date <= endyearRange ); // 2. 聚合：按日期 -> 口岸 -> 标签求和 const rolled = d3.rollup( filteredData, v => d3.sum(v, d => d.Total), d => d.Date, d => d.ControlPoint, d => d.Tag ); // 3. 展平数据并准备颜色/标签映射 const result = []; const uniqueCPs = [...new Set(targetPoints)]; // 使用 targetPoints 确保顺序一致 const colorScale = d3.scaleOrdinal().domain(uniqueCPs).range(LineColorPalette); // 假设 tagLinear 与 targetPoints 的顺序是一一对应的 const tagScale = d3.scaleOrdinal().domain(uniqueCPs).range([ "linear", "linear", "linear", "linear", "linear", "linear", "linear", "linear", "linear" ]); for (const [date, pointsMap] of rolled) { for (const [cp, tagsMap] of pointsMap) { const beishang = tagsMap.get("Beishang") || 0; const nanxia = tagsMap.get("Nanxia") || 0; result.push({ Date: date, ControlPoint: cp, Beishang: beishang, Nanxia: -nanxia, // 南下设为负值方便绘图 NetFlow: beishang - nanxia, // --- 在这里添加颜色和标签 --- color: colorScale(cp), tag: tagScale(cp) }); } } // 4. 最后统一排序并返回 return result.sort((a, b) => a.Date - b.Date); }3b:T24d5,function tideline() { // --- 1. 基础画布设置 --- const width = 1152; const height = 720; const [mt, mr, mb, ml] = [60, 40, 60, 100]; const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased;"); // --- 2. 定义比例尺 --- const x = d3.scaleUtc() .domain(d3.extent(NIArray, d => d.Date)) .range([ml, width - mr]); // Y 轴范围：涵盖 Nanxia, Beishang 以及 NetFlow 的最大最小值 const yMin = d3.min(NIArray, d => Math.min(d.Nanxia, d.NetFlow)); const yMax = d3.max(NIArray, d => Math.max(d.Beishang, d.NetFlow)); const y = d3.scaleLinear() .domain([yMin, yMax]).nice() .range([height - mb, mt]); // --- 3. 定义裁剪遮罩 --- const clipId = "clip-" + Math.random().toString(36).substr(2, 9); svg.append("defs").append("clipPath") .attr("id", clipId) .append("rect") .attr("width", 0).attr("height", height) .transition().duration(2000).ease(d3.easeLinear) .attr("width", width); // --- 4. 绘制坐标轴 --- svg.append("g") .attr("transform", `translate(0,${height - mb})`) .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0)) .attr("color", "#94a3b8") .call(g => g.selectAll(".tick text").attr("fill", "#64748b").style("font-family", "'Inter'")); svg.append("g") .attr("transform", `translate(${ml},0)`) .call(d3.axisLeft(y).ticks(10, "~s")) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").attr("stroke-opacity", 0.1).attr("x2", width - ml - mr)) .call(g => g.selectAll(".tick text").style("font-family", "'Inter'")) .append("text") .attr("x", -ml + 20).attr("y", 30).attr("fill", "#0E7490") .attr("text-anchor", "start").style("font-weight", "800").style("letter-spacing", "0.1em") .text("↑ PASSENGER FLOW & NET TREND"); // --- 5. 定义三条线的生成器 --- // A. 北上 (实线) const lineB = d3.line().x(d => x(d.Date)).y(d => y(d.Beishang)).curve(d3.curveMonotoneX); // B. 南下 (虚线) const lineN = d3.line().x(d => x(d.Date)).y(d => y(d.Nanxia)).curve(d3.curveMonotoneX); // C. 净流量 (红线) const lineNet = d3.line().x(d => x(d.Date)).y(d => y(d.NetFlow)).curve(d3.curveMonotoneX); // --- 绘制零刻度线 --- svg.append("line") .attr("x1", ml).attr("x2", width - mr).attr("y1", y(0)).attr("y2", y(0)) .attr("stroke", "#64748b").attr("stroke-width", 1).attr("stroke-dasharray", "2,2").attr("opacity", 0.5); // --- 6. 数据分组绘制 --- const groups = d3.group(NIArray, d => d.ControlPoint); const mainGroup = svg.append("g").attr("clip-path", `url(#${clipId})`); const cpGroups = mainGroup.selectAll("g.cp-group").data(groups).join("g").attr("class", "cp-group"); // 1. 绘制北上 (背景层，低透明度) const pathB = cpGroups.append("path") .attr("fill", "none") .attr("stroke", ([, d]) => d[0].color) .attr("stroke-width", 1.5) .attr("stroke-opacity", 0.4) // 降低透明度，突出红线 .attr("d", ([, d]) => lineB(d)); // 2. 绘制南下 (背景层，低透明度，虚线) const pathN = cpGroups.append("path") .attr("fill", "none") .attr("stroke", ([, d]) => d[0].color) .attr("stroke-width", 1.5) .attr("stroke-dasharray", "4,4") .attr("stroke-opacity", 0.4) // 降低透明度 .attr("d", ([, d]) => lineN(d)); // 3. 绘制净流量 (核心层，红色高亮) const pathNet = cpGroups.append("path") .attr("fill", "none") .attr("stroke", "#FFDDFF") // 红色 .attr("stroke-width", 2.5) // 加粗 .attr("stroke-linejoin", "round") .style("mix-blend-mode", "multiply") .attr("d", ([, d]) => lineNet(d)); // --- 7. 交互浮窗组件 --- const dot = svg.append("g").attr("display", "none").attr("pointer-events", "none"); const tipBox = dot.append("rect").attr("rx", 8).attr("ry", 8).attr("fill", "rgba(15, 23, 42, 0.95)"); // Slate 900 const tipText = dot.append("text").attr("text-anchor", "middle").style("font-family", "'Inter'"); const tTitle = tipText.append("tspan").attr("x", 0).attr("dy", "-3.6em").attr("font-weight", "800").attr("fill", "#22d3ee"); const tDate = tipText.append("tspan").attr("x", 0).attr("dy", "1.6em").attr("fill", "#94a3b8").style("font-size", "11px"); const tFlow = tipText.append("tspan").attr("x", 0).attr("dy", "1.6em").attr("fill", "#e2e8f0").style("font-size", "11px"); const tNet = tipText.append("tspan").attr("x", 0).attr("dy", "1.6em").attr("fill", "#f87171").style("font-weight", "700"); // 红色显示 Net // --- 8. 交互逻辑 --- svg.on("pointerenter", () => cpGroups.style("opacity", 1)) .on("pointermove", pointermoved) .on("pointerleave", pointerleft); return svg.node(); function pointermoved(event) { const [xm, ym] = d3.pointer(event); // 寻找最近的数据点 const i = d3.leastIndex(NIArray, d => { const dx = x(d.Date) - xm; // 这里我们优先吸附 NetFlow 线，因为它是视觉重点 const dy = y(d.NetFlow) - ym; return Math.hypot(dx, dy); }); const d = NIArray[i]; if (!d) return; // 移动 Tooltip 到 NetFlow 点的位置 dot.attr("display", null).attr("transform", `translate(${x(d.Date)},${y(d.NetFlow)})`); tTitle.text(d.ControlPoint.toUpperCase()); tDate.text(d3.utcFormat("%Y-%m-%d")(d.Date)); // 显示北上和南下(绝对值) tFlow.text(`N: ${d.Beishang.toLocaleString()} | S: ${Math.abs(d.Nanxia).toLocaleString()}`); // 显示净流量 tNet.text(`NET: ${d.NetFlow > 0 ? '+' : ''}${d.NetFlow.toLocaleString()}`); // 动态调整背景框大小 const bbox = tipText.node().getBBox(); tipBox.attr("x", bbox.x - 12).attr("y", bbox.y - 12) .attr("width", bbox.width + 24).attr("height", bbox.height + 24); // 样式高亮：非当前口岸变淡 cpGroups.style("opacity", ([name]) => name === d.ControlPoint ? 1 : 0.05); // 只有当前口岸的红线加粗到 4px pathNet.attr("stroke-width", ([, data]) => data[0].ControlPoint === d.ControlPoint ? 4 : 2.5); // 背景线保持细线，避免抢戏 pathB.attr("stroke-opacity", ([, data]) => data[0].ControlPoint === d.ControlPoint ? 0.8 : 0.1); pathN.attr("stroke-opacity", ([, data]) => data[0].ControlPoint === d.ControlPoint ? 0.8 : 0.1); svg.on("click", () => handlePanel(d, d.color)); } function pointerleft() { dot.attr("display", "none"); cpGroups.style("opacity", 1); pathNet.attr("stroke-width", 2.5); // 恢复红线默认宽度 pathB.attr("stroke-opacity", 0.4); pathN.attr("stroke-opacity", 0.4); } function handlePanel(d, color) { const panel = d3.select("#floating-panel"); // 简单的边界计算，防止浮窗溢出 let left = x(d.Date) + ml + 20; let top = y(d.NetFlow) + mt - 50; if (left > width - 360) left = x(d.Date) - 360; panel.style("display", "block") .style("left", `${left}px`) // 注意：这里可能需要根据你的页面布局调整绝对/相对定位 .style("top", `${Math.max(20, top)}px`) .style("border-left", `4px solid ${color}`); d3.select("#modal-title").text(d.ControlPoint).style("color", "#0f172a"); piechart(d.ControlPoint, d.Date); } function piechart(ControlPoint, Time){ const container = d3.select("#pie-chart").html(""); const PieArray = PopTypeData.filter(item => item.ControlPoint === ControlPoint && item.Date.getTime() === Time.getTime() ); const pieWidth = 300, pieHeight = 300; const PieColorPalette = ["#0E7490", "#0891B2", "#22D3EE", "#0F172A", "#334155", "#94A3B8"]; const color = d3.scaleOrdinal().range(PieColorPalette); const svgPie = container.append("svg") .attr("viewBox", [-pieWidth/2, -pieHeight/2, pieWidth, pieHeight]) .style("width", "100%").style("height", "auto"); const arc = d3.arc().innerRadius(70).outerRadius(pieWidth / 2 - 10).cornerRadius(4); const pie = d3.pie().sort(null).value(d => d.Total); svgPie.selectAll("path") .data(pie(PieArray)) .join("path") .attr("fill", (d, i) => color(i)) .attr("d", arc) .attr("stroke", "#fff") .style("stroke-width", "2px") .append("title").text(d => `${d.data.PopulationType}: ${d.data.Total}`); d3.select("#detail-text") .style("font-family", "'Inter', sans-serif") .style("color", "#475569") .html(`

Total: ${PieArray.reduce((sum, d) => sum + d.Total, 0).toLocaleString()}

${PieArray.map((d, i) => `

${d.PopulationType} ${d.Total.toLocaleString()}

`).join('')}

`); } }3c:Tb87,TideChartt = { const container = html`

Daily Passengers Statistics

`; // 逻辑处理 container.querySelector('#modal-close').onclick = () => { container.querySelector('#floating-panel').style.display = "none"; }; setTimeout(() => { if (typeof tideline === 'function') { const lineSvg = tideline(); const lineChartDiv = container.querySelector('#line-chart'); if (lineChartDiv && lineSvg) { lineChartDiv.appendChild(lineSvg); } } }, 100); return container; }3d:[{"id":"d07937889283fbf9f808f7fb49a85c2071f00bf9a0f15699a4177ebcba547177059616b017bc4529908d8c64bf24aef1246874e4fbd6c68e87d723dbd181b51f","href":"https://static.observableusercontent.com/files/d07937889283fbf9f808f7fb49a85c2071f00bf9a0f15699a4177ebcba547177059616b017bc4529908d8c64bf24aef1246874e4fbd6c68e87d723dbd181b51f","name":"HONG_KONG_Statistics_on_Daily_Passenger_Traffic@3.csv","type":"text/csv","lastModified":1763964827320.409,"size":2785635},{"id":"981a7c754f6e554d817879b213a0eacb69219157ca5ea3a7bc3348504c41e78f105c52307e629c1def445a92fd9bed158065addb8f7cec0c9ccb3b73c377759a","href":"https://static.observableusercontent.com/files/981a7c754f6e554d817879b213a0eacb69219157ca5ea3a7bc3348504c41e78f105c52307e629c1def445a92fd9bed158065addb8f7cec0c9ccb3b73c377759a","name":"image.png","type":"image/png","lastModified":1770298282845.014,"size":89576}] 32:{"id":"62d9a495fca31d7a","slug":"final_datavisualization-data1","title":"Daily Passenger Counts of Control Points, Hong Kong","thumbnail":"15c2819eb91cbeb5bf84095a2d39fb22412e4b84326984ae4e0dc347edcf8c78","access_level":"public","create_time":"$D2025-11-24T06:13:47.320Z","update_time":"$D2026-02-07T20:43:15.339Z","view_time":null,"first_public_time":"$D2025-11-24T06:37:08.238Z","fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"1f6e40eae55452af","login":"zhouyiweidatavisualization","name":"zhouyiweidatavisualization","avatar_url":"https://avatars-next.observableusercontent.com/740590666ebd1585ce48dd47bffdd92a24cb14798f03b2e06fc18dac73e5b9e9","tier":"starter_2024"},"version":1008,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"240add577afed737","login":"yves-frederick","name":"Yves Frederick","avatar_url":"https://avatars-next.observableusercontent.com/85aaefe41c79aa3d41dfcd5c1fb2037602e6ae8c112c3ce3280e2c1eb3006dcf","tier":null}],"members":[{"type":"individual","id":"240add577afed737","login":"yves-frederick","name":"Yves Frederick","avatar_url":"https://avatars-next.observableusercontent.com/85aaefe41c79aa3d41dfcd5c1fb2037602e6ae8c112c3ce3280e2c1eb3006dcf","tier":null,"role":"editor"},{"type":"team","id":"1f6e40eae55452af","login":"zhouyiweidatavisualization","name":"zhouyiweidatavisualization","avatar_url":"https://avatars-next.observableusercontent.com/740590666ebd1585ce48dd47bffdd92a24cb14798f03b2e06fc18dac73e5b9e9","tier":"starter_2024","role":"editor"}],"comments":[{"id":"d559a3404db2560e","reply_to_id":null,"content":"Main ChartLine(汛图)","create_time":"$D2026-02-07T13:04:32.201Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"240add577afed737","login":"yves-frederick","name":"Yves Frederick","avatar_url":"https://avatars-next.observableusercontent.com/85aaefe41c79aa3d41dfcd5c1fb2037602e6ae8c112c3ce3280e2c1eb3006dcf","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Daily Passenger Counts of Control Points, Hong Kong","cells":[{"id":0,"value":"# Daily Passenger Counts of Control Points, Hong Kong","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":155,"value":"hong_kong_statistics_on_daily_passenger_traffic3 = await FileAttachment(\"HONG_KONG_Statistics_on_Daily_Passenger_Traffic@3.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"hong_kong_statistics_on_daily_passenger_traffic3","database":"$undefined"},{"id":6,"value":"data = await FileAttachment(\"HONG_KONG_Statistics_on_Daily_Passenger_Traffic@3.csv\").csv({typed: true});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"pureData = {\n let optData = data; \n \n optData = optData.map(d => {\n const pureItem = { ...d }; // 浅拷贝原数据项\n // 修正分割顺序：日-月-年 → 年-月-日\n const [day, month, year] = pureItem.Date.split(\"-\"); \n const formattedDate = `${year}-${month}-${day}`; // 拼接为合法的年-月-日格式\n pureItem.Date = new Date(formattedDate); // 转换为Date对象（修复语法错误）\n return pureItem;\n });\n\n return optData;\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"ControlPointName = {\n const SpecialCP = [...new Set(data.map(d => d.ControlPoint))];\n SpecialCP.sort();\n\n return SpecialCP;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"DateCount = {\n const DateCount = [...new Set(pureData.map(d => d.Date))];\n return DateCount;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"// 仅提取Date、ControlPoint、Total三个字段，Total为原始整数无需转换\nextractedCPData = {\n // 兜底：若pureData未定义，初始化为空数组\n const rawData = pureData || [];\n\n // 遍历数据，仅提取目标字段\n const extractedData = rawData.map(item => ({\n Date: item.Date, \n ControlPoint: item.ControlPoint, \n Total: item.Total\n }));\n\n return extractedData;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"import {rangeInput} from '@mootari/range-slider'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"import {theme_NoUiSlider} from '@mootari/range-slider'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"BarTimeCount = {\n const BarTimeCount = [...new Set(pureData.map(d => d.Date))];\n BarTimeCount.sort((a, b) => a - b);\n return BarTimeCount;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":576,"value":" INArray = {\n let aArray = InteractiveArray;\n const targetValues = selected;\n const CPResearcher = aArray.filter(item => {\n return item && item.ControlPoint && targetValues.includes(item.ControlPoint);\n }); \n return CPResearcher;\n }\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":689,"value":"Kolor = {\n const SpecialCP = [...new Set(InteractiveArray.map(d => d.color))];\n return SpecialCP;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"function termFilter(term) {\n return new RegExp(`(?:^.*|[^\\\\p{L}-])${escapeRegExp(term)}`, \"iu\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"\nfunction escapeRegExp(text) {\n return text.replace(/[\\\\^$.*+?()[\\]{}|]/g, \"\\\\$&\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"// https://github.com/observablehq/inputs/blob/main/src/search.js\nfunction fullSearchFilter(query) {\n const filters = `${query}`\n .split(/\\s+/g)\n .filter((t) => t)\n .map(termFilter);\n return (d) => {\n if (d == null) return false;\n if (typeof d === \"object\") {\n out: for (const filter of filters) {\n for (const value of valuesof(d)) {\n if (filter.test(value)) {\n continue out;\n }\n }\n return false;\n }\n } else {\n for (const filter of filters) {\n if (!filter.test(d)) {\n return false;\n }\n }\n }\n return true;\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"function* valuesof(d) {\n for (const key in d) {\n yield d[key];\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":539,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":659,"value":"viewof selected = searchCheckbox(\n ControlPointName, // What elements to chose from\n {// Any other options you pass here will be passed to the checkbox and search inputs\n value: ControlPointName, // Start with everything selected\n label: \"Control Point Name\",\n color: Kolor,\n height: 200,\n // You can also pass specific options for the search and the checkboxes\n // optionsSearch: {\n // filter: fullSearchFilter\n // }\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":664,"value":"TimeSection = html`

Time Section

\n From \n ${BarTimeCount[year[0]].toString().slice(4, 16)} \n to \n ${BarTimeCount[year[1]].toString().slice(4, 16)}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":654,"value":"viewof year = rangeInput({\n min: 0,\n max: DateCount.length - 1,\n step: 1,\n value: [0, 8],\n step: 1,\n width: 1160,\n color: '#334155',\n theme: theme_NoUiSlider,\n value: [ 0, DateCount.length - 1],\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":940,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":778,"value":"LinearPointName = [\"Express Rail Link West Kowloon\", \"Heung Yuen Wai\", \"Hung Hom\", \"Lo Wu\", \"Lok Ma Chau\", \"Lok Ma Chau Spur Line\", \"Man Kam To\", \"Sha Tau Kok\", \"Shenzhen Bay\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":856,"value":"Nicha = {\n // 定义需要提取的目标口岸名单\n\n // 1. 提取所有带有北上/南下标签，且属于目标口岸的数据\n const taggedData = PopTypeData.filter(d => \n d.Tag !== null && ControlPointName.includes(d.ControlPoint)\n );\n\n // 2. 核心聚合：按日期 -> 口岸 -> 标签进行三层分组求和\n const rolled = d3.rollup(\n taggedData,\n v => d3.sum(v, d => d.Total),\n d => d.Date,\n d => d.ControlPoint,\n d => d.Tag\n );\n\n // 3. 将嵌套的 Map 结构展平为标准的对象数组\n const result = [];\n \n for (const [date, pointsMap] of rolled) {\n for (const [cp, tagsMap] of pointsMap) {\n const beishang = tagsMap.get(\"Beishang\") || 0;\n const nanxia = tagsMap.get(\"Nanxia\") || 0;\n \n result.push({\n Date: date,\n ControlPoint: cp,\n Beishang: beishang,\n Nanxia: - nanxia,\n // 衍生指标：北上逆差\n NetFlow: beishang - nanxia\n });\n }\n }\n\n // 4. 按日期升序排列\n return result.sort((a, b) => a.Date - b.Date);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":969,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":967,"value":" NIArray = {\n let aArray = NIteractiveArray;\n const targetValues = selected;\n const CPResearcher = aArray.filter(item => {\n return item && item.ControlPoint && targetValues.includes(item.ControlPoint);\n }); \n return CPResearcher;\n }\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":999,"value":"SumArray = (() => {\n const targetValues = selected; // 选中的口岸名称数组\n \n // 1. 过滤出选中的数据\n const filtered = NIteractiveArray.filter(item => \n item && item.ControlPoint && targetValues.includes(item.ControlPoint)\n );\n\n if (filtered.length === 0) return [];\n\n // 2. 按日期聚合合成新数组\n const aggregated = d3.flatRollup(\n filtered,\n (v) => ({\n Date: v[0].Date,\n // 这里的名称固定为 \"Combined Total\"，方便在图表中识别\n ControlPoint: \"Combined Total\", \n // 核心相加逻辑\n Beishang: d3.sum(v, d => d.Beishang),\n Nanxia: d3.sum(v, d => d.Nanxia),\n NetFlow: d3.sum(v, d => d.NetFlow),\n // 既然是加总，我们给它一个统一的特征色，比如深红色或深蓝色\n color: \"#ef4444\" \n }),\n (d) => d.Date.getTime()\n ).map(d => d[1]);\n\n // 3. 排序，确保时间轴连续\n return aggregated.sort((a, b) => a.Date - b.Date);\n})();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":960,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":963,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3d","stdlib":"1","titling":"auto"}} 33:"$32:body"