Scatterplot

100%

✓ Published0🌍 Public

Last edited Feb 10, 2016

Created on Feb 10, 2016

A scatterplot displays 50 randomly generated data points, mapping each point’s x- and y-coordinates against linear scales with axis tick marks. The SVG rendering, created with D3.js, uses a linear scale for both axes and a third linear scale to map y-values to circle radius (ranging from 2 to 5 pixels). The visualization is animated, as the dataset is regenerated with new random values each time the page loads, and the circles are drawn without transitions between states. The code explicitly uses D3’s `d3.scale.linear` and `d3.svg.axis` APIs to construct the plot.

AI-generated description

Rajyalakshmi Mukkamala

Visualization Implementation 3

####3 New things learnt through tutorials

1.Creating scales and axes

2.Selection interface

3.Transition interface

Similar vizzes

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

87% match

Loading thumbnail…

D3: Scatterplot!

This interactive scatterplot displays 50 random data points on Cartesian axes, with each circle colored blue or red depending on whether its x-coordinate falls in the left or right half of the plot. Clicking the “Randomize” button generates a fresh dataset and smoothly animates the points, axes, and color updates over two seconds. The visualization is built with D3 3.5.5, using the `d3.scale.linear`, `d3.svg.axis`, and `transition().duration(2000)` APIs, and renders entirely as SVG. The code derives from Scott Murray’s examples, forked from earlier gists by anonymous and jalapic.

MMissHanJ

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

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

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

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

83% match

Loading thumbnail…

Scatter Plot

This scatter plot displays 50 data points plotting area against value, with purple circles positioned using linear scales derived from the data's extent. The visualization demonstrates D3 axis customization, including tick lines that span the full chart dimensions, a rotated y-axis label, and a capitalized title. The code uses d3.csv to load the data and d3.scaleLinear, axisBottom, axisLeft, and extent functions from D3 v5, rendering everything as SVG elements within an 960x500 viewport.

Ccarlos157oliveira

82% match

Loading thumbnail…

Creating SVG Scatter Plot

This example demonstrates a dynamic SVG scatter plot built with D3 version 6, displaying randomly generated (x, y) data points as tan circles with varying radii and labeled coordinates. The visualization uses `d3.scaleLinear` for the x- and y-axes, `d3.scaleSqrt` for circle sizing, and `d3.axisBottom` and `d3.axisLeft` for the axes, all rendered through SVG elements appended to the body. The data array is created with a JavaScript loop and `Math.random`, with 20 points plotted across a full-window canvas, and each point includes a text label showing its coordinates.

DDasbach.EJ

82% match