Skip to main content
SimilarExport ZIP
100%

dex.js : Clustered Force

✓ Published0🌍 Public
PPatMartin
Last edited Aug 11, 2017
Created on Jan 14, 2017

This example uses dex.js and D3.js to display crime statistics as an interactive clustered force layout. The visualization groups nodes by crime type, using two custom forces—cluster and collide—to pull similar colors together while preventing overlapping. Data comes from crime2000.csv, interacting with forceSimulation to animate node positions. A separate legend highlights nodes on hover, while a configuration pane allows real-time adjustment of chart and legend settings.

AI-generated description

Clustered Force

This dex.js visual is based upon the clustered force layout which uses two custom forces 'cluster' and 'collide'.

  • Cluster : pushes like colored nodes toward one anohter.
  • Collide : pushes nodes away from each other when they near or collide with one another.

Here is the example on which the base visualization is based.

References

mit Licensed

Similar vizzes

Loading thumbnail…

dex.js : Clustered Force

A clustered force-directed layout shows 2015 baseball salaries by team and position from a CSV file. Using the dex.js library, this visualization places each player as a node, grouping them by team while position serves as a secondary clustering attribute. The chart is interactive, with a legend that highlights nodes on mouseover, and users can adjust the visualization through a configuration pane built with dex.ui.ConfigurationPane. This example effectively combines data filters with GUI controls for exploring the salary dataset.

PPatMartin
81% match
Loading thumbnail…

Clustered Force Layout III

This example shows a clustered force layout where 200 circles are grouped into 10 color-coded clusters, with node sizes varying by cluster. D3’s force layout initializes nodes near their cluster’s center on a circular path, then applies custom cluster and collision forces during each tick to converge on a stable arrangement. An entry transition uses `transition.attrTween` to grow circle radii from zero, delaying collision detection to reduce jitter. The visualization is rendered as animated SVG using D3 v3, with data generated randomly via `Math.random` and `d3.scale.category10` for colors.

Mmbostock
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
75% match
Loading thumbnail…

dex.js : Clustered Force

The dex.js Sunburst visualization organizes U.S. presidential data by party and home state, using a radial hierarchical layout with colored arcs and labels. It loads `presidents.csv` via `d3.csv`, then processes the data with a `dex.csv` object and renders the chart through `dex.charts.d3.Sunburst`. The example includes an interactive configuration pane, built with `dex.ui.ConfigurationPane`, for adjusting chart settings. D3.js powers the underlying rendering, while jQuery UI and Bootstrap handle the page layout and styling. The visualization focuses on displaying categorical relationships, with label placement and dynamic sizing noted as areas for future improvement.

PPatMartin
75% match
Loading thumbnail…

d3-force-cluster and d3-force-attract

This example demonstrates a force-directed graph of 200 colored nodes organized into 10 clusters, using both `d3.forceAttract` to pull nodes toward the center and `d3.forceCluster` to group them by color. The simulation runs with `d3.forceSimulation`, while collision strength ramps up over three seconds for a smooth transition. Nodes are rendered as SVG circles with a rainbow sequential color scale, and dragging updates node positions via `d3.drag`. The data is generated randomly with cluster-specific radii and initial angular placement.

AAlainRo
75% match
Loading thumbnail…

Cluster Force Layout IV

This example shows a force-directed cluster layout where 200 nodes are grouped into 10 distinct color-coded clusters, with circle size representing varying radii. The visualization initializes node positions using D3’s circle-packing layout (`d3.layout.pack`) before transitioning to a custom force layout (`d3.layout.force`) that applies clustering and collision avoidance. During the animated tick, the `cluster` function pulls nodes toward their cluster’s largest node, while the `collide` function uses a quadtree (`d3.geom.quadtree`) to prevent overlap, separating nodes by padding or cluster padding based on cluster membership. The SVG circles are rendered with smooth entrance transitions via `transition.attrTween`, which interpolates radius from zero to their final value.

AAlainRo
74% match
Loading thumbnail…

d3-force-cluster and d3-force-attract

Two hundred circles, shaded by cluster with a sequential rainbow scale, are positioned by a force simulation that combines `d3.forceAttract` to pull nodes toward the screen center and `d3.forceCluster` to group them into ten distinct clusters. The layout uses `d3.forceSimulation` with a custom `d3.forceCollide` whose strength ramps up over three seconds for a smooth transition. Each node is an SVG circle, rendered with `d3.drag` for interactive repositioning, while the tick handler updates the `cx`, `cy`, and `r` attributes. The data is generated randomly, with radii varying by cluster, and the example runs in the browser using D3 v4 and the `d3-force-attract` and `d3-force-cluster` plugins.

AAlainRo
74% 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
73% match