Skip to main content
SimilarExport ZIP
100%

Scatterplot

✓ Published0🌍 Public
KKuerzibe
Last edited Jul 19, 2019
Created on Mar 12, 2019
Forked from 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.

AI-generated description

Test of force-directed Scatterplot in D3.js V5.

References:

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatterplot

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.

KKuerzibe
91% 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
80% 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
80% 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
80% match
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between two numeric variables from a CSV dataset, plotting each point with x and y coordinates. It uses D3 version 6 with an SVG rendering approach, employing `d3.scaleLinear` to map the data domains to pixel ranges and `d3.axisBottom` and `d3.axisLeft` for the axes. Data is loaded asynchronously via `d3.csv`, and circles are appended and joined to the data using `.join('circle')`. The plot is styled with a teal fill and includes axis labels for "Numbers" and "Amount."

Bbugfree55
79% 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
78% 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
78% 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
78% match