42. D3 Axes

100%

✓ Published1🌍 Public

Last edited Feb 26, 2026

Created on Feb 9, 2026

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

90% match

Loading thumbnail…

43. D3 Axes Bottom

A scatter plot displays eleven data points as circles with square-root-scaled radii, alongside red text labels showing each coordinate pair. The example emphasizes positioning the x-axis at the bottom of the SVG canvas rather than the default location. Using D3 v4.5.0, the code creates linear scales for x and y coordinates, applies `d3.axisBottom()` to generate the axis, and translates the axis group to the bottom edge with `svg.append("g").attr("transform", ...)`. Circle positions use the scaled values, demonstrating axis placement alongside standard scatter plot rendering.

Aamakanju@nyit.edu

90% match

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

86% match

Loading thumbnail…

D3: A simple, unstyled axis

This example demonstrates a basic scatterplot rendered as an SVG, with red data-point labels and axes that adopt a default, unstyled appearance. Using D3 v4, the code loads a hardcoded array of coordinate pairs and applies linear scales to map the data to a 500-by-300-pixel drawing area. The `d3.axisBottom` and `d3.axisLeft` functions generate the x- and y-axes, while circles are placed and labeled via D3’s `selectAll` and `append` chain. Data is presented without any custom styling rules, highlighting raw axis output.

深深度碎片

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

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

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

83% match