33. D3 Scatterplot Sqrt

100%

33. D3 Scatterplot Sqrt

✓ Published3🌍 Public

Last edited Feb 13, 2026

Created on Feb 9, 2026

A scatterplot displays ten data points on a 500-by-100 SVG canvas, with each circle positioned according to its x and y coordinates. The circle radius is computed as the square root of the difference between the canvas height and the y-value, creating larger points toward the bottom. Built with D3.js version 4.5.0, the visualization uses the `selectAll`, `data`, and `enter` pattern to bind the dataset and append circles, setting the `cx`, `cy`, and `r` attributes through anonymous functions.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 Scatterplot Sqrt

This D3.js scatterplot displays ten data points as circles on a 500 by 100 SVG canvas, with each point's x and y coordinates mapped directly to its array values. The circle radius is determined by applying a square root transformation to the distance from the top of the chart, making higher points larger. The visualization uses d3.select and data joins to bind the dataset to circle elements, with attribute functions setting cx, cy, and r for each point.

Yyinyiwen3589@gmail.com

90% match

Loading thumbnail…

41. D3 Scale Plot Sqrt Scale

A scatterplot displays eleven data points as circles, with a square root scale determining circle area based on the y-value. The visualization uses D3 v4.5.0 with `d3.scaleLinear` for x and y positioning and `d3.scaleSqrt` for radius mapping. Each circle includes a red text label showing its original coordinates. The SVG-rendered chart demonstrates how this scale creates proportionally smaller circles for lower values.

Aamakanju@nyit.edu

89% match

Loading thumbnail…

32. D3 Scatterplot

Ten fixed data points appear as circles in an SVG scatterplot, with position determined by x/y coordinates from a two-dimensional array. The example uses D3 version 4.5.0 to select the body, append an SVG element, and bind the dataset through the data join pattern, setting circle attributes with anonymous functions. Static rendering shows the basic scatterplot construction without scales or axes.

Aamakanju@nyit.edu

86% match

Loading thumbnail…

39. D3 Scale Plot Radii

A scatterplot displays ten data points as circles with adjusted radii, each labeled with its coordinate pair. The plot uses D3.js version 4.5.0 scaleLinear functions to map x and y values to screen positions, while a third scale maps the second coordinate to circle radius between 2 and 5 pixels. The SVG visualization renders with red text labels and sans-serif font, demonstrating how D3 scales control both position and size.

Aamakanju@nyit.edu

85% match

Loading thumbnail…

36. D3 Scale Plot

A scatterplot positions ten data points as circles on an SVG canvas using linear scales. The `d3.scaleLinear()` API maps the dataset’s x- and y-value domains to pixel ranges of 500 by 100, while circle radii derive from the square root of the height minus each y-value. Red text labels display the original coordinate pairs.

Aamakanju@nyit.edu

84% match

Loading thumbnail…

40. D3 Scale Plot Large

This example presents a scatterplot of eleven data points using D3.js version 4.5.0, rendered as SVG circles with red text labels. Each point’s x and y coordinates are mapped to the plot area through linear scales (`d3.scaleLinear`), while a third scale determines the circle radius based on the y-value. The chart is resized to a larger 500x300 pixel canvas with padding, and labels display the raw coordinate pairs alongside each point.

Aamakanju@nyit.edu

84% match

Loading thumbnail…

D3: Drawing a Scatter Plot

This example displays a basic scatter plot of ten data points, each represented by a circle and a red text label showing its coordinates. The visualization uses D3.js v7 to append SVG circles and text elements to the document body. Circle radii are calculated as the square root of the difference between the plot height and the y-coordinate, creating a size variation tied to vertical position. The chart is drawn with a 500 by 100 pixel viewport, using the data array directly as the source for positioning.

MMarisa Tania

83% match

Loading thumbnail…

34. D3 Scatterplot Labels

This example shows a simple D3 scatterplot that displays each point’s coordinate values as red text labels directly beside the corresponding circles. The code uses a fixed dataset of ten [x, y] pairs and an SVG rendering approach, with d3.select and data joins to append both circle and text elements. The circles’ radii are calculated as the square root of the height minus the y-coordinate, while the labels reveal the raw data values in an 11-pixel sans-serif font. The visualization is static, with no animation or interactive behavior.

Aamakanju@nyit.edu

83% match