Skip to main content
SimilarExport ZIP
100%

Long Trip Data (LGA-Airport as the destination)

✓ Published1🌍 Public
JJIAHAO LAI
Last edited Dec 15, 2022
Created on Dec 15, 2022

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.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

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

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.

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

群像

A radial chart visualizes on-time performance for the five busiest US airports across the year, with each airport drawn as a distinct colored closed curve. Angular position encodes date while radius represents average departure delay in minutes. Hovering over the interactive color legend highlights the corresponding airport’s loop and fades the others. Built with React and D3 v5, it uses `d3.scaleTime`, `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.nest`, `d3.pointRadial`, and `d3.curveLinearClosed` to render SVG paths from CSV data on flight delays.

JJiaMing
71% match
Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes daily temperature readings from Logan Airport weather data collected between 2016 and 2018. Built with React and D3 v5, the visualization renders an SVG chart where users can switch between TMAX and TMIN values for the y-axis using ReactDropdown menus, while the x-axis displays dates scaled with d3.scaleTime. The d3.csv loading pipeline parses the raw data, and d3.extent determines the domain for both linear and time scales. Circle marks include native SVG title tooltips showing formatted dates.

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

Polished Scatter Plot with Menus

This interactive scatter plot visualizes USA flights on-time performance, showing relationships between days of the month and delay metrics. Users can select different y-axis attributes (DEP_DELAY, DEP_DEL15, ARR_DELAY, ARR_DEL15) via dropdown menus built with ReactDropdown. The visualization uses React with D3 scales (scaleTime, scaleLinear) to map data into SVG marks, with custom axis components rendering tick marks. Data is loaded from a CSV file using d3.csv, with each point rendered as a circle containing a title tooltip.

XXinting Yao
71% match