100%

Scatter plot

✓ Published0🌍 Public

Last edited Apr 10, 2018

Created on Apr 10, 2018

This scatter plot visualizes 80 data points with two numeric attributes: value (mapped to the x-axis) and size (mapped to both the y-axis and point radius). The visualization addresses the common problem of overlapping data points by using D3 v4's force layout with collision detection, which separates points that would otherwise obscure each other while preserving their correct positions on the x-axis. Points are rendered as SVG circles, with their horizontal position determined by the "value" attribute and vertical position initially set by "size", then adjusted by the force simulation to prevent overlapping.

AI-generated description

Scatter plot

using force layout and collision to prevent points overlapping

Solving a problem of overlapping data points with correct positioning on the x-axis

forked from <a href='http://bl.ocks.org/stain-win/'>stain-win</a>'s block: <a href='http://bl.ocks.org/stain-win/e0706ddf6a6c9fa99cdf15b6742bc781'>Scatter 1</a>

forked from <a href='http://bl.ocks.org/adamjanes/'>adamjanes</a>'s block: <a href='http://bl.ocks.org/adamjanes/8b78cb449e195427e3437b588ed958d7'>Scatter 1</a>

forked from <a href='http://bl.ocks.org/adamjanes/'>adamjanes</a>'s block: <a href='http://bl.ocks.org/adamjanes/773dd086b8e0acdfc5c90debef172f22'>Scatter 2</a>

forked from <a href='http://bl.ocks.org/adamjanes/'>adamjanes</a>'s block: <a href='http://bl.ocks.org/adamjanes/2633ab44477a896da5c660ef6b7adde9'>Scatter 3</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Scatter plot

This scatter plot encodes two quantitative variables per point: value on the x-axis and size as both the radius and y-axis position. The visualization solves the common problem of overlapping data points by using a D3 force layout with collision detection, which gently pushes points apart so they remain distinct while preserving their horizontal position. The data is rendered as SVG circles, with each point’s size mapped to the `size` field and its x position determined by `value`.

Aadamjanes

93% match

Loading thumbnail…

Scatter plot

This scatter plot uses a force simulation with collision detection to prevent overlapping circles, solving the problem of densely packed data points. Each circle's position on the x-axis maps to the `value` field, while its area encodes the `size` field. D3's force layout jitters the y-coordinates and applies collision constraints so that circles with identical or similar x-values separate vertically instead of stacking invisibly, preserving both the quantitative accuracy of the x-axis and the readability of the point distribution. Rendered with SVG and D3 v4.

Aadamjanes

91% match

Loading thumbnail…

Scatter

This example shows a scatterplot of 50 randomly generated data points, with each point’s position determined by its x and y values and its size scaled by the y value using a square-root scale. The visualization uses D3 v4 with an SVG rendering approach, employing `d3.scaleLinear` for the axes, `d3.scaleSqrt` for the point radii, and `d3.axisBottom` and `d3.axisLeft` to draw the axes. The dataset is created on the fly with `Math.random`, so the plot changes each time the page loads.

TTollyCoburn

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…

Scatter Plot

This scatter plot visualizes the relationship between two numeric variables, plotting each data point as a circle on a Cartesian plane. The chart uses the D3.js library to generate the axes and scale the data, while the `d3.select` and `d3.scaleLinear` APIs handle element creation and coordinate mapping. Each point’s position is derived from the input dataset, and the visualization updates dynamically when new data is passed to the main `update` function. The renderer draws only the SVG shapes, with no additional interactivity or color encoding applied to the points.

Hhaozhou334@gmail.com

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

81% match

Loading thumbnail…

Scatterplot

This scatterplot uses a force-directed layout to position circles along categorical axes for “Action” and “Fact,” with circle size encoding a numeric “Strength” value. The visualization applies d3.forceSimulation with charge, collision, and custom x/y forces to gently nudge overlapping points into place while allowing drag interaction. Rendered as SVG, it uses d3.scaleOrdinal with schemeCategory10 for coloring by type, plus axisBottom and axisLeft with gridlines. Data is loaded from a CSV using d3.csv, and labels appear on hover via circle titles.

KKuerzibe

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

81% match