2b:null 2c:["$","title",null,{"children":"Line + Pie Chart | Cu | Observable"}] 31:T2e86,function chartline() { // ========== 可配置参数 ========== const config = { // 画布尺寸 width: 1200, height: 800, // 边距 margins: { top: 40, right: 40, bottom: 50, left: 120 }, // 字体设置 fonts: { axis: "14px Arial", label: "16px Arial", tooltip: "16px Arial", pieText: "2.6em Arial", detail: "1em Arial" }, // 颜色方案 colors: { background: "#f8f9fa", axis: "#555", label: "#2c3e50", lineNormal: 1.5, lineHighlight: 6, tooltipCircle: "#e74c3c", tooltipText: "#2c3e50", pieStroke: "white", detailText: "#6c757d", totalPassengers: "black", international: "#28a745", domestic: "#dc3545" }, // 动画时长 animation: { line: 2000, pie: 1000, interaction: 100 }, // 圆点半径 radii: { tooltip: 6, clicked: 12 }, // 饼图设置 pie: { height: 1000, innerRadius: 120, outerRadiusOffset: 1, strokeWidth: "6px", labelRadius: 0.8 } }; // ========== 使用配置参数 ========== const width = config.width; const height = config.height; const marginTop = config.margins.top; const marginRight = config.margins.right; const marginBottom = config.margins.bottom; const marginLeft = config.margins.left; // Create the positional scales. const x = d3.scaleUtc() .domain(d3.extent(GraphArray, d => d.ReportPeriod)) .range([marginLeft, width - marginRight]); const color = d3.scaleOrdinal() .domain(GraphArray.map(d => d.Terminal)) .range(d3.quantize(t => d3.interpolateSpectral(t * 0.85 + 0.1), TerminalCount.length).reverse()) const y = d3.scaleLinear() .domain([0, d3.max(GraphArray, d => d.totalPassengers)]).nice() .range([height - marginBottom, marginTop]); // Create the SVG container. const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", `max-width: 100%; height: auto; overflow: visible; font: ${config.fonts.axis}; background: ${config.colors.background};`); // Add the horizontal axis. svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0)) .style("font", config.fonts.axis) .style("color", config.colors.axis); // Add the vertical axis. svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y)) .style("font", config.fonts.axis) .style("color", config.colors.axis) .call(g => g.select(".domain").remove()) .call(g => g.append("text") .attr("x", -marginLeft) .attr("y", 10) .attr("fill", config.colors.label) .attr("text-anchor", "start") .style("font", config.fonts.label) .text("↑ Passenger count (ppl)")); // Compute the points in pixel space as [x, y, k, l, m], where k, l, m is the content of the data. const points = GraphArray.map((d) => [x(d.ReportPeriod), y(d.totalPassengers), d.Terminal, d.ReportPeriod, d.totalPassengers]); // Group the points by series. const groups = d3.rollup(points, v => Object.assign(v, {z: v[0][2]}), d => d[2]); // Draw the lines. const line = d3.line(); const path = svg.append("g") .selectAll("path") .data(groups.values()) .join("path") .attr("fill", "none") .attr("stroke", d => color(d[2])) .attr("stroke-width", config.colors.lineNormal) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .style("mix-blend-mode", "multiply") .attr("d", line) .call(transition); // Add an invisible layer for the interactive tip. const dot = svg.append("g") .attr("display", "none"); dot.append("circle") .attr("r", config.radii.tooltip) .attr("fill", config.colors.tooltipCircle); dot.append("text") .attr("text-anchor", "middle") .attr("y", -12) .style("font", config.fonts.tooltip) .style("fill", config.colors.tooltipText); // Add an invisible layer for the clicked dot. const clickedDot = svg.append("g") .attr("display", "none"); clickedDot.append("circle") .attr("r", config.radii.clicked) .attr("fill", config.colors.tooltipCircle) .attr("opacity", 0.7); clickedDot.append("text") .attr("text-anchor", "middle") .attr("y", -18) .style("font", config.fonts.tooltip) .style("fill", config.colors.tooltipText) .style("font-weight", "bold"); 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, ([x, y]) => Math.hypot(x - xm, y - ym)); const [x, y, k, l, m] = points[i]; dot.attr("display", 'block'); dot.attr("transform", `translate(${x},${y})`) dot.select("text").text(k); dot.on("mousedown", mouseDown); path.transition() .duration(config.animation.interaction) .attr("stroke-width", config.colors.lineNormal); path.style("stroke", ({z}) => z === k ? null : "#ddd").filter(({z}) => z === k) .transition() .duration(config.animation.interaction) .attr("stroke-width", config.colors.lineHighlight).raise(); function mouseDown(event, d){ const Terminal = k; clickedDot.attr("display", 'block'); clickedDot.attr("transform", `translate(${x},${y})`); clickedDot.select("text").text(k); piechart(Terminal,l); } } function pointerentered() { path.style("mix-blend-mode", null).style("stroke", "#ddd"); } function pointerleft() { path.style("mix-blend-mode", "multiply").style("stroke", null); path.transition() .duration(config.animation.interaction) .attr("stroke-width", config.colors.lineNormal); dot.attr("display", "none"); svg.node().value = null; svg.dispatch("input", {bubbles: true}); } function transition(path) { path.transition() .duration(config.animation.line) .attrTween("stroke-dasharray", tweenDash) .on("end", () => { d3.select('.temperature-line').call(transition); }); } function tweenDash() { const l = this.getTotalLength(), i = d3.interpolateString("0," + l, l + "," + l); return function(t) { return i(t) }; } function piechart(Terminal, Time){ const container = d3.select("#pie-chart"); container.html(""); const PieArray = OptimizedData.filter(item => { return item.Terminal == Terminal && item.ReportPeriod.getTime() === Time.getTime(); }); const pieHeight = config.pie.height; const pieWidth = width; const color = d3.scaleOrdinal() .domain(PieArray.map(d => d.Arrival_Departure)) .range(d3.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), 4).reverse()) const svg = container.append("svg") .attr("viewBox", [-pieWidth/2, -pieHeight/2, pieWidth, pieHeight]); const arc = d3.arc() .innerRadius(config.pie.innerRadius) .outerRadius(Math.min(pieWidth, pieHeight) / 2 - config.pie.outerRadiusOffset); const pie = d3.pie() .sort(null) .value((d) => d["Passenger_Count"]); const arcs = pie(PieArray); const labelRadius = arc.outerRadius()() * config.pie.labelRadius; const arcLabel = d3.arc() .innerRadius(labelRadius) .outerRadius(labelRadius); let path = svg.datum(PieArray).selectAll("path") .data(pie) .join( (enter) => enter.append("path") .attr("fill", (d, i) => color(i)) .attr("stroke", config.colors.pieStroke) .attr("stroke-width", config.pie.strokeWidth) .attr("d", arc({ startAngle: 0, endAngle: 0 })) .each(function(d) { this._current = { startAngle: 0, endAngle: 0 }; }) .transition() .duration(config.animation.pie) .attrTween("d", function(d) { const i = d3.interpolate(this._current, d); this._current = i(1); return (t) => arc(i(t)); }), ); let text = svg.datum(PieArray).selectAll("text") .data(pie) .join( (enter) => enter.append("text") .attr("text-anchor", "middle") .attr("fill", "black") .attr("transform", d => `translate(${arcLabel.centroid(d)})`) .call(text => text.append("tspan") .style("font", config.fonts.pieText) .attr("x", 0) .attr("y", -12) .text(function(d){ return d.data.Arrival_Departure})) .call(text => text.append("tspan") .style("font", config.fonts.pieText) .attr("x", 0) .attr("dy", "1.3em") .text(function(d){ return d.data.Domestic_International})) .call(text => text.append("tspan") .style("font", config.fonts.pieText) .attr("x", 0) .attr("dy", "1.3em") .text(function(d){ return d.data.Passenger_Count.toLocaleString("en-US")})) ); const ArrivalInternational = PieArray.filter(item => item.Arrival_Departure == "Arrival" && item.Domestic_International == "International").length === 0 ? 0 : PieArray.filter(item => item.Arrival_Departure == "Arrival" && item.Domestic_International == "International")[0] .Passenger_Count.toLocaleString("en-US"); const ArrivalDomestic = PieArray.filter(item => item.Arrival_Departure == "Arrival" && item.Domestic_International == "Domestic").length === 0 ? 0 : PieArray.filter(item => item.Arrival_Departure == "Arrival" && item.Domestic_International == "Domestic")[0] .Passenger_Count.toLocaleString("en-US"); const DepartureInternational = PieArray.filter(item => item.Arrival_Departure == "Departure" && item.Domestic_International == "International").length === 0 ? 0 : PieArray.filter(item => item.Arrival_Departure == "Departure" && item.Domestic_International == "International")[0] .Passenger_Count.toLocaleString("en-US"); const DepartureDomestic = PieArray.filter(item => item.Arrival_Departure == "Departure" && item.Domestic_International == "Domestic").length === 0 ? 0 : PieArray.filter(item => item.Arrival_Departure == "Departure" && item.Domestic_International == "Domestic")[0] .Passenger_Count.toLocaleString("en-US"); d3.select("#detail-text") .style("text-align", "left") .style("margin-top", "3em") .style("font-size", config.fonts.detail) .style("color", config.colors.detailText) .html(`

Total passengers: ${(CombineTerminalPassengers.filter(item => {return item.Terminal == Terminal && item.ReportPeriod.getTime() === Time.getTime();})[0].totalPassengers.toLocaleString("en-US"))}

International Arrival: ${(ArrivalInternational)}

Domestic Arrival: ${(ArrivalDomestic)}

International Departure: ${(DepartureInternational)}

Domestic Departure: ${(DepartureDomestic)}

`); } }32:T5e0,{ const container = html`

LA airport passengers count

`; setTimeout(() => { if (typeof chartline === "function") { const lineSvg = chartline(); const lineChartDiv = container.querySelector("#line-chart"); if (lineChartDiv && lineSvg) { lineChartDiv.appendChild(lineSvg); } else { console.error("line chart container or SVG not find"); } } else { console.error("lineChart not define"); } }, 100); return container; }33:[{"id":"2bd42875fcac8100f51c2f6a24c7c4adfcdde91f171691c2fd25bf3ef4e443b8d9e8ec9670795e04ded6ae0a062a2c12bfab0ec74b4206cfa1527e759860c8cc","href":"https://static.observableusercontent.com/files/2bd42875fcac8100f51c2f6a24c7c4adfcdde91f171691c2fd25bf3ef4e443b8d9e8ec9670795e04ded6ae0a062a2c12bfab0ec74b4206cfa1527e759860c8cc","name":"Los_Angeles_International_Airport_-_Passenger_Traffic_By_Terminal_20251106.csv","type":"text/csv","lastModified":1763528705438.472,"size":731325}] 2f:{"id":"dd45776896c64dfe","slug":null,"title":"Line + Pie Chart","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2025-11-19T05:05:05.438Z","update_time":"$D2025-11-19T06:02:01.957Z","view_time":null,"first_public_time":"$D2025-11-19T05:05:15.936Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"2e5bfe0ce6ce7549","login":"cu3","name":"Cu","avatar_url":"https://avatars-next.observableusercontent.com/9a975e6775bd901b7adc4d6c6bba2701ad77e8686ac470ab38928697c9dd54b6","tier":"starter_2024"},"version":1428,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"45ee98670b70a40c","login":"lyan2","name":"Lyan","avatar_url":"https://avatars-next.observableusercontent.com/b21004147f9173553f17632b2395e7700828284262248816db713560d2687214","tier":null}],"members":[{"type":"team","id":"2e5bfe0ce6ce7549","login":"cu3","name":"Cu","avatar_url":"https://avatars-next.observableusercontent.com/9a975e6775bd901b7adc4d6c6bba2701ad77e8686ac470ab38928697c9dd54b6","tier":"starter_2024","role":"editor"},{"type":"individual","id":"45ee98670b70a40c","login":"lyan2","name":"Lyan","avatar_url":"https://avatars-next.observableusercontent.com/b21004147f9173553f17632b2395e7700828284262248816db713560d2687214","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Line + Pie Chart","cells":[{"id":4,"value":"# Line + Pie Chart\n\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":42,"value":"los_angeles_international_airport__passenger_traf = await FileAttachment(\"Los_Angeles_International_Airport_-_Passenger_Traffic_By_Terminal_20251106.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"los_angeles_international_airport__passenger_traf","database":"$undefined"},{"id":46,"value":"Adata = await FileAttachment(\n \"Los_Angeles_International_Airport_-_Passenger_Traffic_By_Terminal_20251106.csv\"\n).csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"// data organize\n// combine all passenger count data\nOptimizedData = {\n let optData = Adata;\n \n optData = optData.map(d => {\n // Create a new object to avoid mutating the original object directly\n const newObj = { ...d }; \n\n newObj.Passenger_Count = parseInt(newObj.Passenger_Count.toString().replace(/,/g, ''));\n\n newObj.ReportPeriod = newObj.ReportPeriod.substring(0, newObj.ReportPeriod.length - 15); \n newObj.ReportPeriod = new Date(newObj.ReportPeriod)\n \n\n \n newObj. DataExtractDate = new Date(newObj.DataExtractDate); \n \n\n \n return newObj; // Return the modified object\n})\n\n optData.sort((a, b) => a.ReportPeriod - b.ReportPeriod);\n return optData;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"// sort Teminal\nTerminalCount = {\n const uniqueTerminals = [...new Set(Adata.map(d => d.Terminal))];\n uniqueTerminals.sort();\n\n\n return uniqueTerminals;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"//combine passengers count of terminal\nCombineTerminalPassengers = {\n \n const summedData = OptimizedData.reduce((accumulator, currentItem) => {\n const key = `${currentItem.Terminal}-${currentItem.ReportPeriod}`; // Create a unique key from the two ID\n const num = currentItem.Passenger_Count;\n \n if (accumulator[key]) {\n accumulator[key] += num;\n } else {\n accumulator[key] = num;\n }\n return accumulator;\n }, {});\n \n const resultAsArray = Object.keys(summedData).map(key => {\n const [Terminal, ReportPeriod] = key.split('-');\n return { Terminal, ReportPeriod: new Date(ReportPeriod), totalPassengers: summedData[key] };\n });\n\n \n\n resultAsArray.sort((a, b) => a.ReportPeriod - b.ReportPeriod);\n return resultAsArray;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1370,"value":"\nReportTimeCount = {\n const ReportTimeCount = [...new Set(OptimizedData.map(d => d.ReportPeriod))];\n ReportTimeCount.sort((a, b) => a - b);\n\n\n return ReportTimeCount;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":860,"value":"import { rangeInput } from \"@mootari/range-slider@1846\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1409,"value":"GraphArray = {\n let pArray = CombineTerminalPassengers;\n const startyearRange = new Date(ReportTimeCount[year[0]].toString());\n const endyearRange = new Date(ReportTimeCount[year[1]].toString());\n pArray = pArray.filter((item) => {\n return (\n item.ReportPeriod >= startyearRange && item.ReportPeriod <= endyearRange\n );\n });\n return pArray;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1353,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1422,"value":"html`

Year Range

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

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1424,"value":"viewof year = rangeInput({\n min: 0,\n max: ReportTimeCount.length - 1,\n step: 1,\n value: [0, 8],\n step: 1,\n value: [0, ReportTimeCount.length - 1]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1416,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"