Skip to main content
SimilarExport ZIP
100%

D3-Force: Split Categorical

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

A force-directed network of circles, sized by GDP and colored by continent, settles into a clustered layout. A "Toggle Split" button triggers a categorical separation: the `d3.scalePoint` scale maps each continent to a distinct x-coordinate, and an additional `d3.forceX` pushes nodes toward their group’s position, with labels emphasizing the grouping. The simulation uses `d3.forceSimulation`, `d3.forceManyBody`, and `d3.forceY` to manage repulsion and centering.

AI-generated description

forked from <a href='http://bl.ocks.org/cjhin/'>cjhin</a>'s block: <a href='http://bl.ocks.org/cjhin/077ecb0fd03f0abd576d39c70563a724'>D3-Force: Split Categorical</a>

mit Licensed

Similar vizzes

Loading thumbnail…

D3-Force: Split Categorical

A force-directed network of circles, sized by GDP and colored by continent, settles into a clustered layout. A "Toggle Split" button triggers a categorical separation: the `d3.scalePoint` scale maps each continent to a distinct x-coordinate, and an additional `d3.forceX` pushes nodes toward their group’s position, with labels emphasizing the grouping. The simulation uses `d3.forceSimulation`, `d3.forceManyBody`, and `d3.forceY` to manage repulsion and centering.

TThanaporn-sk
100% match
Loading thumbnail…

D3-Force: Split Categorical

D3-Force: Split Categorical uses a force-directed simulation to show GDP by continent, with circles colored by GDP value. It displays how categorical grouping (continent) and continuous scaling (GDP) combine in an interactive layout. The code uses d3.forceSimulation with forceX and forceY to push nodes toward categorical and linear positions, while a button toggles between grouped and split states. It relies on d3.scalePoint and d3.scaleLinear for positioning, d3.scaleSequential with interpolatePiYG for color encoding, and transitions to animate the split. Data comes from a CSV file with country, continent, and GDP values.

AAlexDaGr8
90% match
Loading thumbnail…

D3-Force: Split Categorical

This example visualizes GDP data for 15 countries, grouped by continent, as circles in a force-directed layout. A button toggles a categorical split, applying an invisible categorical axis so nodes align by continent using `d3.forceX` with a `d3.scalePoint` domain. The simulation uses `d3.forceSimulation` with `d3.forceManyBody` and centering forces, rendering to SVG circles and text labels. Data loads from a CSV via `d3.csv`.

FFrissAnalytics
90% match
Loading thumbnail…

D3-Force: Split Continuous

A force-directed graph of countries by GDP uses `d3.forceSimulation` with `d3.forceX` and `d3.forceManyBody` to position nodes on an SVG canvas. The "Toggle Split" button switches between a centered layout and one where nodes are pushed along a continuous linear scale mapping GDP values from left to right, with labels showing the domain endpoints. Data comes from a CSV file, and the simulation’s alpha and restart methods control the transition between states.

FFrissAnalytics
84% match
Loading thumbnail…

Force Simulation

This force-directed layout shows the relative GDP of countries as node size, colored by continent, with a gentle pull toward the center. The simulation uses `d3.forceSimulation` with `d3.forceX`, `d3.forceY`, `d3.forceCenter`, `d3.forceManyBody`, and `d3.forceCollide` to position circles, which are rendered as SVG. The chart reads country data from a CSV file, sorts nodes so larger ones appear behind, and supports dragging circles to interactively perturb the layout.

FFrissAnalytics
83% match
Loading thumbnail…

X and Y force splits

This example uses D3.js to visualize a dataset with multiple categorical dimensions. It shows how a force-directed layout can split nodes along the X and Y axes according to the data's "Location" and "System" attributes, grouping points into organized clusters. D3's `d3.forceSimulation` applies X and Y force constraints that align nodes to their respective category scales, while an interactive button toggles between grouped and force-split arrangements. The visualization renders as an SVG with animation, using `d3.scalePoint` and `d3.forceX`/`d3.forceY` to map the data. Node size encodes the "Count" value, and colors distinguish different nodes.

FFrissAnalytics
81% match
Loading thumbnail…

Force Simulation

This example visualizes country GDP data as a force-directed bubble chart. Each circle represents a country, with its radius proportional to GDP (capped at a minimum size) and its color indicating continent, using d3.scaleOrdinal for categorical coloring. The layout is computed by d3.forceSimulation, combining d3.forceX, d3.forceY, d3.forceManyBody, and d3.forceCollide forces to cluster and repel the nodes. Users can drag circles via d3.drag, temporarily fixing their positions during interaction. The data comes from a CSV file, and the SVG circles are positioned on each simulation tick.

TThanaporn-sk
80% match
Loading thumbnail…

Force Simulation

This example visualizes country GDP data as a force-directed bubble chart. Each circle represents a country, with its radius proportional to GDP (capped at a minimum size) and its color indicating continent, using d3.scaleOrdinal for categorical coloring. The layout is computed by d3.forceSimulation, combining d3.forceX, d3.forceY, d3.forceManyBody, and d3.forceCollide forces to cluster and repel the nodes. Users can drag circles via d3.drag, temporarily fixing their positions during interaction. The data comes from a CSV file, and the SVG circles are positioned on each simulation tick.

TThanaporn-sk
80% match