2b:null 2c:["$","title",null,{"children":"Interactive Coordinated Graphs | Ziqian Zhang | Observable"}] 31:T26ad,function chartline() { // Specify the chart’s dimensions. const width = 1200; const height = 960; const marginTop = 20; const marginRight = 20; const marginBottom = 30; const marginLeft = 100; // 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-size: 20px sans-serif;"); // Add the horizontal axis. svg.append("g") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0)); // Add the vertical axis. svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y)) .call(g => g.select(".domain").remove()) .call(g => g.append("text") .attr("x", -marginLeft) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .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", 1.5) .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", 5); dot.append("text") .attr("text-anchor", "middle") .attr("y", -8); // Add an invisible layer for the clicked dot. const clickedDot = svg.append("g") .attr("display", "none"); clickedDot.append("circle") .attr("r", 10); clickedDot.append("text") .attr("text-anchor", "middle") .attr("y", -15); svg .on("pointerenter", pointerentered) .on("pointermove", pointermoved) .on("pointerleave", pointerleft) .on("touchstart", event => event.preventDefault()); return svg.node(); // When the pointer moves, find the closest point, update the interactive tip, and highlight // the corresponding line. Note: we don't actually use Voronoi here, since an exhaustive search // is fast enough. 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(100) .attr("stroke-width", 1.5); path.style("stroke", ({z}) => z === k ? null : "#ddd").filter(({z}) => z === k) .transition() .duration(100) .attr("stroke-width", 6).raise(); //event onclick 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(100) .attr("stroke-width", 1.5); dot.attr("display", "none"); svg.node().value = null; svg.dispatch("input", {bubbles: true}); } //animation when mouse status change function transition(path) { path.transition() .duration(2000) .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) }; } //draw piechart based on clicked item 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 height = 900; 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", [-width/2, -height/2, width, height]); const arc = d3.arc() .innerRadius(100) .outerRadius(Math.min(width, height) / 2 - 1); // initialize the pie chart（value based on Passenger_Count） const pie = d3.pie() .sort(null) .value((d) => d["Passenger_Count"]); const arcs = pie(PieArray); const labelRadius = arc.outerRadius()() * 0.8; const arcLabel = d3.arc() .innerRadius(labelRadius) .outerRadius(labelRadius); // draw the pie chart let path = svg.datum(PieArray).selectAll("path") .data(pie) .join( (enter) => enter.append("path") .attr("fill", (d, i) => color(i)) .attr("stroke", "white") .attr("stroke-width", "4px") .attr("d", arc({ startAngle: 0, endAngle: 0 })) .each(function(d) { this._current = { startAngle: 0, endAngle: 0 }; }) .transition() .duration(1000) .attrTween("d", function(d) { const i = d3.interpolate(this._current, d); this._current = i(1); return (t) => arc(i(t)); }), ); // text of each sector of the pie 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-size", "2.4em") .attr("x", 0) .attr("y", -10) .text(function(d){ return d.data.Arrival_Departure})) .call(text => text.append("tspan") .style("font-size", "2.4em") .attr("x", 0) .attr("dy", "1.2em") .text(function(d){ return d.data.Domestic_International})) .call(text => text.append("tspan") .style("font-size", "2.4em") .attr("x", 0) .attr("dy", "1.2em") .text(function(d){ return d.data.Passenger_Count.toLocaleString("en-US")})) ); // detail text of the data 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", "2.4em") .style("font-size", "0.8em") .style("color", "#6c757d") .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:T616,// html part to show the graph { 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":1763521217674.52,"size":731325}] 2f:{"id":"1ca74ca0be000b36","slug":null,"title":"Interactive Coordinated Graphs","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2025-11-19T03:00:17.674Z","update_time":"$D2025-11-19T08:00:15.477Z","view_time":null,"first_public_time":"$D2025-11-19T08:02:17.708Z","fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"e0ef1e41cff0a19e","login":"ronark-zhang","name":"Ziqian Zhang","avatar_url":"https://avatars-next.observableusercontent.com/7d1e607006e72370d5744d95fc74eabe5ece460211fdf4499f44d3793f25530f","tier":"starter_2024"},"version":1412,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"aa551a4ecdb12ba2","login":"ronark-zhang","name":"Ronark Zhang","avatar_url":"https://avatars-next.observableusercontent.com/33c5839336e85ca0a4e7efe82fcd22f5d23f927d783fc377b179bbeeaba2bbed","tier":null}],"members":[{"type":"individual","id":"aa551a4ecdb12ba2","login":"ronark-zhang","name":"Ronark Zhang","avatar_url":"https://avatars-next.observableusercontent.com/33c5839336e85ca0a4e7efe82fcd22f5d23f927d783fc377b179bbeeaba2bbed","tier":null,"role":"editor"},{"type":"team","id":"e0ef1e41cff0a19e","login":"ronark-zhang","name":"Ziqian Zhang","avatar_url":"https://avatars-next.observableusercontent.com/7d1e607006e72370d5744d95fc74eabe5ece460211fdf4499f44d3793f25530f","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Interactive Coordinated Graphs","cells":[{"id":4,"value":"# Interactive Coordinated Graphs \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(\"Los_Angeles_International_Airport_-_Passenger_Traffic_By_Terminal_20251106.csv\").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":"ReportTimeCount = {\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":1394,"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\n pArray = pArray.filter(item => {\n return item.ReportPeriod >= startyearRange && item.ReportPeriod <= endyearRange;\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":1383,"value":"html`

Year Range

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

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1387,"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":1347,"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"