D3-Force: Split Categorical

100%

D3-Force: Split Categorical

✓ Published0🌍 Public

Last edited Sep 4, 2018

Created on Apr 12, 2017

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`.

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

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

93% 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

87% 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

85% match

Loading thumbnail…

Force Simulation with Voronoi Diagram

An interactive scatterplot maps national GDP and continent onto a force-directed layout of proportional circles. Each country is a node whose position balances simulated attraction, collision, and many-body repulsion forces, and a Voronoi diagram partitions the canvas into cells around the moving nodes. The visualization uses D3 v4’s `d3.forceSimulation`, `d3.forceManyBody`, `d3.forceCollide`, and `d3.voronoi` APIs, rendering SVG circles and paths. Users can drag nodes, which updates the simulation and recomputes the Voronoi tessellation in real time.

FFrissAnalytics

79% 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

78% match

Loading thumbnail…

test

This example shows a force-directed scatterplot of country data, where each circle represents a country and its horizontal position reflects a chosen numeric measure (like per-capita values). Buttons let the user switch between linear and log scales, animating the circles to their new positions. The visualization uses `d3.forceSimulation` with `forceX`, `forceY`, and `forceCollide` to position the circles, while `scaleLinear` and `scaleLog` define the axes. Circles are colored by continent, and hovering reveals a tooltip with details, plus a dashed vertical guide line. Rendering is SVG with transitions.

SSchmittYannic

77% match

Loading thumbnail…

Untitled

This visualization shows a force-directed bubble chart where each circle represents a country, with its size corresponding to GDP data loaded from a CSV file. The bubbles are color-coded by team and cluster toward the center of the screen. The code uses d3.forceSimulation with forceX, forceY, forceCenter, forceManyBody, and forceCollide to position the nodes, while d3.drag enables interactive dragging of individual circles. The SVG rendering fills each node with a color from a d3.scaleOrdinal palette, and the simulation updates circle positions on each tick.

SSitanshu Rupani

75% match

Loading thumbnail…

D3 Country Bubble Chart

This bubble chart displays each country as a circle scaled by population, with hover tooltips showing the country name and population. Interactive radio buttons switch between grouping modes—combining all bubbles, clustering by continent, positioning at country centers, or sorting by population—and toggle circle fills between continent colors and country flag patterns. The visualization uses d3.forceSimulation with custom force configurations for each grouping, d3.scaleSqrt for radius scaling, and SVG patterns for flag fills. It loads data from a CSV file and animates transitions between the different layouts.

AAnnie Chang

74% match