Scatterplot

100%

✓ Published1🌍 Public

Last edited Jul 19, 2019

Created on Mar 12, 2019

A force-directed scatterplot maps action and fact categories to x and y axes while jittering points via d3.forceSimulation with x, y, charge, and collision forces. Node strength determines circle radius, and color encodes type using d3.scaleOrdinal with schemeCategory10. Data loads from an external CSV, and SVG rendering uses d3.axisBottom and d3.axisLeft with tick lines creating a subtle grid.

AI-generated description

Test of force-directed Scatterplot based on http://bl.ocks.org/rpgove/10603627

MIT Licensed

Similar vizzes

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

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

79% match

Loading thumbnail…

Pseudo Scatter Plot

This example demonstrates a pseudo scatter plot using D3’s force simulation to arrange points in a loose, organic cluster rather than on a strict grid. The SVG scene contains no axis or scales; instead, `d3.forceSimulation` with collision and centering forces drives the layout, while circles are rendered via SVG. The code is a minimal React starter, embedding a single `<svg>` with hardcoded dimensions and no data file, so the visualization is purely a test of force-driven positioning. The styling and script structure remain bare, with no interaction or animation beyond the initial simulation tick.

Ddaria.daria

79% match

Loading thumbnail…

Scatter Plot

A simple scatter plot displays categorical labels on the vertical axis and numeric values on the horizontal axis, with circles sized at 18 pixels. The data comes from a CSV file, and the chart uses `d3.scaleLinear` for the x-axis and `d3.scalePoint` for the y-axis, with a tick format converting large numbers to abbreviated units. Axes are rendered via `d3.axisLeft` and `d3.axisBottom`, and the visualization is built using SVG elements selected through `d3.select`. The chart includes a title and axis labels styled via CSS.

CChocoOrange

78% match

Loading thumbnail…

Scatterplot

This scatterplot visualizes the relationship between AFRPN values on the x-axis and Type categories on the y-axis, with circle size encoding Strength. Using D3 v5, the code employs scalePoint and scaleOrdinal with schemeCategory10 for color mapping. The rendering uses SVG via d3.select, with axisBottom and axisLeft creating the gridlines. Data is loaded from a CSV file using d3.csv, and circles are appended dynamically in a ticked function, though no force simulation is actually applied.

KKuerzibe

78% match

Loading thumbnail…

Scatter Plot Chart

A scatter plot chart displays data points as symbols across an X and Y axis, with grid lines and categorical symbol types (circles, crosses, diamonds, squares, stars, triangles, and wyes) assigned via `d3.scaleOrdinal`. The D3.v4 code builds an SVG with axis ticks and a clipped body area, then animates symbol positioning using `transition` and `d3.symbol` for shape rendering. Data is sourced from a gist by MTClass, using the `d3.axisBottom` and `d3.axisLeft` APIs for axes.

MMTClass

77% match

Loading thumbnail…

Scatter Plot

A scatter plot displays dummy data from a CSV file, mapping the numeric `value` field to the x-axis and the categorical `index` field to the y-axis, with circle size fixed and fill color transitioning from yellow to green based on value. Using D3 v5, the code employs `d3.scaleLinear` for both x and y scales, `d3.scalePoint` for categorical positioning, and `d3.axisBottom` with a `~s` format tick label for the value axis. Circles are rendered as SVG elements with a color scale, while the chart includes axis labels and a title.

MMert Gürkan

76% match

Loading thumbnail…

Gist a7dcca17dd6f9275b5d6435007f6b9f0

A small scatterplot displays five manually defined points with x and y coordinates from a fixed data array. The visualization uses d3.forceSimulation to position the circles, applying a simple force layout that settles the nodes into place. Each point is rendered as a circle with a fill color and stroke, while the simulation drives subtle movement before stabilizing. The code does not include axes, labels, or interaction, focusing solely on the force-directed placement of the given data.

JJan0RodGar

76% match