47. D3 Axes No Labels

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.

92% match

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.

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.

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.

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.

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.

86% match

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.

85% match

40. D3 Scale Plot Large

This example presents a scatterplot of eleven data points using D3.js version 4.5.0, rendered as SVG circles with red text labels. Each point’s x and y coordinates are mapped to the plot area through linear scales (`d3.scaleLinear`), while a third scale determines the circle radius based on the y-value. The chart is resized to a larger 500x300 pixel canvas with padding, and labels display the raw coordinate pairs alongside each point.