Lily Qian D3.js hw1

100%

Lily Qian D3.js hw1

✓ Published0🌍 Public

Last edited May 4, 2015

Created on May 4, 2015

This interactive D3.js visualization shows flight connections between U.S. airports on a choropleth map, with a linked bar chart that displays the top 20 destinations for a selected airport. Clicking a purple airport circle filters the bar chart below, while the map itself uses Voronoi cells for hover interaction and arcs to show flight routes. Built with D3 v3, the code leverages `d3.geo.albers` for map projection, `topojson` for state boundaries, and a queue-based loader to asynchronously fetch airport, flight, and U.S. geographic data from raw GitHub sources.

AI-generated description

Similar vizzes

Loading thumbnail…

An interactive D3 map

An interactive D3 map visualizes U.S. airports and their flight routes, with arcs connecting a central hub to various destinations and animated circles marking each airport’s location. The map also displays country boundaries and a Voronoi diagram around airport cells, with hover tooltips revealing flight counts. Using d3.geoPath and geoAlbers projection, it renders SVG shapes from TopoJSON world data and CSV files, with circles animating via transition delays and ease functions.

Iinroadings

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

75% match

Loading thumbnail…

Untitled

An interactive map of U.S. airports shows nodes linked by flight routes. Users can toggle between a geographic layout, where airports are positioned by their longitude and latitude using the `d3.geoAlbersUsa` projection and `d3.geoPath` for state boundaries, and a force-directed layout. In the simulation mode, `d3.forceSimulation` with link, many-body charge, and center forces lets users drag nodes, with elastic transitions animating the repositioning. The visualization uses SVG elements for rendering and reads airport data from a JSON file.

Mmuzzheng

72% match

Loading thumbnail…

Major U.S. Destination Airports

This visualization maps major U.S. destination airports using a conic conformal projection rendered with d3.geoPath. Each flight destination appears as a semi-transparent red circle, with overlapping points creating darker regions that indicate higher flight density. State boundaries come from the U.S. Atlas TopoJSON, while flight data is loaded from a CSV containing latitude and longitude coordinates. The React application uses d3.geoAlbers with fitExtent to scale the map, and includes graticules and a sphere outline for geographic context.

JJosvin John

71% match

Loading thumbnail…

q2-2

An interactive network diagram displays flight routes among eight U.S. cities, with nodes colored by geographic region (East Coast, West Coast, South). The visualization uses D3 v7's `forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position nodes, while `d3.drag` enables user repositioning of cities. Links represent connections between city pairs, and a legend explains the regional color encoding.

Vvarshitreddy02@gmail.com

71% match

Loading thumbnail…

Assignment 4: Bar Chart with D3

This bar chart visualizes the top 10 airports ranked by total carrier delay minutes, using a logarithmic y-scale to accommodate wide value ranges. The visualization loads CSV data via `d3.csv`, aggregates values with `d3.rollup`, and renders SVG bars using `d3.scaleLog` and `d3.scaleBand`. Interactive tooltips appear on hover, displaying the airport code and delay count, while axes are generated with `d3.axisBottom` and `d3.axisLeft`.

Hhxu51@usfca.edu

70% match

Loading thumbnail…

Gist efb1c9f3f0a9092c420dfe4cef8def96

This visualization displays a map of US airports, using a data-driven approach to plot the locations of each airport across the country. It shows the geographic distribution of airports using an Albers USA projection, with the map boundaries rendered as a shaded path. The code relies on the D3.js library, specifically `d3.geoAlbersUsa`, `d3.geoPath`, and `d3.json` for loading the TopoJSON map data and JSON airport coordinates. The final output is an SVG image, generated from these fetched datasets and projected onto a 960 by 500 pixel canvas.

PPhilippe Rivière

70% match

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

70% match