Skip to main content
SimilarExport ZIP
100%

Diamonds II

✓ Published0🌍 Public
Mmbostock
Last edited Mar 1, 2019
Created on Dec 24, 2015

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.

AI-generated description
gpl-3.0 Licensed

Similar vizzes

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
91% 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
85% 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
80% match
Loading thumbnail…

Density Contours II

This example demonstrates density estimation of diamond prices and weights using contour lines. The visualization shows the distribution of carat and price data points, with concentric filled contour regions colored on a yellow-green-blue sequential scale to represent point density. The code uses d3.contourDensity for density estimation and d3.geoPath to render the resulting contour polygons as SVG paths. Data is loaded from a TSV file, with logarithmic scales applied to both axes for carat and price.

Mmbostock
76% match
Loading thumbnail…

scatterplot2

This animated scatter plot displays phone data, alternating the x-axis between Price and SalesVolume every two seconds to reveal different relationships in the dataset. Built with D3.js v7, it uses SVG circles with a fixed radius and steelblue fill, positioned via linear scales derived from the CSV data. The chart is constructed through a custom `createScatterPlot` function that leverages D3's `selectAll` and `join` for efficient DOM updates, while `setInterval` drives the periodic column switching animation.

Ppilliprathimarani@my.unt.edu
67% match
Loading thumbnail…

pp Scatter Plot

This animated scatter plot visualizes the relationship between sales volume and either price or another numeric attribute for phone data, toggling the x-axis variable every two seconds. Built with D3 v7, it uses `d3.scaleLinear` for both axes and `d3.axisBottom`/`d3.axisLeft` for tick marks. The `setInterval` function re-binds the data, updating circle positions via `attr('cx')`. Data loads asynchronously from a CSV via `d3.csv`, rendered as an SVG with steelblue circles.

Ssaisathyapriya097@gmail.com
67% match
Loading thumbnail…

IV4

This block, forked from ChristosT’s VI3 example, presents two side-by-side D3.js visualizations: an animated scatterplot of gold prices (2005–2011) and a static stacked bar chart of U.S. wireless carrier market share. The scatterplot encodes time on the x-axis and price on the y-axis, with circles transitioning from the bottom to their mapped positions to emphasize the rising trend. The stacked bar chart uses area and color hue to represent the proportional shares of five carriers. Both are rendered with SVG and animation in d3.v3, with data from public sources and original code adapted from referenced examples.

CChristosT
67% match
Loading thumbnail…

Reusable for Assignment 7

This animated scatter plot uses a reusable D3 function to visualize product data, cycling through three quantitative x-axis variables—discount, unit cost, and unit price—against order quantity. The SVG visualization updates every two seconds, smoothly re-scaling the x-axis as new data is plotted. Built with D3 v6, it leverages `scaleLinear`, `extent`, and `axisBottom` for axes, while circles are rendered via data joins. Data is loaded from a CSV file using `csv` and parsed to convert numeric fields. The scatter plot is fully responsive, filling the entire viewport with configurable margins and point radius.

BBlueT
67% match