Skip to main content
SimilarExport ZIP
100%

Long Trip Data (LGA-Airport as the destination, 2022 JUN)

✓ Published0🌍 Public
JJIAHAO LAI
Last edited Dec 15, 2022
Created on Dec 14, 2022
Forked from Customizing Axes

This interactive scatter plot shows the distribution of long-distance trips (15–50 miles) to LaGuardia Airport during June 2022, plotting trip distance against pickup hour. Hovering over a weekday in the color legend dims other points, highlighting trips from that specific day. Built with React and D3 v5, it uses `scaleLinear`, `scaleOrdinal`, and SVG circles with a `d3.csv` data source from a GitHub-hosted file.

AI-generated description

Interactive Scatter Plot for EDAV-Final-Project

Part-5 Interactive component in D3:

This scatter plot helps to look into the third research question in our project:
What is the most likely time period for a long distance ride?

The size of original data is too large to show on Vizhub, so we choose a subset of the whole data

Data:

Instruction:
This graph is able to show the distribution of long distance trips to LGA-Airport in individual day of the week. Hover over one of seven options on the "Day of week" color legend, then the trip data for a specific day of the week will show clearly.

MIT Licensed

Similar vizzes

Loading thumbnail…

Long Trip Data (LGA-Airport as the destination)

A scatter plot visualizes long trip data from LGA Airport, plotting trip distance on the x-axis against pickup hour on the y-axis, with points colored by weekday. Built with React and D3 v5, it uses `scaleLinear` for both axes, `scaleOrdinal` for color encoding, and SVG circles for marks. Hovering a legend item filters and highlights matching points while fading others, implemented through `useState` and conditional opacity.

JJIAHAO LAI
91% match
Loading thumbnail…

q3

This interactive scatter plot visualizes New York City taxi trip data, showing trip distance against pickup hour. Each circle represents a trip, colored by the day of the week, with a color legend that filters data on hover. The visualization uses React with D3 scales (`scaleLinear`, `scaleOrdinal`) to render SVG elements. The `csv` loader fetches data from a remote gist, while interactive hovering triggers opacity fading for non-selected categories.

UUmarani Vemula
73% match
Loading thumbnail…

Fork of q3

This interactive scatter plot visualizes the relationship between trip distance and pickup hour, with color encoding for the day of the week. The visualization uses React and D3.js v5 to render SVG circles, implementing an interactive legend that highlights a selected weekday by dimming all other data points. Using `d3.scaleLinear` for axes, `d3.scaleOrdinal` for categorical color mapping, and `d3.csv` for loading the dataset, the chart supports hover-based tooltips via SVG `<title>` elements and dynamic filtering of the rendered marks.

DDonald Bagwell
70% match
Loading thumbnail…

Assignment2_task3_scatterplot

This scatterplot visualizes Uber trip data, plotting trip distance on the x-axis against pickup hour on the y-axis, with points colored by weekday. The visualization uses React with D3 v5 scales and SVG rendering, featuring interactive hover highlighting that fades non-matching points and emphasizes the selected weekday category via a color legend. Data is loaded asynchronously from a CSV using d3.csv.

Ssreekarthanda@gmail.com
69% match
Loading thumbnail…

Major U.S. Airports by Departure Delay

This visualization maps major U.S. airports by departure delay using a geospatial scatter plot overlaid on state boundaries. Circle radius encodes the total departure delay at each airport, with larger circles indicating more significant delays. The map uses the `geoAlbersUsa` projection and `geoPath` from D3 v5 to render the state outlines, while React manages the component structure. Data comes from a Flight Delay Analysis Dataset, and the underlying geography uses the U.S. Atlas states-10m TopoJSON file.

JJosvin John
68% match
Loading thumbnail…

Logan Weather data with Interactive Color Legend

A scatter plot of weather and flight-delay data for Logan Airport from 2016-2018 visualizes the relationship between date, maximum temperature (TMAX), and average flight departure delay (DEP_DELAY). Interactive color legend circles for each year filter and highlight corresponding points when hovered, while unselected points fade to 20% opacity. The visualization uses React with D3 scales (`d3.scaleTime`, `d3.scaleLinear`, `d3.scaleOrdinal`) for axes, color encoding, and point sizing, rendering SVG circles with `circle` elements and tooltips via SVG `<title>` elements. Data is loaded as CSV from a GitHub gist.

Rrohame
68% 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
68% match
Loading thumbnail…

Major U.S. Airports based on Departure Delay grouped by time of day(includes Pan & Zoom, Hover highlighting of state, Tooltips & Brushing with React Performance Optimization)

This visualization combines a map of major U.S. airports with a histogram of flight departure delays, grouped by hour of the day. Airports appear as semi-transparent circles scaled by departure delay, with hover tooltips showing city and state, and states highlighting on hover. The map supports pan and zoom via d3.zoom, while the histogram uses d3.brushX to filter the map data. React useMemo optimizes rendering, and the map uses d3.geoAlbersUsa with U.S. state boundaries from us-atlas. Data comes from a CSV of flight delays.

JJosvin John
68% match