Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
DDasbach.EJ
Last edited Jun 30, 2021
Created on Jun 26, 2021
Forked from NYC 2

The example is a dual-panel visualization of airline route data loaded from a `routes.csv` file. One SVG panel displays a sorted horizontal bar chart showing the number of routes per airline, with the bar for Air China highlighted in a distinct color. The other panel shows a geographic map of airports, with routes presumably drawn between them. The bar chart is built using D3 v6's selection, scale API (`d3.scaleLinear`, `d3.scaleBand`), and data-binding methods, while the map panel relies on similar SVG construction without using any geo-projection library.

AI-generated description

SANDBOX

MIT Licensed

Similar vizzes

Loading thumbnail…

Airports!

The visualization shows the number of flight routes per airline as a horizontal bar chart, ranked by route count. Hovering over a bar highlights that airline and displays its flight routes on a world map using `d3.geoNaturalEarth1` projection with `d3.geoPath` for geographic rendering. The map draws airport connections as lines based on route data from the CSV file, while the bar chart uses `d3.scaleBand` and `d3.scaleLinear` for axes. The map background is rendered from GeoJSON country boundaries.

Aala-wahibi
77% match
Loading thumbnail…

NYC 2

This example visualizes airline routes in the New York City area, displaying a bar chart of route counts per airline alongside a map of airports. The page uses D3.js to load and parse the `routes.csv` data, aggregate routes by airline, and render the two SVG charts. The layout is styled with CSS flexbox, while the SVG elements are given a thin black border. The code is structured for the React framework but currently uses raw JavaScript within an HTML page.

DDasbach.EJ
76% match
Loading thumbnail…

Untitled

This visualization presents a map of US flight data, using a geospatial view to show airport locations and their connectivity. It displays two modes, “Busiest_Airports” and “All_Airports,” with interactive selections to explore different aspects of departures, arrivals, and delays. The map is rendered using D3 v3 with a `d3.geo.albersUsa` projection and `topojson` for state boundaries, while circles on the map represent individual airports. Additional bar charts and a custom legend (`d3.legend.js`) show delay statistics, and the visualization animates transitions when filters change. Data is sourced from RITA (Bureau of Transportation Statistics) for flights from 1987 to 2008.

Yyimingg7
76% match
Loading thumbnail…

Untitled

A multi-line chart displays the monthly average arrival delay for 19 airlines, with a dropdown menu to select a specific airline and a hover interaction that reveals the airline's delay rank and average delay time. The visualization uses D3 v7 to render an SVG, employing `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.line` with `transition` to animate path updates. Data is loaded from a CSV file via `d3.csv`.

WWenxi Zhang
76% match
Loading thumbnail…

Untitled

A simple bar chart displays two annual values from a CSV file, mapping dates on the x-axis and values on the y-axis. The chart uses D3 version 3 (loaded via CDN) with `d3.scale.ordinal`, `d3.svg.axis`, and `d3.time.format` for date parsing. Bars are rendered as SVG rectangles with steelblue fill. The axes include rotated date labels and a rotated y-axis title. The code demonstrates basic D3 data binding, scale setup, and SVG element creation within a fixed margin layout.

SSimon Hackbert
75% 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
75% match
Loading thumbnail…

Untitled

This example presents a bar chart that visualizes a dataset by mapping values to the height of vertical bars. The rendering uses the D3.js library, specifically leveraging its `d3.scale` for mapping data to screen coordinates and `d3.selectAll` to bind the data to rectangular SVG elements. The chart’s bars are drawn with SVG `rect` elements, with their dimensions and positions calculated through D3’s linear scaling functions. The visualization greets viewers with a static, aggregated view of the underlying data, without interactive or animated features.

YY-oringe
75% 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
75% match