69. D3 Axes Static

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.

90% match

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.

87% 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.

71. D3 On HTML

Clicking the text updates a scatterplot with new random data. The example shows how to use D3's `on()` method with `transition` to change circle styling at the start and end of the animation, turning circles magenta and larger during the transition before returning them to black. It uses `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to render axes, with circles drawn as SVG elements and transitions animating their positions over 1000 milliseconds.

D3: Transitioning points to randomized values

A scatterplot displays 50 randomly generated points, each shifting to new random coordinates when the user clicks on the text. The visualization updates the positions of existing circles without adding or removing elements, using a smooth 1000-millisecond transition. The code builds the chart with d3.scaleLinear for the x and y axes, d3.axisBottom and d3.axisLeft for the ticks, and binds the data to SVG circle elements. The click handler regenerates the dataset, rescales the domains, and calls transition().attr() on the selected circles to animate the movement.

深深度碎片

32. D3 Scatterplot

Ten fixed data points appear as circles in an SVG scatterplot, with position determined by x/y coordinates from a two-dimensional array. The example uses D3 version 4.5.0 to select the body, append an SVG element, and bind the dataset through the data join pattern, setting circle attributes with anonymous functions. Static rendering shows the basic scatterplot construction without scales or axes.

72. D3 Chained Transitions

This example demonstrates chained transitions in D3.js, showing a scatterplot of 50 randomly generated data points that react to user interaction. Clicking on the text updates the dataset with new random values, causing both the circles and the axes to animate smoothly over time. The visualization uses `d3.scaleLinear` for coordinate mapping and `d3.axisBottom` and `d3.axisLeft` for the axes. The circles employ a two-stage transition: first turning magenta and enlarging, then returning to black at original size, while axis labels animate simultaneously.