Fork of q3

100%

✓ Published0🌍 Public

Last edited Dec 20, 2023

Created on Dec 20, 2023

Forked from 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.

AI-generated description

A scatter plot of The Iris Dataset.

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

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

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

Fork of Scatter Plot

This interactive scatter plot visualizes temperature readings over time using React and D3 v7. The visualization employs scaleTime and scaleLinear to map timestamps and temperature values to SVG coordinates, while custom AxisBottom and AxisLeft components render the time-formatted x-axis and numeric y-axis. The data is loaded asynchronously from a CSV file containing weekly San Francisco temperature measurements using D3's csv utility. Each data point is rendered as a circle mark with a tooltip displaying the day of the week.

Nnkarinti

75% match

Loading thumbnail…

Fork of E20 Fork of Rendering Data with React & D3

A bar chart displays the volume of trips for various regions using React and D3. The visualization loads CSV data from a GitHub gist via `d3.csv`, then renders SVG rectangles with React components. The x-axis scale uses `d3.scaleLinear` to map trip volumes to pixel widths, while the y-axis uses `d3.scaleBand` to position each region’s bar. The chart is rendered inside a React app that manages data loading with state hooks and displays a loading message until the data arrives.

VVanessa

75% match

Loading thumbnail…

Fork of Fork of Refactored Bar Chart

This example visualizes CSS named colors as a scatterplot, showing the number of move-ins per day of the week from a CSV dataset. The chart uses React state to manage data loading and rendering, with D3 v6 functions like `scaleLinear` and `extent` to compute scales and domains. SVG circles render the aggregated data points, while custom React components handle axes and marks. The code includes formatting utilities like `format` and relies on `useEffect` and `useState` hooks for data fetching.

PPatrick Feldman

75% match

Loading thumbnail…

Fork of Fork of Working with Time

This scatter plot shows how temperatures in San Francisco vary over the course of a week, with time on the x-axis and temperature on the y-axis. The visualization loads data from a CSV file via the `d3.csv` function and renders SVG circles using React, with D3's `scaleTime` and `scaleLinear` managing the axes. Each circle includes a tooltip displaying the formatted date, while axis labels and ticks are generated by custom React components. The plot uses a clean, minimalist design with a Poppins font and muted colors.

RRoberto

74% match

Loading thumbnail…

Fork of D3 Git History Viz by Week

This visualization shows the history of D3.js commits, stacked by repository and aggregated into weekly time buckets. The data comes from a JSON file of all D3 commits and is rendered as an SVG area chart with randomly colored layers. Using d3.json for loading, d3.utcWeek for time aggregation, d3.stack and d3.area for the stacked layout, and d3.scaleTime and d3.scaleLinear for axes, the chart fills the full browser viewport.

MMaikal

74% match