Skip to main content
SimilarExport ZIP
100%

q3

✓ Published1🌍 Public
UUmarani Vemula
Last edited Jul 17, 2023
Created on Jul 17, 2023

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.

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

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

ICE-6: Rendering Marks and Channels with React & D3

This interactive bar chart visualizes Uber pickups across New York City, displaying the top 15 dispatching base numbers by trip count. The visualization uses React for component management and D3 v5 for data loading, scales, and axes. Data is fetched via `d3.csv` from a GitHub gist URL, with a horizontal bar layout using `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis. Each bar is rendered as an SVG `<rect>` element, with gridlines and tick labels generated manually through SVG `<g>` and `<text>` elements. The chart features a green background and purple gridlines.

Ssreesushmav
76% match
Loading thumbnail…

D3 Scatterplot

This interactive D3 scatterplot visualizes cumulative Uber fare amounts per day from 2009 to 2015, using data from a Kaggle dataset. The SVG chart plots each date on the x-axis and total daily fares on the y-axis, with green circles marking individual points. The visualization uses `d3.csv` to load the raw data, `d3.scaleBand` for the time-based x-axis, and `d3.scaleLinear` for the fare amounts. Custom tick marks highlight the first date of each year, while gridlines and labeled axes improve readability.

DDominic Fernandez
74% match
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
73% 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
73% match
Loading thumbnail…

Cars Scatterplot

This visualization displays Citi Bike trip data from 2020, comparing trip durations at both the start and end stations across different months. A scatterplot shows the correlation between these two duration measurements, with an interactive slider to filter by month, while a bar chart below displays the number of trips starting from each station. The visualization uses D3 v6 scales, axes, and SVG shapes for both charts, with data loaded from a CSV file and parsed into numeric values.

MMillycc
73% match