Skip to main content
SimilarExport ZIP
100%

Clustered Interactive Force Layout v4

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

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.

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

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
100% match
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
92% 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
91% 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
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
80% 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
79% 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
79% 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
79% match