Fork of D3 Scatterplot Sqrt

100%

Fork of D3 Scatterplot Sqrt

✓ Published0🌍 Public

Last edited Feb 13, 2026

Created on Feb 13, 2026

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.

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

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

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…

Fork of Pseudo Scatter Plot with D3

This example displays a scatter plot of seven circles positioned along a quadratic curve where each y-coordinate is the square of its x-coordinate (1, 4, 9, 16, 25, 36, 49). The visualization builds a full-viewport SVG via D3’s `select` and joined `join` operations, sizing it to the container’s dimensions, then renders the circles with `d3.r` set to 25 using the `renderCircles` function. The code separates setup and rendering into modular functions, importing data from a local `data.js` file that calculates coordinates with `Math.pow`.

Eethanrampersaud@gmail.com

82% match

Loading thumbnail…

Fork of D3 Axes Bottom

A scatter plot displays eleven data points on a 500 by 300 pixel SVG canvas. Each point's horizontal and vertical position is mapped using `d3.scaleLinear` and `d3.scaleSqrt`, with the circle radius also scaled by the y-value. Red text labels show each coordinate pair. The x-axis is rendered using `d3.axisBottom` and positioned at the bottom of the chart via a transform. The visualization demonstrates a basic D3 v4.5.0 example with static data, using SVG elements and animated rendering.

TTony Mai

82% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example shows a row of twenty circles evenly spaced across the screen, all centered vertically. The visualization uses D3.js version 6.7.0 to bind an array of data points to SVG circle elements, setting each circle’s x-coordinate, y-coordinate, and radius based on the data. The code pulls data from a simple generated array via `d3.range`, and positions the circles using the `select`, `selectAll`, and `join` methods. The page is styled with a hidden overflow and a custom Google font, though the dataset referenced in the README is not actually loaded in the running code.

Kkhalil-ryu

82% match

Loading thumbnail…

D3: A simple scatterplot with SVG

This example shows a simple scatterplot of ten data points, each rendered as an SVG circle and labeled with its coordinates. The chart uses the D3.js library (version 3) to programmatically build the visualization: first, the code creates an SVG canvas via `d3.select` and `.append("svg")`, then uses `.selectAll("circle").data(dataset).enter()` to map the 2D array of `[x, y]` values to circle positions and radius sizes. Red text labels are added in a similar declarative manner, with font styling applied through attribute setters. The raw coordinate pairs come from a hardcoded dataset, and the circle radius is computed from the data point’s height, creating a visual encoding of magnitude.

Nnikomc

82% match

Loading thumbnail…

Fork of Circles with D3

This example shows a simple scatterplot of circles arranged on a 2D plane, with each circle’s position and size determined by explicit data values. It demonstrates D3’s data join and method chaining to bind an array of circle objects to SVG `<circle>` elements, setting `cx`, `cy`, `r`, and `fill` attributes. The visualization uses D3 v7 with the `select` function and the `.data().join()` pattern for efficient rendering, while the canvas background and opacity styling enhance the overlap effect. Data is embedded directly in the code as a static array, serving as a foundation for later loading external data sources.

RRohithNaiduDevareddy@my.unt.edu

82% match