Skip to main content
SimilarExport ZIP
100%

D3 Scatterplot

✓ Published0🌍 Public
DDominic Fernandez
Last edited Feb 25, 2022
Created on Feb 19, 2022
Forked from HTML Starter

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.

AI-generated description
MIT Licensed

Similar vizzes

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

Bar Chart

This bar chart visualizes the total Uber fare amount per year, drawing on a CSV dataset of ride records. The visualization excludes 2008 data and sums the fares for each remaining year, displaying the results as a series of teal bars. The chart is rendered using the p5.js library, which loads the data with `loadTable`, processes it within the `draw` loop, and creates the visual elements. Custom functions like `kFormatter` are used to format large numbers with a "k" suffix on the y-axis, which is labeled "Fare Amount."

DDominic Fernandez
79% match
Loading thumbnail…

Heat Map

This heat map visualizes the average Uber fare amount for different passenger counts across the years 2009 to 2015, with color intensity indicating fare value (green shades for $9–13+) and a toggleable overlay that reveals exact dollar amounts. Built with the p5.js library, it loads a CSV dataset, aggregates fare averages per year and passenger count, and renders colored rectangles in a grid using the `rect` and `fill` functions. A legend on the right maps colors to fare ranges, while axis labels clarify that rows represent years and columns represent passenger counts.

DDominic Fernandez
77% 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
76% match
Loading thumbnail…

Dot Plot

This dot plot shows the number of Uber rides per year, with each circle representing a year’s total ride count positioned along a horizontal axis scaled by increments of 2,000 rides. The visualization aggregates data from a CSV file loaded via p5.js’s `loadTable` function, then uses `createCanvas` and `circle` to render the points. Year labels appear along a vertical axis, and ride counts are formatted using a custom `kFormatter` function for values above 1,000. The plot excludes 2008 data and displays results across a 625×625 pixel canvas.

DDominic Fernandez
76% match
Loading thumbnail…

reusable scatter plot

This reusable scatter plot displays age against fare price, with points colored by gender. The visualization alternates between two halves of the dataset every five seconds using `setInterval`, clearing the SVG and re-rendering with D3’s `selectAll` and `join` pattern. It uses `scaleLinear`, `scaleOrdinal`, `extent`, and `axisLeft`/`axisBottom` from D3 v6 to build axes and scales. The custom `scatterPlot` function exposes chainable methods for width, height, margins, and radius, while the data loads from a CSV URL via `d3.csv`.

Vvishnupriya eupuri
75% match
Loading thumbnail…

2024 Uber Data

This visualization presents raw, unprocessed ride data from Uber throughout 2024, displaying each trip's attributes such as date, time, vehicle type, pickup and drop locations, booking value, ride distance, and ratings. The code fetches a CSV file, parses it using `csvParse`, and converts specific quantitative fields—including `avg_vtat`, `booking_value`, and `ride_distance`—to numeric types. Built with the D3.js v7 library, the visualization uses a `select().join()` pattern to render the JSON representation of the dataset within a `<pre>` element, showing the structured data without additional graphical encoding.

BBen Trantanella
74% 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
74% match