Skip to main content
SimilarExport ZIP
100%

Group Clustering

✓ Published0🌍 Public
TThanaporn-sk
Last edited Mar 21, 2017
Created on Mar 21, 2017

This example demonstrates interactive group clustering of 12 data points, each representing an item with attributes like Location, Group, Class, and Type from a CSV file. Users can click toolbar buttons to split the circles by any categorical variable, causing them to separate into distinct clusters via force-directed simulation. The visualization uses d3.forceSimulation with collide, many-body, and x/y forces for positioning, while d3.drag enables manual repositioning of individual circles. The SVG rendering colors each node using d3.scaleOrdinal with a categorical color scheme, and selecting a circle highlights it by removing its fill.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/SpaceActuary/'>SpaceActuary</a>'s block: <a href='http://bl.ocks.org/SpaceActuary/d6b5ca8e5fb17842d652d0de21e88a05'>Group Clustering</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Group Clustering

This example visualizes clustering patterns in a small dataset where each circle represents an ID with categorical attributes like Location, Group, Class, and Type. Users can click toolbar buttons to group the bubbles by any of these categories, causing the force simulation to reposition clusters around labeled axis points, or return to a single central cluster with “All.” The interactive visualization uses d3.forceSimulation with collide, charge, and positional forces, plus d3.drag for moving individual circles. Data loads from a local CSV file, and circles render as SVG elements with ordinal color scaling.

SSpaceActuary
90% match
Loading thumbnail…

Untitled

A force-directed bubble chart visualizes a small dataset of 12 items, each with categorical attributes. The visualization initially displays all nodes as colored circles that can be dragged and selected. Buttons allow users to split the bubbles into separate clusters by Location, Group, Class, or Type, with titles indicating the active categories. Using D3 v4, the chart employs `d3.forceSimulation` with `d3.forceCollide`, `d3.forceManyBody`, `d3.forceX`, and `d3.forceY` to position the nodes. The SVG circles and text labels are rendered from a CSV file. Users can interactively drag and select individual bubbles to highlight them.

JJoker-tr
77% match
Loading thumbnail…

Clustered Interactive Force Layout v4

This interactive scatterplot visualizes the relative sizes of different college majors as circles, grouped into clusters by major category. Users can drag and drop the circles, which then settle into their respective clusters. The visualization uses the `d3.forceSimulation` API to manage the physics of the layout and repulsion, with custom forces for collision detection and cluster cohesion. The data is loaded from a CSV file containing college major statistics. Hovering over a circle displays a tooltip with the major’s name and its category.

TThanaporn-sk
75% match
Loading thumbnail…

Clustered Interactive Force Layout v4

This interactive scatterplot visualizes the relative sizes of different college majors as circles, grouped into clusters by major category. Users can drag and drop the circles, which then settle into their respective clusters. The visualization uses the `d3.forceSimulation` API to manage the physics of the layout and repulsion, with custom forces for collision detection and cluster cohesion. The data is loaded from a CSV file containing college major statistics. Hovering over a circle displays a tooltip with the major’s name and its category.

TThanaporn-sk
75% match
Loading thumbnail…

Cluster Force Layout IV

This example shows 200 circles grouped into 10 color-coded clusters, with node positions initialized using the d3.layout.pack circle-packing layout and then animated into a clustered force layout via d3.layout.force. The simulation applies a custom cluster function to pull same-color nodes together and a collide function using d3.geom.quadtree to resolve overlaps. Circles enter with a staggered radius transition via attrTween, and the force tick updates SVG circle positions. The data is generated randomly, with radii derived from a log distribution and clusters defined by a categorical color scale.

Mmbostock
75% match
Loading thumbnail…

Clustered Force Layout 4.0

This example shows a force-directed layout with 200 circles organized into 10 distinct clusters, each rendered in a different color from the `d3.schemeCategory20` palette. The circles are separated into their groups by the `clustering` custom force, while the `collide` function, which uses a quadtree, prevents overlap both within and between clusters. The visualization is built with D3 v4, uses the `d3.forceSimulation` API for physics, and renders via SVG. The `ticked` callback updates each circle’s `cx` and `cy` attributes as the simulation runs.

AAjayyy
75% match
Loading thumbnail…

Clustered Force Layout II

Ten clusters of colored circles drift and separate on a dark background, with each cluster gathering around its largest member while circles avoid overlapping. The visualization uses d3.layout.force with custom cluster and collide forces, leveraging d3.geom.quadtree for collision detection and d3.scale.category10 for colors. Data is procedurally generated in the browser, with 200 circles of varying radii across 10 groups, rendered as SVG elements.

Mmbostock
74% match
Loading thumbnail…

clustered force layout, static data

A clustered force layout visualizes static graph data, grouping nodes into ten distinct clusters by color. The visualization shows how similar nodes are drawn together, with circle size representing each node's radius value. Using D3.js v4, the implementation applies `d3.forceSimulation` with custom clustering and collision forces, and renders via SVG. The underlying graph data comes from a static JSON file that specifies each node's cluster assignment and radius.

TThanaporn-sk
74% match