Skip to main content
SimilarExport ZIP
100%

Scatter Plot for the Diamond Data Set

✓ Published0🌍 Public
KKevin Raj
Last edited Mar 18, 2023
Created on Mar 18, 2023

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

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

Diamonds

This scatter plot displays the relationship between diamond mass in carats and price in US dollars. The visualization uses a canvas overlay to draw semi-transparent blue circles that accumulate over time, creating a density effect where overlapping points become darker. A static SVG layer renders the grid and axes, with the x-axis labeled "Mass (carats)" and the y-axis labeled "Price (US$)". The code uses d3.tsv to load the data, d3.scaleLinear for both axes, and d3.axisLeft and d3.axisBottom for the grid and ticks. The data is shuffled and drawn progressively in batches of 500 using a d3.timer, with the canvas context employing a "multiply" composite operation to blend overlapping points.

Mmbostock
82% 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
81% match
Loading thumbnail…

Diamonds - d3fc version

This example visualizes 53,000 diamonds as a scatterplot of price against carat weight, rendered as red points on a Canvas. The d3fc library’s `seriesCanvasPoint` and `chartCartesian` components handle the plotting, with scales and extents from `d3.scaleLinear` and `fc.extentLinear`. Data from the diamonds.tsv file is batched into chunks of 500 points via a `d3.timer`, shuffling the dataset each frame to animate the progressive rendering. The chart re-renders responsively on window resize.

CColinEberhardt
81% match
Loading thumbnail…

Diamonds II

This scatterplot of 1,200 diamonds reveals the distribution of carat mass against price in US dollars, using two logarithmic axes to accommodate the data’s wide range. The code first draws a white-lined grid and labeled axes via `d3.axisLeft`, `d3.axisBottom`, and the `d3.scaleLog` scale. It then animates the points: `d3.shuffle` randomizes the data, and a `d3.timer` loop repeatedly pops 500 diamonds per frame, drawing each as a fixed-size rectangle on the Canvas via `context.fillRect` with a multiplicative blend mode.

Mmbostock
80% match
Loading thumbnail…

Density Contours II

This example visualizes the density of diamonds by carat and price, using colored contour paths to show point density. It plots the data from `diamonds.tsv` on logarithmic x and y axes, with a gradient from YlGnBu. The code uses `d3.contourDensity` for kernel density estimation, `d3.geoPath` to render the contours as SVG paths, and `d3.axisBottom` and `d3.axisLeft` for axes. The chart also includes labeled axis text for "Carats" and "Price (USD)".

MMorganhaoyu
78% match
Loading thumbnail…

Diamond Line Chart

This line chart shows the relationship between diamond carat weight and depth percentage, using a filtered subset of a diamonds dataset (every fifth point) loaded via `d3.csv`. The SVG visualization maps carat weight to the x-axis and depth percentage to a fixed 50–80 range on the y-axis, with a blue `d3.line` path connecting sorted data points. Gridlines from `d3.axisLeft` provide reference, while axis labels and a title are rendered as SVG text. The chart uses `d3.scaleLinear` for both scales and styled SVG elements for rendering.

Aamalli7433@gmail.com
77% match