Pointing

100%

✓ Published0🌍 Public

Last edited Nov 11, 2010

Created on Nov 11, 2010

This example shows a scatterplot of 100 random points, with dot color scaled from orange to brown based on y-value and a label revealing each dot’s precise y-value upon hover. Using Protovis, the visualization employs `pv.Behavior.point()` on a root panel to track mouse movement and trigger `point` and `unpoint` events on individual dots. A singleton nested panel tracks an active state per dot, toggling label visibility via `anchorTarget().active()`. Random jitter is applied to x-positions, and axes are drawn with `pv.Rule` and `pv.Label` from linear scales.

AI-generated description

Similar vizzes

Loading thumbnail…

Large number of points

A scatterplot displays 50,000 generated points, with color and radius encoding each point’s position in the lower, core, or upper quartile range. Built with D3 v4, the visualization uses SVG circles and an animated transition to update the points when the user edits the quantile, color, or radius values. The x-axis maps the point index, while the y-axis shows the generated normal distribution values, with scales recalculated via the `d3.scaleLinear` and `d3.quantile` APIs.

CCJKraenzle

72% match

Loading thumbnail…

Psudo Scatter Plot

This example shows a sparse scatter plot with six circular points arranged diagonally across an SVG canvas. Each circle has a fixed radius and distinct x/y coordinates, creating a pseudo-random distribution that resembles a simple data visualization. The visualization is rendered using plain SVG elements—specifically `<circle>` and `<rect>` tags—within an HTML page. It uses React as the underlying framework, though the code is written as static markup without interactive features or data-binding logic. The white background and cleaned-up body styling highlight the simple, minimal approach to displaying categorical or numeric point data.

Ppanthabuddhi@gmail.com

72% match

Loading thumbnail…

Canvas Scatterplot

This example renders 20,000 randomly generated points as a Canvas scatterplot, with x, y, and radius values sampled from normal distributions. It demonstrates a color-picking technique for interaction: a hidden canvas draws each point in a unique RGB color, and the visible canvas draws them in steelblue. On mousemove, the code calls Canvas `getImageData` on the hidden canvas to identify the point under the cursor, then displays a tooltip with its coordinates and radius. It uses d3.scaleLinear for axes and d3.timer for a brief animation loop.

JJverma

71% match

Loading thumbnail…

Untitled

A scatter plot displays 100 randomly generated points within a fixed coordinate space. Each point is rendered as a red circle on an SVG canvas, with axes labeled from 0 to 500. The visualization uses D3 v4’s `d3.scaleLinear` for scaling, `d3.axisBottom` and `d3.axisLeft` to draw the axes, and appends circles via `selectAll` and `enter`. The data is synthetic, created with `Math.random` in a loop.

Ssaipaidipalli

71% match

Loading thumbnail…

Untitled

This example shows a simple scatter plot of 100 randomly generated points, each positioned on a 500-by-500 pixel SVG canvas. The visualization uses D3.js v4 scales and axes to map linear domains to screen coordinates, with red circles drawn for each point. The code appends an SVG group to the page, translates it by a 40-pixel margin, and uses `d3.scaleLinear` for both the x- and y-axes, which are rendered via `d3.axisBottom` and `d3.axisLeft`. Data is created in a loop using `Math.random()`.

Ffay Alomar

70% match

Loading thumbnail…

Gist a7dcca17dd6f9275b5d6435007f6b9f0

A small scatterplot displays five manually defined points with x and y coordinates from a fixed data array. The visualization uses d3.forceSimulation to position the circles, applying a simple force layout that settles the nodes into place. Each point is rendered as a circle with a fill color and stroke, while the simulation drives subtle movement before stabilizing. The code does not include axes, labels, or interaction, focusing solely on the force-directed placement of the given data.

JJan0RodGar

69% match

Loading thumbnail…

Icons on the side of a scatter plot

A scatter plot with eight colored dots moves from a vertical line to a two-axis layout, drawing curved paths behind each point. Each dot leaves a circular icon on the axis edge, showing how points transition between dimensional configurations. Built with d3.v4, the animation uses SVG transition methods on circles and paths to interpolate positions, axes, and curved arcs. The random data is generated inline, with a palette of ten colors and a fixed plot field.

PPatrick Wojda

68% 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

68% match