Skip to main content
100%

Scatter plot

✓ Published0🌍 Public
Aadamjanes
Last edited Apr 10, 2018
Created on Apr 10, 2018

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

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>

mit Licensed

Similar vizzes

Loading thumbnail…

Scatter plot

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.

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

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
81% 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
80% 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
79% match
Loading thumbnail…

scatterplot

This scatterplot visualizes the relationship between two quantitative variables using a bubble chart, where each point’s size and color encode additional dimensions. Built with D3.js v3, it uses `d3.scale.linear` to map data values to x- and y-axes, `d3.svg.axis` for gridlines and ticks, and `d3.layout.pack` to position overlapping circles with force-based collision detection via `d3.forceSimulation`. The axes are labeled with text elements, and the chart includes a legend for size and color scales. Data is loaded from a CSV file and rendered as SVG shapes.

SSathviKankanala@my.unt.edu
79% match