Skip to main content
SimilarExport ZIP
100%

Clustered Interactive Force Layout v4

✓ Published0🌍 Public
AAjayyy
Last edited Apr 9, 2019
Created on Apr 9, 2019

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.

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>

mit Licensed

Similar vizzes

Loading thumbnail…

Clustered Interactive Force Layout v4

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.

TThanaporn-sk
93% match
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
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
91% 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
91% 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
85% match
Loading thumbnail…

Clustered Force Layout I

This clustered force layout visualizes 200 circles organized into 10 color-coded clusters, with each circle’s size varying by cluster. The d3.v3 force layout uses two custom forces: a cluster force that pulls circles toward the largest node of the same color, and a collide force using d3.geom.quadtree to prevent overlaps. Circle separation differs between same-color and different-color pairs. The SVG rendering updates circle positions on each tick event, with colors assigned via d3.scale.category10.

Mmbostock
84% 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
84% 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
84% match