Scatterplot basic

100%

Scatterplot basic

✓ Published0🌍 Public

Last edited Jan 28, 2018

Created on Jan 28, 2018

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.

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>

mit Licensed

Similar vizzes

Loading thumbnail…

Scatterplot basic

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`.

MMNoichl

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

83% match

Loading thumbnail…

scatterPlot

A scatter plot displays letters from a CSV file against their corresponding numeric values as circles. The chart uses D3 v5 with an SVG rendering, loading data via `d3.csv` and scaling positions with `scaleLinear` for the x-axis and `scalePoint` for the y-axis. Axes are generated using `axisBottom` and `axisLeft`, with tick lines spanning the plot area.

VVvgupta

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

82% match

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between two numeric variables from a CSV dataset, plotting each point with x and y coordinates. It uses D3 version 6 with an SVG rendering approach, employing `d3.scaleLinear` to map the data domains to pixel ranges and `d3.axisBottom` and `d3.axisLeft` for the axes. Data is loaded asynchronously via `d3.csv`, and circles are appended and joined to the data using `.join('circle')`. The plot is styled with a teal fill and includes axis labels for "Numbers" and "Amount."

Bbugfree55

81% match

Loading thumbnail…

Scatter plot

This example renders a scatter plot from CSV data fetched from a GitHub Gist via `fetch` and parsed with `d3.csvParse`. It automatically selects numeric columns for the x and y axes, with an optional categorical column mapped to colored dots. The visualization is drawn as an SVG using D3 v7, featuring labeled axes, a legend for categories when present, and a warm, minimalist styling theme. The code is designed to be adaptable, falling back to the first two numeric columns if no recognizable column names are found.

SSreedevi Itta

81% match

Loading thumbnail…

scatterplot using d3

A scatterplot displays name-number pairs from a local CSV file, mapping names to the y-axis and numeric values (scaled by 1000) to the x-axis using d3.scalePoint and d3.scaleLinear. Circles are rendered via SVG with fixed radius and semi-transparent steelblue fill. The code imports d3 functions like select, csv, and axisBottom, and includes a formatted x-axis with tick size and a custom text label, demonstrating basic D3 v6 data binding and margin-based layout.

RRITUZZ

80% match

Loading thumbnail…

Scatter Plot

A scatter plot displays dummy data from a CSV file, mapping the numeric `value` field to the x-axis and the categorical `index` field to the y-axis, with circle size fixed and fill color transitioning from yellow to green based on value. Using D3 v5, the code employs `d3.scaleLinear` for both x and y scales, `d3.scalePoint` for categorical positioning, and `d3.axisBottom` with a `~s` format tick label for the value axis. Circles are rendered as SVG elements with a color scale, while the chart includes axis labels and a title.

MMert Gürkan

80% match