Skip to main content
SimilarExport ZIP
100%

test

✓ Published0🌍 Public
SSchmittYannic
Last edited Aug 14, 2020
Created on Aug 14, 2020
Forked from first boxplot

This example shows a force-directed scatterplot of country data, where each circle represents a country and its horizontal position reflects a chosen numeric measure (like per-capita values). Buttons let the user switch between linear and log scales, animating the circles to their new positions. The visualization uses `d3.forceSimulation` with `forceX`, `forceY`, and `forceCollide` to position the circles, while `scaleLinear` and `scaleLog` define the axes. Circles are colored by continent, and hovering reveals a tooltip with details, plus a dashed vertical guide line. Rendering is SVG with transitions.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

scatter plot

A scatter plot displays population figures for ten countries, with each circle positioned along a linear population axis and a point scale for country names. The visualization uses D3 v5 APIs including `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft`, rendering SVG circles with a steelblue fill. Data comes from a CSV file, with populations multiplied by 1000 and formatted using `format('.3s')` to show billions. Gridlines extend across the plot, and axis labels are added via appended SVG text elements.

Llinkshady
78% match
Loading thumbnail…

D3 Stuff:Cars Scatterplot

This scatterplot visualizes country-level data, plotting each nation as a circle based on its coverage value against another measured metric. The D3.js v5 code loads data from a CSV file, uses linear scales to map values to x and y coordinates, and renders the circles within an SVG container. The visualization includes axes, axis labels, and a legend, with styling applied through CSS to control circle opacity and appearance.

Ddanjaruss
77% 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
77% match
Loading thumbnail…

Force Simulation with Voronoi Diagram

An interactive scatterplot maps national GDP and continent onto a force-directed layout of proportional circles. Each country is a node whose position balances simulated attraction, collision, and many-body repulsion forces, and a Voronoi diagram partitions the canvas into cells around the moving nodes. The visualization uses D3 v4’s `d3.forceSimulation`, `d3.forceManyBody`, `d3.forceCollide`, and `d3.voronoi` APIs, rendering SVG circles and paths. Users can drag nodes, which updates the simulation and recomputes the Voronoi tessellation in real time.

FFrissAnalytics
77% match
Loading thumbnail…

D3-Force: Split Categorical

This example visualizes GDP data for 15 countries, grouped by continent, as circles in a force-directed layout. A button toggles a categorical split, applying an invisible categorical axis so nodes align by continent using `d3.forceX` with a `d3.scalePoint` domain. The simulation uses `d3.forceSimulation` with `d3.forceManyBody` and centering forces, rendering to SVG circles and text labels. Data loads from a CSV via `d3.csv`.

FFrissAnalytics
77% match
Loading thumbnail…

Force Simulation

This force-directed layout shows the relative GDP of countries as node size, colored by continent, with a gentle pull toward the center. The simulation uses `d3.forceSimulation` with `d3.forceX`, `d3.forceY`, `d3.forceCenter`, `d3.forceManyBody`, and `d3.forceCollide` to position circles, which are rendered as SVG. The chart reads country data from a CSV file, sorts nodes so larger ones appear behind, and supports dragging circles to interactively perturb the layout.

FFrissAnalytics
77% match
Loading thumbnail…

Untitled

This visualization shows a force-directed bubble chart where each circle represents a country, with its size corresponding to GDP data loaded from a CSV file. The bubbles are color-coded by team and cluster toward the center of the screen. The code uses d3.forceSimulation with forceX, forceY, forceCenter, forceManyBody, and forceCollide to position the nodes, while d3.drag enables interactive dragging of individual circles. The SVG rendering fills each node with a color from a d3.scaleOrdinal palette, and the simulation updates circle positions on each tick.

SSitanshu Rupani
77% match
Loading thumbnail…

test 3

This example shows an interactive boxplot of a small dataset with two columns, allowing users to toggle between a linear and a log10 scale for the y-axis. The visualization uses D3 v5 within a React framework, rendering SVG elements with animated transitions. Key D3 APIs include `scaleLinear`, `scaleLog`, `scaleBand`, `quantile`, and axis components like `axisBottom` and `axisLeft`. The code computes quartiles and whiskers, and removes outlier circles when switching scales. A tooltip appears on hover over the boxplot.

SSchmittYannic
77% match