D3 Scatterplot

100%

D3 Scatterplot

✓ Published0🌍 Public

Last edited Jul 30, 2014

Created on Jul 30, 2014

This D3.js v3 scatterplot displays eight data points as circles on an SVG canvas, with each point labeled by its raw coordinate values. The visualization maps the first and second values of each array to the x- and y-axes using linear scales with padding and nice rounding. Axes are generated with the `d3.svg.axis` API, positioned on the bottom and left. The data is embedded directly in the code as an array of coordinate pairs, and the circles use the `cx` and `cy` attributes for placement.

AI-generated description

Similar vizzes

Loading thumbnail…

D3 Scatterplot

This example visualizes a scatterplot of eight x-y coordinate pairs, with each point labeled by its numeric coordinates. It demonstrates how to map data values to screen positions using linear scales. The visualization is built with D3.js v3 and renders to SVG. It uses `d3.scale.linear` to create the x and y scales, `d3.svg.axis` to add axes, and binds data to circles and text elements for points and labels. The code defines axes with a bottom orientation and left orientation, and applies CSS styling for the axis lines and text.

GGerardoFurtado

86% match

Loading thumbnail…

simple scatterplot

This simple scatterplot displays seven data points on a Cartesian grid, with x-values ranging from 0 to 50 and y-values from 0 to 70. The visualization uses D3 v4’s `d3.scaleLinear` to map data coordinates to pixel positions, and `d3.axisBottom` and `d3.axisLeft` to render the axes. Circles are appended to an SVG canvas, with their radius and fill color varying per index. The data is hardcoded as an array of objects, and the axes are positioned using SVG `transform` attributes.

VVishwacorp

84% match

Loading thumbnail…

simple scatterplot

A simple scatterplot displays seven data points on an SVG canvas, with each point positioned according to its x and y coordinates from a hard-coded JavaScript array. The visualization uses D3 v4 to append an SVG element to the body and set its dimensions to 960 by 500 pixels. While the code initializes the scatterplot structure and data, the point-rendering logic is incomplete, leaving the circles unplotted and the chart unfinished.

SSkyBTW

84% match

Loading thumbnail…

simple scatterplot

A simple scatterplot displays seven data points with x-values between 14 and 39 and y-values between 22 and 61. The visualization uses D3 v4 to create SVG circles, with linear scales mapping the data domain to screen coordinates. The code defines x and y scales, generates axes with d3.axisBottom and d3.axisLeft, and appends circles with radii and fill colors that vary by index. The data is hardcoded as an array of objects, and the chart renders within an SVG canvas sized 960 by 500 pixels.

VVickyLouise

83% match

Loading thumbnail…

simple scatterplot

This example displays seven data points as a simple scatterplot, with x and y values plotted against a blank SVG canvas. The visualization is built using D3 v4, where the code appends an SVG element to the body with a fixed width and height, though it does not render any circles or axes for the points. The raw data is stored as an array of JavaScript objects, and the script prepares the SVG container but leaves the actual plotting incomplete. The source is a gist by YCCZhao, forked from an earlier block, using the d3 library with an SVG rendering approach.

YYCCZhao

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

D3: Drawing a Scatter Plot

This example displays a basic scatter plot of ten data points, each represented by a circle and a red text label showing its coordinates. The visualization uses D3.js v7 to append SVG circles and text elements to the document body. Circle radii are calculated as the square root of the difference between the plot height and the y-coordinate, creating a size variation tied to vertical position. The chart is drawn with a 500 by 100 pixel viewport, using the data array directly as the source for positioning.

MMarisa Tania

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

82% match