2b:null 2c:["$","title",null,{"children":"Interactive Coordinated Graphs (line + pie) | SM6351 | Observable"}] 31:T246c,{ // --- 1. DATA PROCESSING --- const yearRange = [2006, 2023]; const rawData = await FileAttachment('Los_Angeles_International_Airport_-_Passenger_Traffic_By_Terminal_20251117.csv').csv(); const parseTime = d3.timeParse('%Y %b %d %I:%M:%S %p'); const optimisedData = rawData.map(d => ({ ...d, ReportPeriod: parseTime(d.ReportPeriod), Passenger_Count: +d.Passenger_Count.replace(/,/g, '') })).filter(d => d.ReportPeriod); const rolledUp = d3.rollup( optimisedData, v => d3.sum(v, d => d.Passenger_Count), d => d.Terminal, d => d.ReportPeriod ); const graphData = []; for (const [terminal, dateMap] of rolledUp) { for (const [date, total] of dateMap) { graphData.push({ Terminal: terminal, ReportPeriod: date, totalPassengers: total }); } } const startDate = new Date(yearRange[0], 0, 1); const endDate = new Date(yearRange[1], 11, 31); const finalGraphData = graphData.filter(item => item.ReportPeriod >= startDate && item.ReportPeriod <= endDate ).sort((a, b) => a.ReportPeriod - b.ReportPeriod); // --- 2. LAYOUT CONTAINER --- const container = html`

LA Airport passenger count

`; // --- 3. CHART LOGIC --- const lineContainer = d3.select(container).select('#line-chart'); const pieContainer = d3.select(container).select('#pie-chart'); const detailContainer = d3.select(container).select('#detail-text'); if (finalGraphData.length === 0) return container; // Safety check const width = 960; const height = 720; const margin = { top: 20, right: 20, bottom: 40, left: 80 }; const fontStyle = '12px Helvetica, Arial, sans-serif'; const axisColor = '#555'; const terminals = Array.from(new Set(finalGraphData.map(d => d.Terminal))).sort(); const colour = d3.scaleOrdinal().domain(terminals).range(d3.schemeTableau10); const x = d3.scaleUtc() .domain(d3.extent(finalGraphData, d => d.ReportPeriod)) .range([margin.left, width - margin.right]); const y = d3.scaleLinear() .domain([0, d3.max(finalGraphData, d => d.totalPassengers)]).nice() .range([height - margin.bottom, margin.top]); const svg = lineContainer.append('svg') .attr('width', width) .attr('height', height) .attr('viewBox', [0, 0, width, height]) .style('max-width', '100%') .style('height', 'auto'); svg.append('g') .attr('transform', `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0)) .call(g => g.selectAll('text').style('font', fontStyle).style('fill', axisColor)); svg.append('g') .attr('transform', `translate(${margin.left},0)`) .call(d3.axisLeft(y).tickFormat(d => d/1000 + 'k')) .call(g => g.select('.domain').remove()) .call(g => g.selectAll('text').style('font', fontStyle).style('fill', axisColor)) .call(g => g.append('text') .attr('x', -margin.left) .attr('y', 10) .attr('fill', axisColor) .attr('text-anchor', 'start') .style('font', 'bold 14px Helvetica, Arial, sans-serif') .text('↑ Passenger count')); // --- 關鍵修正：使用默認的 d3.line()，因為數據已經是座標點了 --- const line = d3.line(); // 計算座標點 [x, y, terminal, date, count] const points = finalGraphData.map((d) => [x(d.ReportPeriod), y(d.totalPassengers), d.Terminal, d.ReportPeriod, d.totalPassengers]); const groups = d3.rollup(points, v => Object.assign(v, {z: v[0][2]}), d => d[2]); const path = svg.append('g') .selectAll('path') .data(groups.values()) .join('path') .attr('fill', 'none') .attr('stroke', d => colour(d[2])) .attr('stroke-width', 2) .style('mix-blend-mode', 'multiply') .attr('d', line); // 這裡直接傳入 d3.line() 即可 // --- 顏色修正：將紅色改為 steelblue --- const dot = svg.append('g').attr('display', 'none'); dot.append('circle').attr('r', 6).attr('fill', 'steelblue'); const clickedDot = svg.append('g').attr('display', 'none'); clickedDot.append('circle').attr('r', 8).attr('fill', 'none').attr('stroke', 'steelblue').attr('stroke-width', 2); function updatePieChart(Terminal, Time) { pieContainer.html(''); detailContainer.html(''); const pieData = optimisedData.filter(item => item.Terminal == Terminal && item.ReportPeriod.getTime() === Time.getTime() ); if (pieData.length === 0) return; const pWidth = 280, pHeight = 280; const pieColour = d3.scaleOrdinal().domain(pieData.map(d => d.Arrival_Departure)).range(d3.schemeSet2); const pSvg = pieContainer.append('svg') .attr('width', pWidth) .attr('height', pHeight) .attr('viewBox', [-pWidth/2, -pHeight/2, pWidth, pHeight]) .style('max-width', '100%').style('height', 'auto'); const arc = d3.arc().innerRadius(60).outerRadius(130); const pie = d3.pie().sort(null).value(d => d.Passenger_Count); const arcLabel = d3.arc().innerRadius(100).outerRadius(100); pSvg.selectAll('path') .data(pie(pieData)) .join('path') .attr('fill', (d, i) => pieColour(i)) .attr('stroke', 'white').attr('stroke-width', '2px') .attr('d', arc) .transition().duration(750).attrTween('d', function(d) { const i = d3.interpolate(d.startAngle+0.1, d.endAngle); return function(t) { d.endAngle = i(t); return arc(d); } }); pSvg.selectAll('text') .data(pie(pieData)) .join('text') .attr('transform', d => `translate(${arcLabel.centroid(d)})`) .attr('text-anchor', 'middle') .style('font', '11px Helvetica, sans-serif') .style('fill', '#333') .call(text => text.append('tspan').attr('x', 0).attr('y', '-0.5em').style('font-weight', 'bold').text(d => d.data.Arrival_Departure)) .call(text => text.append('tspan').attr('x', 0).attr('dy', '1.1em').text(d => (d.data.Passenger_Count/1000).toFixed(0) + 'k')); const fmt = n => n ? n.Passenger_Count.toLocaleString('en-GB') : '0'; const findVal = (ad, di) => fmt(pieData.find(i => i.Arrival_Departure === ad && i.Domestic_International === di)); const total = pieData.reduce((sum, d) => sum + d.Passenger_Count, 0).toLocaleString('en-GB'); detailContainer.html(`

${Terminal} ${d3.timeFormat('%b %Y')(Time)}

Total: ${total}

Intl Arr: ${findVal('Arrival', 'International')}

Dom Arr: ${findVal('Arrival', 'Domestic')}

Intl Dep: ${findVal('Departure', 'International')}

Dom Dep: ${findVal('Departure', 'Domestic')}

`); } svg.on('pointermove', function(event) { const [xm, ym] = d3.pointer(event); const i = d3.leastIndex(points, ([x, y]) => Math.hypot(x - xm, y - ym)); const [x, y, k, l] = points[i]; dot.attr('display', 'block').attr('transform', `translate(${x},${y})`); path.style('stroke', ({z}) => z === k ? null : '#ddd').filter(({z}) => z === k).attr('stroke-width', 4).raise(); dot.on('click', () => { clickedDot.attr('display', 'block').attr('transform', `translate(${x},${y})`); updatePieChart(k, l); }); if (event.type === 'click') { clickedDot.attr('display', 'block').attr('transform', `translate(${x},${y})`); updatePieChart(k, l); } }) .on('pointerleave', () => { path.style('stroke', null).attr('stroke-width', 2); dot.attr('display', 'none'); }); svg.on('click', function(event) { const [xm, ym] = d3.pointer(event); const i = d3.leastIndex(points, ([x, y]) => Math.hypot(x - xm, y - ym)); const [px, py, pk, pl] = points[i]; clickedDot.attr('display', 'block').attr('transform', `translate(${px},${py})`); updatePieChart(pk, pl); }); const lastPoint = points[points.length - 1]; if (lastPoint) { const [lx, ly, lk, ll] = lastPoint; clickedDot.attr('display', 'block').attr('transform', `translate(${lx},${ly})`); updatePieChart(lk, ll); } return container; }32:[{"id":"2bd42875fcac8100f51c2f6a24c7c4adfcdde91f171691c2fd25bf3ef4e443b8d9e8ec9670795e04ded6ae0a062a2c12bfab0ec74b4206cfa1527e759860c8cc","href":"https://static.observableusercontent.com/files/2bd42875fcac8100f51c2f6a24c7c4adfcdde91f171691c2fd25bf3ef4e443b8d9e8ec9670795e04ded6ae0a062a2c12bfab0ec74b4206cfa1527e759860c8cc","name":"Los_Angeles_International_Airport_-_Passenger_Traffic_By_Terminal_20251117.csv","type":"text/csv","lastModified":1763530952531.066,"size":731325}] 2f:{"id":"cf39ba71422f4add","slug":null,"title":"Interactive Coordinated Graphs (line + pie)","thumbnail":"3d36ab579d2c1148d612d6d4258788eba321bd3c3a6a61870212d9229d6ef6e7","access_level":"public","create_time":"$D2025-11-19T03:54:17.240Z","update_time":"$D2025-11-19T06:28:29.737Z","view_time":null,"first_public_time":"$D2025-11-19T03:54:17.240Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"8feeef125b8270cd","login":"lundychannn","name":"SM6351","avatar_url":"https://avatars-next.observableusercontent.com/4bca69939343cb8b8f3b804597a1fedc109ef9a8eb103e3bf1d9f3eb314d7488","tier":"starter_2024"},"version":44,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3ba333018c55080a","login":"lundy","name":"Lundy CHAN","avatar_url":"https://avatars-next.observableusercontent.com/d6ef92bdd6d68a40da87a8b037350d427caa7c18fef3698e5a9ac70f77b211a7","tier":null}],"members":[{"type":"individual","id":"3ba333018c55080a","login":"lundy","name":"Lundy CHAN","avatar_url":"https://avatars-next.observableusercontent.com/d6ef92bdd6d68a40da87a8b037350d427caa7c18fef3698e5a9ac70f77b211a7","tier":null,"role":"editor"},{"type":"team","id":"8feeef125b8270cd","login":"lundychannn","name":"SM6351","avatar_url":"https://avatars-next.observableusercontent.com/4bca69939343cb8b8f3b804597a1fedc109ef9a8eb103e3bf1d9f3eb314d7488","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Interactive Coordinated Graphs (line + pie)","cells":[{"id":0,"value":"# Interactive Coordinated Graphs (line + pie)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"los_angeles_international_airport__passenger_traf = await FileAttachment(\"Los_Angeles_International_Airport_-_Passenger_Traffic_By_Terminal_20251117.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"los_angeles_international_airport__passenger_traf","database":"$undefined"},{"id":33,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"