Skip to main content
100%

uberplot

✓ Published0🌍 Public
SSladav
Last edited Dec 2, 2016
Created on Dec 1, 2016

This interactive scatterplot visualizes diamond characteristics, with circles positioned by x and y coordinates and colored by categorical color grade. Using the d3.js library, the visualization supports animated transitions when hovering over or clicking data points, temporarily highlighting circles and then reverting them to their original colors. Built with the uberplot helper library, the code defines layers, scales, and mark sets to map data dimensions to visual properties, and uses d3.scaleLinear, d3.scaleOrdinal, and d3.scaleQuantize for encoding.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the daily frequency of Uber rides in 2016, showing how the number of rides varies over time. The chart uses a D3 v4 line path to connect daily ride counts, with circles omitted and a hover tooltip available for interaction. It relies on `d3.csv`, `d3.nest`, `d3.timeParse`, and `d3.scaleTime` to process the dataset from the "My Uber Drives - 2016.csv" source. The SVG rendering includes styled axes and a subtitle, while the y-axis is fixed to a 0–15 range for ride counts.

YYouthBread
76% match
Loading thumbnail…

Reusable D3 Scatter Plot

This animated scatter plot visualizes diamond characteristics, mapping carat weight against price while coloring points by color grade via a reusable D3.js chart function. The visualization uses SVG rendering and a d3.scaleOrdinal color scale with d3.schemeCategory10. Buttons trigger play and pause controls, with points entering and updating through smooth transitions on the d3.axisBottom and d3.axisLeft. The code demonstrates a configurable scatterPlot builder pattern that computes scale domains using d3.extent and animates axis and point changes over one-second durations.

Aamalli7433@gmail.com
75% match
Loading thumbnail…

Diamond Scatter Plot

A scatter plot displays diamond price in US dollars on the x-axis against carat weight on the y-axis, with each dot colored by clarity grade and revealing a tooltip on hover. Built with D3 v7, the SVG chart uses `d3.scaleOrdinal` with `d3.schemeTableau10` for categorical clarity colors, `d3.axisBottom` and `d3.axisLeft` for labeled axes, and rendered grid lines. The visualization relies on a small hardcoded sample dataset of ten diamonds, with interactive hover states increasing dot radius and opacity.

Aamalli7433@gmail.com
74% 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
73% 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
71% match
Loading thumbnail…

Scatter Plot for the Diamond Data Set

This scatter plot visualizes the relationship between diamond carat and price, with each point colored by cut quality (Fair, Good, Very Good, Premium, Ideal). The code loads a CSV dataset from a GitHub gist and renders SVG circles using D3 v6’s `select`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. Axes labels for “Diamond_Carat” and “Diamond_Price” are appended as text elements, with a color mapping function defining per-cut hues.

KKevin Raj
71% match
Loading thumbnail…

Ass8_Question3

This scatter plot visualizes the relationship between carat and price in the Diamonds dataset, with each circle colored by the diamond’s cut quality using a D3 ordinal color scale. The visualization includes interactive tooltips that display cut, carat, and price on mouseover, and it employs D3 scales (scaleLinear), axes (axisLeft, axisBottom), and SVG rendering. Data is loaded asynchronously from a CSV hosted on GitHub, with the plot sizing to the full browser window.

AAbdul Kareem
71% 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
70% match