46. D3 Axes Random

100%

46. D3 Axes Random

✓ Published1🌍 Public

Last edited Feb 27, 2026

Created on Feb 9, 2026

This example demonstrates how D3.js v4.5.0 dynamically generates axes based on the minimum and maximum values of a randomized dataset. The code creates 50 random data points with varying ranges, then displays them as circles with radii scaled by their y-values, along with red text labels. Using `d3.scaleLinear` for x and y positions, `d3.scaleSqrt` for circle sizes, and `d3.axisBottom` and `d3.axisLeft`, the visualization renders in an SVG element with both axes showing five ticks each.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

47. D3 Axes No Labels

A scatterplot displays 50 randomly generated data points as circles, with their horizontal position mapped from a linear scale and their vertical position from a second linear scale. Circle area encodes the y-value through a square-root scale. The chart includes x and y axes with ticks, created via `d3.axisBottom` and `d3.axisLeft`, but all text labels are removed. The SVG is built dynamically with random data generated in JavaScript, using `d3.scaleLinear` and `d3.scaleSqrt` for coordinate and size mappings.

Aamakanju@nyit.edu

87% match

Loading thumbnail…

44. D3 Axes Clean

This example shows a scatter plot of coordinate pairs plotted with D3.js version 4.5.0. It renders circles and red text labels in an SVG canvas, using `d3.scaleLinear` for x and y axes and `d3.scaleSqrt` for circle radius sizing based on the y-value. The X-axis is customized with `d3.axisBottom` and `tickValues` to display only four specific tick marks (0, 100, 250, 600), demonstrating how to reduce axis clutter.

Aamakanju@nyit.edu

85% match

Loading thumbnail…

70. D3 Axes Dynamic

Clicking the text updates a scatterplot of 50 circles with new randomized data values. D3 version 4.5.0 is used to render the SVG, with d3.scaleLinear domains recomputed on each click and axes redrawn. The circles and axis lines transition over one second via d3.transition, showing how scales and axes rescale dynamically.

Aamakanju@nyit.edu

84% match

Loading thumbnail…

69. D3 Axes Static

A scatterplot displays 50 randomly generated points within an SVG canvas, which initially render as static circles. Clicking the text updates the dataset with new random values, and the points animate smoothly to their new positions via D3 transitions. The example uses `d3.scaleLinear` for axes and coordinate mapping, `d3.axisBottom` and `d3.axisLeft` for ticks, and `transition().duration(1000)` for the animation.

Aamakanju@nyit.edu

84% match

Loading thumbnail…

48. D3 Axes Format

This example demonstrates how to format axis tick labels as percentages in an SVG scatterplot using D3.js version 4.5.0. The code creates random data points, scales them with `d3.scaleLinear` and `d3.scaleSqrt`, and applies a custom percentage format via `d3.format(".1%")` to both the bottom and left axes using `d3.axisBottom` and `d3.axisLeft`. The axes are rendered as SVG groups, with circles representing the data.

Aamakanju@nyit.edu

83% match

Loading thumbnail…

42. D3 Axes

This example demonstrates how to add an axis to a scatter plot using D3.js version 4. A dataset of coordinate pairs is plotted as circles, with each circle’s size scaled by its y-value using a square-root scale. The visualization renders in SVG and includes a bottom axis created with `d3.axisBottom()`, while linear scales (`d3.scaleLinear`) map the data domain to the visual range. Red text labels display each point’s coordinates next to the circles.

Aamakanju@nyit.edu

82% match

Loading thumbnail…

45. D3 Axes Y

A scatterplot displays 11 data points as circles, with each point labeled by its x,y coordinates in red text. The visualization implements two linear scales for the x- and y-axes using `d3.scaleLinear()`, plus a square-root scale (`d3.scaleSqrt()`) to encode the y-values as circle radii. Vertical and horizontal axes are added using `d3.axisBottom()` and `d3.axisLeft()`, both with five ticks, and rendered as SVG groups. The chart uses a 500×300 SVG canvas with explicit padding.

Aamakanju@nyit.edu

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

82% match