41. D3 Scale Plot Sqrt Scale

100%

41. D3 Scale Plot Sqrt Scale

✓ Published1🌍 Public

Last edited Feb 26, 2026

Created on Feb 9, 2026

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

33. D3 Scatterplot Sqrt

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.

Aamakanju@nyit.edu

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

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

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

87% match

Loading thumbnail…

39. D3 Scale Plot Big

A scatterplot maps a small dataset of eleven coordinate pairs onto an SVG canvas, with circle positions scaled by d3.scaleLinear functions for the x- and y-axes, and circle radii scaled by another linear scale based on the y-value. Each point is labeled with its original coordinates in red sans-serif text. The chart demonstrates basic scaling and data-binding patterns within D3 version 4.5.0, using standard selection and enter-append methods to generate SVG elements from the array. No axes, tooltips, or interactivity are included.

Aamakanju@nyit.edu

86% match

Loading thumbnail…

D3 Scale Plot Large

This example shows a scatterplot of 11 data points, each represented by a circle with a red text label showing its x,y coordinate. The visualization uses D3.js v3 scale functions (`d3.scaleLinear`) to map the data values to SVG circle positions and radii, with padding applied to the plotting area. The SVG rendering is created programmatically by appending circles and text elements to the document body, demonstrating how scales handle a large data value (600,150) without manual axis adjustment.

Aamakanju@nyit.edu

86% match

Loading thumbnail…

D3: Scaled scatterplot, using a square root scale for circle areas

This example shows a random dataset of 50 points rendered as circles in a scatterplot, with circle area scaled by the y-value using `d3.scaleSqrt`. The SVG chart includes linear x- and y-axes styled with teal strokes and bold labels. The code loads D3 v5 and uses `d3.scaleLinear` for positioning, `d3.axisBottom` and `d3.axisLeft` for ticks, and randomly generated numbers for the data. The `aScale` maps the y-domain to a radius range of 0 to 10, while padding keeps the axes visible. No labels are drawn, as the text elements are commented out.

Nnikomc

84% match

Loading thumbnail…

D3: Drawing Scale

This example demonstrates how D3’s linear and square-root scales translate raw data coordinates into pixel positions and circle radii. It plots an array of 11 `[x, y]` pairs as circles and red text labels on an SVG canvas. The code uses `d3.scaleLinear()` for both the x and y axes, and `d3.scaleSqrt()` for sizing the circles proportionally. The scales are configured with custom domains and output ranges, with padding applied to keep marks inside the 500×300 viewport. Data is rendered statically, with labels showing the original coordinate values.

MMarisa Tania

84% match