Scatterplot basic

100%

Scatterplot basic

✓ Published0🌍 Public

Last edited Mar 23, 2018

Created on Mar 23, 2018

This example shows an interactive scatterplot of clustered data points, where users can brush a rectangular region to zoom into that area and double-click to zoom back out. As the view changes, the x and y axes smoothly transition to the new domain. Built with D3.js v4, it uses `d3.brush` for selection, `d3.scaleLinear` for axes, and SVG transitions to animate the rescaling of circles. The data comes from a CSV file containing x, y coordinates and cluster labels, with colors assigned via `d3.scaleOrdinal`.

AI-generated description

Scatter plot zoom of the brushed region. Double-click to zoom out.

forked from <a href='http://bl.ocks.org/EfratVil/'>EfratVil</a>'s block: <a href='http://bl.ocks.org/EfratVil/d956f19f2e56a05c31fb6583beccfda7'>Scatter plot with zoom</a>

forked from <a href='http://bl.ocks.org/MNoichl/'>MNoichl</a>'s block: <a href='http://bl.ocks.org/MNoichl/27f3efcb410ba77bdfde1f1f8890703f'>Scatterplot basic</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Scatterplot basic

This scatterplot displays clustered data from a CSV file, using color to distinguish clusters. Users can brush a region to zoom in, and double-click to reset the view. The visualization is built with D3 v4, using `d3.scaleLinear` for axes, `d3.brush` for selection, and SVG transitions for smooth animations. It renders data points as circles, with a legend for cluster identification.

MMNoichl

92% match

Loading thumbnail…

Scatter plot with zoom

This scatter plot visualizes 300 normally distributed data points and supports interactive zooming through a brushed region. Users can drag to select a rectangular area, which triggers a smooth animated transition that rescales the x and y axes to focus on the selected points. Double-clicking outside the brushed area resets the view to the full dataset. The implementation uses D3 v4’s `d3.brush` for selection handling, `d3.scaleLinear` for coordinate mapping, and `transition.attr` to animate the circles’ positions. The axes are updated via `d3.axisBottom` and `d3.axisLeft`, with a clip path preventing points from spilling outside the plotting area.

EEfratVil

88% match

Loading thumbnail…

Scatter plot brushing

This example demonstrates interactive brushing on a scatter plot, where users can drag a rectangular selection to highlight points within that region in orange while dimming others remain blue. The visualization uses 300 randomly generated data points from a normal distribution, rendered as SVG circles with axes. The brushing interaction is implemented using d3.brush, with the brushed event updating circle fills based on the selection bounds, while brushended resets the colors with a smooth transition when the brush is cleared. The code uses d3.scaleLinear for positioning and d3.axisBottom/axisLeft for axes.

EEfratVil

83% match

Loading thumbnail…

Scatterplot Tour

This example animates a scatterplot tour through three generated clusters, panning and zooming to focus on each cluster in sequence before returning to the full overview. The tour uses d3-zoom transitions to compute bounding boxes for each cluster and derive the appropriate zoom transform. Points are rendered to a Canvas for performance, while the axes are drawn as SVG using d3-axis, with the scales rescaled on each zoom event via `transform.rescaleX` and `transform.rescaleY`.

Mmbostock

81% match

Loading thumbnail…

Scatterplot Tour

An animated tour of a three-cluster scatterplot cycles through zoomed-in views of each cluster’s bounding box before returning to the full overview. The visualization uses d3.zoom transitions to animate between predefined transforms, rendering points as zero-length SVG strokes with round caps for performance. Data is generated randomly with d3.randomNormal, and cluster colors are assigned via d3.scaleOrdinal with d3.schemeCategory10.

FFilmonM

81% match

Loading thumbnail…

Untitled

This interactive scatter plot displays three clusters of points, colored by category, and allows users to brush a region to zoom into that area. The visualization uses D3 v4 to generate data from a normal distribution, render SVG circles, and implement brushing with `d3.brush`. Axes are drawn with `d3.axisTop` and `d3.axisRight`, and zoom animations are handled via `svg.transition()`. The code also references a `data.csv` file with population figures, though the chart itself visualizes synthetic points.

Pprincit

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

Scatter Plot

A simple scatter plot displays categorical labels on the vertical axis and numeric values on the horizontal axis, with circles sized at 18 pixels. The data comes from a CSV file, and the chart uses `d3.scaleLinear` for the x-axis and `d3.scalePoint` for the y-axis, with a tick format converting large numbers to abbreviated units. Axes are rendered via `d3.axisLeft` and `d3.axisBottom`, and the visualization is built using SVG elements selected through `d3.select`. The chart includes a title and axis labels styled via CSS.

CChocoOrange

80% match