Scatter Plot with gradient mask

100%

Scatter Plot with gradient mask

✓ Published2🌍 Public

Last edited May 3, 2023

Created on Apr 3, 2023

A full-screen scatter plot displays 2,000 random points individually as white circles, revealing a large red-to-blue linear gradient only through the circular gaps. The random point coordinates are generated with a custom `generateRandomPoints` function. The code applies the gradient to a single circle, then defines an SVG `<mask>` containing the white point circles to cut the gradient shape, demonstrating mask-based data visualization with d3 v6.

AI-generated description

Testing scatter plot masks.

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Scatter Plot with mask

This example displays a scatter plot of 200 randomly generated points, each rendered as a small black circle. A circular mask, centered on the canvas, is applied to the SVG group, revealing only the points that fall within its bounds. The visualization uses the D3.js library (v6) for random point generation and SVG rendering. A mask element with a white circle over a black rectangle defines the visible region, creating a spotlight effect on the data.

GGiuliaPassoni

86% match

Loading thumbnail…

Scatter Plot with Image Mask

This example shows a scatter plot transformed by an SVG image mask, where a circular region filled with a photographic image is revealed through a pattern of 1,000 randomly generated points. The points are generated using a custom `generateRandomPoints` function and drawn as white circles inside a mask, while a pattern element loads an external BBC news image. D3 v6 selections, the `mask` and `pattern` SVG elements, and radius-based circle rendering combine to create the effect, with the mask applied only to the central circle rather than the entire SVG canvas.

GGiuliaPassoni

84% match

Loading thumbnail…

Scatter Plot

This scatter plot displays ten randomly generated data points distributed across a two-dimensional plane, with each circle’s position determined by linear scales mapping the data range to pixel coordinates and its radius scaled proportionally. The visualization uses D3 v4 to create an SVG, with axes generated via `d3.axisBottom` and `d3.axisLeft`. The code applies `d3.scaleLinear` for both x and y positioning, `d3.scaleOrdinal` with `d3.schemeCategory20` for coloring each circle, and a separate radius scale. The data originates from `d3.range(10).map(Math.random)`, producing a simple, uncluttered chart that highlights basic scatter plot construction without external data files.

BBerengerCunillera

73% match

Loading thumbnail…

Untitled

This example demonstrates a generative scatterplot of 150 random data points. Each point is rendered as a circle with a random radius and position, mapped from a linear scale (`d3.scaleLinear`) applied to the data extent. The circles use a categorical color palette (`d3.scaleOrdinal` with `schemeCategory10`), overridden by random red and green stroke colors with variable opacity. The SVG is created via D3 v5 selection and attribute methods, with margins applied through a transform on a group element.

NNita

73% match

Loading thumbnail…

Scatterplot

A scatterplot displays 50 randomly generated data points, mapping each point’s x- and y-coordinates against linear scales with axis tick marks. The SVG rendering, created with D3.js, uses a linear scale for both axes and a third linear scale to map y-values to circle radius (ranging from 2 to 5 pixels). The visualization is animated, as the dataset is regenerated with new random values each time the page loads, and the circles are drawn without transitions between states. The code explicitly uses D3’s `d3.scale.linear` and `d3.svg.axis` APIs to construct the plot.

MMrajyalakshmi

73% match

Loading thumbnail…

Creating SVG Scatter Plot

This example demonstrates a dynamic SVG scatter plot built with D3 version 6, displaying randomly generated (x, y) data points as tan circles with varying radii and labeled coordinates. The visualization uses `d3.scaleLinear` for the x- and y-axes, `d3.scaleSqrt` for circle sizing, and `d3.axisBottom` and `d3.axisLeft` for the axes, all rendered through SVG elements appended to the body. The data array is created with a JavaScript loop and `Math.random`, with 20 points plotted across a full-window canvas, and each point includes a text label showing its coordinates.

DDasbach.EJ

73% match

Loading thumbnail…

D3: Scatterplot!

This interactive scatterplot displays 50 random data points on Cartesian axes, with each circle colored blue or red depending on whether its x-coordinate falls in the left or right half of the plot. Clicking the “Randomize” button generates a fresh dataset and smoothly animates the points, axes, and color updates over two seconds. The visualization is built with D3 3.5.5, using the `d3.scale.linear`, `d3.svg.axis`, and `transition().duration(2000)` APIs, and renders entirely as SVG. The code derives from Scott Murray’s examples, forked from earlier gists by anonymous and jalapic.

MMissHanJ

72% match

Loading thumbnail…

Distribution Scatter 1

This example visualizes a dynamic scatter plot of 500 values sampled from a normal distribution using `d3.randomNormal`. Vertical rectangles represent each data point, positioned along the x-axis and layered with low opacity. Every five seconds, the background and foreground rectangle colors transition to a new palette, cycling through six predefined color schemes. The visualization is built with D3 v6, rendered as SVG, and uses `transition.attr` to animate color changes over one-second durations.

WWaseem Medhat

72% match