Skip to main content
SimilarExport ZIP
100%

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

✓ Published2🌍 Public
Nnikomc
Last edited Mar 31, 2020
Created on Mar 31, 2020

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.

AI-generated description

Learning about scales with D3 (from Scott Murray's book).

MIT Licensed

Similar vizzes

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
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
84% match
Loading thumbnail…

D3 tutorial

This example shows a scatterplot of 50 randomly generated data points, with each point’s position and radius mapped using linear scales. The visualization demonstrates how D3.js 3.5.5 creates axes and scales for dynamic data, drawing circles as SVG elements. The x- and y-axes are rendered using `d3.svg.axis`, with tick formatting applied as percentages on the x-axis. The code uses `d3.scale.linear` for positioning and radius, and the data is generated on the fly with `Math.random`. The tutorial source is from alignedleft.com, and the SVG rendering approach is explicit in the markup.

CChristosT
83% match
Loading thumbnail…

D3 Scale Functions

This example demonstrates how D3 scale functions map input data values to visual output positions. It plots a set of numeric data points as circles along a horizontal axis, with each value labeled above its corresponding circle. The code uses `d3.scaleLinear()` to map the domain (0–10) to a pixel range, and renders the result as SVG elements. An axis is added using `d3.axisBottom()`, and the utility function `getScale` supports multiple scale types, including `scaleSqrt`, `scaleLog`, and `scaleBand`, though only linear is actively applied here.

SSubhendu Karmakar
80% 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
80% 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
79% 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
79% 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
79% match