Assignment2_task3_scatterplot

100%

Assignment2_task3_scatterplot

✓ Published0🌍 Public

Last edited Jul 22, 2023

Created on Jul 21, 2023

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

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

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

73% match

Loading thumbnail…

D3 Heatmap

This heatmap visualizes the number of Uber rides per month and year, with months on the x-axis, years on the y-axis, and color intensity encoding ride counts. It uses d3.csv to load the dataset, d3.scaleBand for both axes, and d3.scaleSequential with a color interpolator to map counts to cell colors. The SVG is rendered with d3.axisBottom and d3.axisLeft, while cells are drawn as rects. Data is aggregated client-side by parsing timestamps into month-year pairs.

DDominic Fernandez

72% match

Loading thumbnail…

Assignment2_Task5

This interactive scatter plot lets users explore relationships between car features from a CSV dataset by selecting any column for the X and Y axes via dropdown menus. Using D3 v5, the visualization renders colored circles on an SVG canvas, with axes and labels that update dynamically. The implementation leverages `scaleLinear`, `axisBottom`, `axisLeft`, and an enter-update-merge pattern, while `transition.attr` animates the circles to their new positions over two seconds when the selected attributes change.

Rrikhitakoganti12

71% match

Loading thumbnail…

Homework 2

This scatterplot matrix visualizes relationships among four passenger statistics metrics—K Rank, Cond Parq1, Par Q1, and Par Top1Pc—for San Francisco Airport flights, with points colored by airline type (for-profit, private non-profit, or public). Built with D3.js v5 and rendered as SVG, the visualization uses d3.scaleLinear for axes, d3.axisBottom for tick marks, and individual scatterplot cells arranged in a grid to show pairwise correlations. The data comes from a CSV file containing airline performance metrics, and the plot includes hidden-point filtering via circle elements with fill-opacity.

Pphemmati

71% match