Project

100%

✓ Published1🌍 Public

Last edited Jul 18, 2023

Created on Dec 14, 2020

Forked from Untitled

This interactive dashboard visualizes Taiwanese outbound traveler flows by country and month, using animated bar charts to show passenger volumes for specific airports or seaports. Users filter by year, transport mode (airplane or ship), and individual countries across continents, with a month slider and sorting options for distance or quantity. Built with React and D3.js, the project renders SVG bar charts that update dynamically, pulling data from a CSV file containing annual and monthly travel statistics for destinations across Asia, the Americas, Europe, and Oceania. The interface also provides a slider to scrub through months and a dropdown to sort results, enabling comparative analysis of travel patterns over time.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Iris Scatter Plot

This visualization displays monthly出入境 (immigration and emigration) passenger totals across 29 Taiwanese airports and harbors from 2015 onward, using a multi-line chart. Users toggle individual locations via checkboxes to add or remove their corresponding time-series lines, while a shared y-axis scales dynamically to the selected data range. The chart is built with D3 v5, using `d3.scaleTime` and `d3.line` for path generation, `d3.axisBottom` and `d3.axisLeft` for axes, and SVG rendering.

Ddrean205287

77% match

Loading thumbnail…

Flight Map

This interactive visualization shows the flow of travelers between five global regions across a 12-month period. The main map uses a Mercator projection with curved paths connecting regions, where stroke width represents the volume of travel, and hovering reveals exact numbers. A range slider allows selection of individual months. The visualization also includes a stacked area chart depicting time-series data for these regions. The code uses `d3.geoPath`, `d3.geoMercator`, `d3.scaleOrdinal`, and `d3.stack` within a React framework, rendering via SVG with animation.

Ttim310579

77% match

Loading thumbnail…

Taiwanese Internatiobal Trade

A bar chart displays Taiwan's total trade values for various countries across years, with a horizontal timeline above it. Users hover over circles representing years from 2001 to 2019 to update the chart, triggering a smooth transition as the bars and axes animate to reflect the selected year's data. The visualization uses D3.js v4 with SVG rendering, employing scales, axes, and transition methods such as `transition().duration()` to animate changes. The code loads CSV data from a GitHub raw URL and renders in React, though the primary implementation is in plain JavaScript.

Ssgalhamdani

76% match

Loading thumbnail…

airtraffic dashboard

This dashboard presents twelve interactive views of air traffic data, including a year-by-month passenger heatmap with a `d3.scaleSequential` Turbo color scale, an airline performance bar chart with tooltips, and trend, CO₂, and correlation analyses. Each chart is toggled via buttons that control CSS `display`. The visualizations use D3 v7 to fetch a CSV from a GitHub gist and render SVGs with `d3.axisBottom`, `d3.axisLeft`, and `d3.scaleBand`/`d3.scaleLinear`, styled with a dark cyan-on-black theme.

Cchengalvasharanya@gmail.com

74% match

Loading thumbnail…

Untitled

This interactive line chart visualizes monthly airline traffic between India and international destinations, comparing passenger numbers and freight volumes for selectable airlines. Two buttons switch the dataset between passenger and freight metrics, while a dropdown menu filters by airline name. The visualization uses D3.js v4 to load CSV data, render SVG paths for each metric (blue for inbound, red for outbound), and animate transitions when changing airlines. The data, sourced from a GitHub-hosted CSV file, is drawn using linear scales and d3.line path generators.

Jjs164

73% match

Loading thumbnail…

Bar chart of Port

This bar chart compares the total number of passengers entering and leaving various airports and harbors in Taiwan across different years. Users can switch between years, sort the bars by name or passenger count, and optionally remove Taoyuan Airport's data. The visualization uses D3.js v5 with SVG rendering, employing d3.scaleBand and d3.scaleLinear for positioning. Data is loaded from a CSV file via d3.csv and processed with array methods.

Hhenry8966

73% match

Loading thumbnail…

Untitled

This interactive line chart visualizes monthly passenger traffic between India and foreign airlines, with buttons to switch between passenger and freight data. The visualization uses D3.js (v4) to render SVG paths, with a dropdown menu to filter by airline name. Red and blue lines compare passenger counts from India versus to India, updated through transition animations. Data is loaded from a CSV file hosted on GitHub, and the chart includes axes, legends, and axis labels for months and passenger counts.

Jjs164

73% match

Loading thumbnail…

Month wise travellers

The visualization displays monthly passenger numbers traveling to India from various airlines, using horizontal bars of varying lengths to represent passenger counts. Built with D3.js v6, the bar chart maps the `PASSENGERS_TO_INDIA` field from a CSV dataset, scaling each bar’s width proportionally via `d3.scaleLinear`. Rendered as SVG rectangles with a fixed height of 40 pixels, the chart orders airlines by row, enabling quick comparison of traffic volumes across carriers. The interactive chart loads data asynchronously via `d3.csv`, fetching the airline traffic dataset from a GitHub repository.

Jjs164

73% match