Infographic: Seamless Arrival at Da Nang Airport https://cdn.tailwindcss.com https://cdn.jsdelivr.net/npm/chart.js Goal: Organize -> Viz: Two parallel HTML/CSS flowcharts -> Justification: Transforms dense text lists into a clear, visual sequence, which is far easier to understand for a process-oriented task. Confirms NO SVG/Mermaid. – Transportation Options: Report’s fare data -> Goal: Compare -> Viz: Chart.js Bar Chart -> Justification: A bar chart is the most effective way to visually compare the costs of different categories, making the choice clearer for the user. Confirms NO SVG. – Pre-Arrival Essentials: Report’s preparation list -> Goal: Inform/Organize -> Viz: Icon-based grid layout -> Justification: More scannable and visually engaging than a simple bulleted list, allowing quick comprehension of key requirements. Confirms NO SVG. – Expedited Service Value: Report’s benefits -> Goal: Inform/Persuade -> Viz: “Big Number” statistic & Donut Chart -> Justification: The big number grabs attention for a key benefit (time saved), while the donut chart provides a simple visual for the problem (queues). Confirms NO SVG. –> body { font-family: ‘Inter’, sans-serif; background-color: #f0f2f5; } .chart-container { position: relative; width: 100%; max-width: 600px; margin-left: auto; margin-right: auto; height: 300px; max-height: 400px; } @media (min-width: 768px) { .chart-container { height: 350px; } } .flowchart-step { display: flex; align-items: center; position: relative; min-height: 80px; } .flowchart-step:not(:last-child)::after { content: ”; position: absolute; left: 24px; top: 64px; bottom: -16px; width: 2px; background-color: #e2e8f0; z-index: 1; } .flowchart-icon { z-index: 2; } const wrapLabel = (label) => { const maxLen = 16; if (label.length maxLen && currentLine.length > 0) { lines.push(currentLine); currentLine = word; } else { currentLine += (currentLine.length === 0 ? ” : ‘ ‘) + word; } } lines.push(currentLine); return lines; }; const tooltipTitleCallback = (tooltipItems) => { const item = tooltipItems[0]; let label = item.chart.data.labels[item.dataIndex]; if (Array.isArray(label)) { return label.join(‘ ‘); } else { return label; } }; const transportData = { labels: [‘Taxi’, ‘Ride-Hailing (Grab)’, [‘Motorbike’, ‘Taxi’], ‘Public Bus’], costs: [100000, 80000, 40000, 8000], }; const queueData = { labels: [‘Wait in Queue’, ‘Expedited Entry’], proportions: [85, 15], }; const transportChartCtx = document.getElementById(‘transportChart’).getContext(‘2d’); new Chart(transportChartCtx, { type: ‘bar’, data: { labels: transportData.labels.map(l => Array.isArray(l) ? l : wrapLabel(l)), datasets: [{ label: ‘Average Cost (VND)’, data: transportData.costs, backgroundColor: [‘#7a5195’, ‘#7a5195’, ‘#ef5675’, ‘#ef5675’], borderColor: ‘#003f5c’, borderWidth: 2, borderRadius: 5, }] }, options: { responsive: true, maintainAspectRatio: false, indexAxis: ‘y’, plugins: { legend: { display: false }, tooltip: { callbacks: { title: tooltipTitleCallback, label: (context) => `Approx. ${context.parsed.x.toLocaleString()} VND`, } } }, scales: { x: { ticks: { callback: (value) => `${value/1000}k VND` } } } } }); const queueChartCtx = document.getElementById(‘queueChart’).getContext(‘2d’); new Chart(queueChartCtx, { type: ‘doughnut’, data: { labels: queueData.labels, datasets: [{ data: queueData.proportions, backgroundColor: [‘#ef5675’, ‘#ffa600’], borderColor: ‘#003f5c’, borderWidth: 4, }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: ‘bottom’, labels: { color: ‘#cbd5e1’, // slate-300 font: { size: 14 } } }, tooltip: { callbacks: { title: tooltipTitleCallback, } } }, cutout: ‘60%’ } });