Untitled

100%

✓ Published0🌍 Public

Last edited Mar 11, 2021

Created on Mar 11, 2021

This interactive line chart displays monthly passenger and freight traffic to and from India, aggregated by airline. Two buttons toggle between the passenger and freight datasets, while a dropdown menu selects which airline’s routes to display. Incoming traffic appears as a blue line, outgoing traffic as red, with transitions animating the path updates over 1000 milliseconds. The visualization is built with D3 v4, using `d3.line` for path generation, `d3.scaleLinear` for axes, and `transition.attrTween` internally via D3’s transition API. The data comes from a CSV file hosted on GitHub, rendered as SVG.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

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

96% 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

95% match

Loading thumbnail…

Untitled

This interactive line chart shows monthly passenger traffic to India for individual airlines, with a dropdown menu to switch between carriers. Each line traces the number of passengers across the 12 months, colored via a categorical scale. The visualization uses d3.v4 with an SVG path updated through a transition on the `d` attribute when the selection changes. Data is loaded from a remote CSV, and axes are generated with `d3.axisBottom` and `d3.axisLeft`. The color scheme comes from `d3-scale-chromatic`.

Jjs164

94% match

Loading thumbnail…

Untitled

This example shows monthly passenger traffic to India for multiple airlines, with each airline’s data drawn as a separate time-series line. The chart uses a time-scaled X axis for months and a linear Y axis for passenger counts, with all series overlaid in a single view. It loads CSV data from a GitHub repository and renders the lines as SVG paths using d3.line, d3.scaleTime, d3.scaleLinear, and d3.axisBottom/Left from D3 v4. The visualization highlights seasonal patterns and relative volumes across carriers.

Jjs164

88% 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

81% match

Loading thumbnail…

Untitled

This example displays a column chart of monthly air traffic between India and other countries, using passenger counts from a CSV file. The code loads the data with `d3.csv`, then builds a Google Visualization `DataTable` through `google.visualization.arrayToDataTable`, styling each bar with a custom fill and stroke color. The chart is rendered as a `google.visualization.ColumnChart` with a title and legend, while the underlying data source is a raw GitHub-hosted CSV.

Jjs164

80% match

Loading thumbnail…

Untitled

A choropleth map shows the total number of airline passengers traveling to and from India for 54 countries, using a cyan-to-red color scale to represent traveler counts. The visualization loads flight data from a CSV file via `d3.csv`, then passes it through JavaScript to a Google Charts GeoChart, which renders the geographic regions. The code also references D3 v4 and a TopoJSON file for US states, though the map itself is drawn by the Google visualization API.

Jjs164

80% match

Loading thumbnail…

Untitled

This interactive line chart displays the number of passengers for seven U.S. airlines from 2000 to 2015, with each airline represented by a colored line. Users can hover over a line to highlight it and dim the others, while moving the mouse over a line reveals the airline’s name at the top of the chart. The visualization uses d3.nest to group the data by airline, d3.scaleTime and d3.scaleLinear for axes, and d3.line for path generation. SVG rendering with CSS transitions animates opacity and stroke-width changes during hover interactions.

Pphemmati

78% match