scatter

100%

✓ Published0🌍 Public

Last edited Sep 1, 2018

Created on Aug 28, 2018

This example presents an animated scatterplot comparing two datasets loaded from separate JavaScript files. Green and red circles represent positive and negative y-values, transitioning between the datasets every three seconds. Built with D3 v4, the visualization uses `d3.scaleLinear` for axes and `d3.transition` to animate circle positions and radii. An SVG line marks the zero baseline, with axis updates handled by `d3.axisTop` and `d3.axisLeft`.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

D3 Scatterplot (Animations)

This D3 scatterplot demonstrates animated transitions between datasets. The visualization initially renders 15 random data points as circles, with x- and y-axes scaled to the data’s domain. When a user clicks the text header, new random data replaces the old, and the circles smoothly transition to their updated positions while the axes rescale accordingly. The code uses d3.svg.axis for the axes and d3.selectAll("circle").transition() to animate the updates, with scales from d3.scale.linear.

BBenHeubl

82% match

Loading thumbnail…

Scatter Plot

A scatter plot displays individual data points positioned by two numeric variables, with each point rendered as a small circle. The visualization uses D3.js v6 and is built with a simple SVG container. The code applies the `d3.scaleLinear` function to map x- and y-values to pixel coordinates, then appends `circle` elements to the chart area. Axes are generated with `d3.axisBottom` and `d3.axisLeft`. The data is loaded from an external CSV file using `d3.csv`, and the plot updates dynamically once the data is parsed.

JJames Huang

81% match

Loading thumbnail…

Reusable scatter plot

This reusable scatter plot displays 200 randomly generated data points using D3.js v4, with interactive buttons that trigger animated transitions. The visualization initially renders normally distributed points as semi-transparent blue circles, while the "Change Data" button regenerates the dataset and smoothly transitions the circles to new positions with updated axes. The "Change Color" button toggles the circle fill between blue and red using D3's transition and ease functions. The example demonstrates reusable chart patterns with SVG rendering, including linear scales, axis generators, and data-binding techniques.

EEfratVil

81% match

Loading thumbnail…

template scatter animation

This example shows a scatter plot animation that cycles through three datasets, redrawing points along a diagonal line in red and then transitioning to blue. A timer updates the chart every two seconds, revealing a new series and clearing the previous one by setting an empty series first. Built with ECharts 4.1.0 and jQuery, it uses `setOption` with `animationDelay` and `animationEasingUpdate` to stagger point transitions, while the chart is initialized via `echarts.init` on a DOM container.

YYUTONG FENG

80% match

Loading thumbnail…

Scatter Plot Example

This scatter plot visualizes a dataset of x and y coordinates as colored points on a linear scale. The code uses D3.js v6 to create an SVG rendering with x and y axes, and colors each circle based on its index. The visualization demonstrates basic scatter plot construction with d3.scaleLinear for mapping data values to screen coordinates, and d3.axisBottom and d3.axisLeft for displaying the axes. Labels are added to both axes to indicate the plotted dimensions.

BBhavanaGIrni

80% match

Loading thumbnail…

ScatterPlot

This scatterplot uses D3 to display a set of points on an SVG canvas, with axes drawn via a linear scale. The code defines explicit margins and dimensions, then appends an SVG group to position the plot area. Each data point is rendered as a circle, though the dataset itself is not included in the visible code. The visualization focuses on showing the distribution of values across the x and y coordinates, with no additional encoding beyond position. The implementation relies on D3’s selection and scale APIs, following a standard margin-based layout pattern.

BBerengerCunillera

79% match

Loading thumbnail…

Scatter Plot

This scatter plot displays ten randomly generated data points distributed across a two-dimensional plane, with each circle’s position determined by linear scales mapping the data range to pixel coordinates and its radius scaled proportionally. The visualization uses D3 v4 to create an SVG, with axes generated via `d3.axisBottom` and `d3.axisLeft`. The code applies `d3.scaleLinear` for both x and y positioning, `d3.scaleOrdinal` with `d3.schemeCategory20` for coloring each circle, and a separate radius scale. The data originates from `d3.range(10).map(Math.random)`, producing a simple, uncluttered chart that highlights basic scatter plot construction without external data files.

BBerengerCunillera

79% match

Loading thumbnail…

Animated Reusable D3 Scatter Plot Black and White

This example displays the classic Iris dataset as an animated scatter plot, cycling through different x-axis variables every five seconds. The visualization builds a reusable D3 chart with a custom function that handles scales, axes, and circle elements. Circles enter with a growing radius transition and update their positions smoothly using `transition().duration(1000)` with staggered delays. The code uses `scaleLinear`, `axisLeft`, and `axisBottom` from D3 v6, rendering as SVG with black-and-white styling against a full-window canvas.

AAndre J Denais

78% match