48. D3 Axes Format

100%

48. D3 Axes Format

✓ Published1🌍 Public

Last edited Feb 26, 2026

Created on Feb 9, 2026

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.

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

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

84% match

Loading thumbnail…

Fork of D3 Axes - Tick Label Formatting

This example demonstrates how to format tick labels on a D3.js axis using custom tick formatting. A linear scale maps a domain of 0 to 100 to a pixel range, and an axis bottom is configured with increased tick padding and size. The axis is customized by limiting the number of ticks to four and applying a custom `tickFormat` function that appends a percent sign to each value. The resulting SVG renders the axis with labeled ticks showing the original data values with a “%” suffix.

SSubhendu Karmakar

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

84% match

Loading thumbnail…

46. D3 Axes Random

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.

Aamakanju@nyit.edu

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

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

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

81% match