Skip to main content
SimilarExport ZIP
100%

Clustered Interactive Force Layout v4

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

An interactive force-directed network maps U.S. college majors as bubbles, sized by total enrollment and colored by category, from FiveThirtyEight data. Users can drag circles, which triggers a tooltip displaying the major name and its category. The simulation uses `d3.forceSimulation` with custom `clustering` and `collide` forces, rendering objects as SVG circles with smooth animated ticks.

AI-generated description

This clustered bubble force graph shows college majors by size, grouped by major category. This is an extension of Shan Carter's Clustered Force Layout 4.0. The data is was found in FiveThirtyEight's College Majors data set in their Data Repo.

forked from <a href='http://bl.ocks.org/mcgovey/'>mcgovey</a>'s block: <a href='http://bl.ocks.org/mcgovey/e59b5542b628fab4c356223b3505f0c0'>Clustered Interactive Force Layout v4</a>

forked from <a href='http://bl.ocks.org/sgcc/'>sgcc</a>'s block: <a href='http://bl.ocks.org/sgcc/251f79f68a502c1607c1a1ee3cae0f6f'>Clustered Interactive Force Layout v4</a>

forked from <a href='http://bl.ocks.org/lorenzopub/'>lorenzopub</a>'s block: <a href='http://bl.ocks.org/lorenzopub/6b8f23f0798c116e19f5fb7eb8dee302'>Clustered Interactive Force Layout v4</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Clustered Interactive Force Layout v4

This interactive force-directed graph visualizes college majors as sized bubbles, grouped by their category. The visualization uses a dataset from FiveThirtyEight, plotting each major’s student count as the bubble radius. Built with D3 v4, it employs `d3.forceSimulation` to cluster bubbles by major category, with custom force functions for collision and grouping. Users can drag individual bubbles, and hovering reveals a tooltip with the major’s name and category. The rendering is animated SVG, with circles drawn and repositioned on each simulation tick.

AAjayyy
94% match
Loading thumbnail…

Clustered Interactive Force Layout v4

This clustered force layout visualizes college major data from FiveThirtyEight, with circle size representing student enrollment and color grouping majors by category. Built with d3.v4, it uses `d3.forceSimulation` with custom clustering and collision forces, plus `d3.drag` for interactive repositioning. SVG circles display tooltips on hover showing the major name and category.

AAjayyy
93% 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
92% 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
92% 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
79% match
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
79% 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
79% match
Loading thumbnail…

Clustered Force Layout II

A clustered force layout renders 20 circles in four color-coded groups, with each group clustering around its largest member. The simulation uses a custom `cluster` force to pull nodes toward their group's anchor and a `collide` force with a quadtree to prevent overlapping circles. Built with D3 v3's `d3.layout.force`, circles are drawn as SVG elements with positions updated on each tick event. Custom gravity applies only to the largest node of each cluster, while other nodes repel based on inter-cluster padding.

SSpaceActuary
78% match