Scatter Plot

100%

✓ Published0🌍 Public

Last edited Oct 17, 2017

Created on Oct 17, 2017

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.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/e457f01aff03929665a16abe81ee871c'>Scatter Plot</a>

mit Licensed

Similar vizzes

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

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

86% match

Loading thumbnail…

First Gist... More to come

This example shows a simple scatter plot of ten randomly generated data points, with axis lines spanning the full width and height of the chart. The visualization uses D3 v3 to create SVG circles positioned by linear scales, while the x- and y-axes are drawn using `d3.svg.axis` with tick sizes matching the chart dimensions. The data is created inline with `Math.random()`, and the plot is centered on the page with a gray background and red circles.

AAlexDaGr8

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

84% match

Loading thumbnail…

Untitled

A scatter plot displays 100 randomly generated points within a fixed coordinate space. Each point is rendered as a red circle on an SVG canvas, with axes labeled from 0 to 500. The visualization uses D3 v4’s `d3.scaleLinear` for scaling, `d3.axisBottom` and `d3.axisLeft` to draw the axes, and appends circles via `selectAll` and `enter`. The data is synthetic, created with `Math.random` in a loop.

Ssaipaidipalli

83% match

Loading thumbnail…

Untitled

This example shows a simple scatter plot of 100 randomly generated points, each positioned on a 500-by-500 pixel SVG canvas. The visualization uses D3.js v4 scales and axes to map linear domains to screen coordinates, with red circles drawn for each point. The code appends an SVG group to the page, translates it by a 40-pixel margin, and uses `d3.scaleLinear` for both the x- and y-axes, which are rendered via `d3.axisBottom` and `d3.axisLeft`. Data is created in a loop using `Math.random()`.

Ffay Alomar

83% match

Loading thumbnail…

D3: A simple scatterplot with SVG

This example shows a simple scatterplot of ten data points, each rendered as an SVG circle and labeled with its coordinates. The chart uses the D3.js library (version 3) to programmatically build the visualization: first, the code creates an SVG canvas via `d3.select` and `.append("svg")`, then uses `.selectAll("circle").data(dataset).enter()` to map the 2D array of `[x, y]` values to circle positions and radius sizes. Red text labels are added in a similar declarative manner, with font styling applied through attribute setters. The raw coordinate pairs come from a hardcoded dataset, and the circle radius is computed from the data point’s height, creating a visual encoding of magnitude.

Nnikomc

82% match

Loading thumbnail…

D3 tutorial

This example shows a scatterplot of 50 randomly generated data points, with each point’s position and radius mapped using linear scales. The visualization demonstrates how D3.js 3.5.5 creates axes and scales for dynamic data, drawing circles as SVG elements. The x- and y-axes are rendered using `d3.svg.axis`, with tick formatting applied as percentages on the x-axis. The code uses `d3.scale.linear` for positioning and radius, and the data is generated on the fly with `Math.random`. The tutorial source is from alignedleft.com, and the SVG rendering approach is explicit in the markup.

CChristosT

82% match