Enclosing Force Circles

100%

Enclosing Force Circles

✓ Published0🌍 Public

Last edited Oct 1, 2018

Created on Sep 14, 2017

This example visualizes pay ratios at London universities, where each enclosed circle represents an institution and the dots inside it correspond to the ratio between the lowest and highest pay. The circles are arranged in a grid layout. The code uses `d3.forceSimulation` with `d3.forceX`, `d3.forceY`, and `d3.forceCollide` to position the dots, and `d3.packEnclose` to draw a larger circle around each cluster. Hovering over a circle reveals its numeric ratio, with colors mapped by a linear scale from cyan to magenta. The data comes from the `paygaps.js` file.

AI-generated description

Using d3.packEnclose to draw larger circles around circles forced towards a single point.

Visualising London university pay ratios. The number of dots in each enclosed circle indicates the ratio between the lowest and highest paid at each university. Hovering over each circle reveals the ratio.

forked from <a href='http://bl.ocks.org/tlfrd/'>tlfrd</a>'s block: <a href='http://bl.ocks.org/tlfrd/e64f7c1ae37b6f87a981f48b8aa0ff3b'>Enclosing Force Circles</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Enclosing Force Circles

This visualization depicts the pay ratio between the lowest and highest salaries at London universities. Each university is represented by a cluster of dots, with the number of dots indicating the ratio (e.g., 18:1), and the circle enclosing them color-coded from cyan to magenta based on that ratio. Hovering over a circle reveals the exact ratio and highlights the enclosure. The code uses `d3.forceSimulation` with `d3.forceX`, `d3.forceY`, and `d3.forceCollide` to arrange the dots, and `d3.packEnclose` to compute the enclosing circles around each cluster. Data is hardcoded in `paygaps.js`, and the SVG output includes interactive tooltips for each circle.

FFrissAnalytics

96% match

Loading thumbnail…

Scatterplot

A scatterplot of professors' salaries versus years since PhD, rendering each professor as a semi-transparent blue circle in an SVG. It shows the relationship between academic seniority and compensation using data from a CSV file. The visualization uses d3.scaleLinear for both axes, with d3.axisLeft and d3.axisBottom to add labeled axes, and includes a title and axis labels. Data is parsed from CSV, with numeric fields converted to numbers before plotting.

Tthomaslarkin7

68% match

Loading thumbnail…

Scatterplot

This scatterplot uses a force-directed layout to position circles along categorical axes for “Action” and “Fact,” with circle size encoding a numeric “Strength” value. The visualization applies d3.forceSimulation with charge, collision, and custom x/y forces to gently nudge overlapping points into place while allowing drag interaction. Rendered as SVG, it uses d3.scaleOrdinal with schemeCategory10 for coloring by type, plus axisBottom and axisLeft with gridlines. Data is loaded from a CSV using d3.csv, and labels appear on hover via circle titles.

KKuerzibe

68% match

Loading thumbnail…

Force Transition

A force-directed simulation arranges 100 circles into two distinct clusters, which switch positions when a button is clicked. The chart also includes a quantitative x-axis, making the clusters' locations measurable. Built with D3 v4, it uses `d3.forceSimulation` with `d3.forceX`, `d3.forceY`, and `d3.forceCollide` forces; clicking toggles the strength of the two horizontal forces, causing the groups to slide and swap sides. The simulation is rendered as SVG and animated on each tick, with the source code compiled from ES6 using the Babel browser library.

FFrissAnalytics

68% match

Loading thumbnail…

Scatter Plot

This scatter plot shows the Students to Staff Ratio for universities across different countries. It uses D3.js (version 7) with an SVG rendering approach to display each country as a red circle, positioned along a categorical x-axis for country names and a linear y-axis for the ratio values. The code loads data from a CSV file via a GitHub gist URL, and employs D3's `scaleBand` and `scaleLinear` functions to map the data coordinates, along with `d3.axisLeft` and `d3.axisBottom` to generate the axes.

Vvinodreddysagam929@gmail.com

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

68% match

Loading thumbnail…

Making an Interactive Pie Chart

This interactive pie chart visualizes university funding amounts, with each slice labeled and color-coded by institution. Built with D3.js v5, the chart uses `d3.pie` and `d3.arc` to generate the donut geometry and `d3.scaleOrdinal` with `d3-scale-chromatic` for slice colors. Hovering over a slice triggers a tooltip showing the percentage of total funding, calculated via `d3.sum` and `d3.event`. The data comes from a CSV file loaded asynchronously, and the visualization renders as SVG with hover opacity effects and rounded slice corners.

PPriyaEnuganti

68% match

Loading thumbnail…

Fork of D3 v5 Circle-Packing

This interactive circle-packing visualization displays the hierarchical structure of Fudan University’s graduate programs, organized by school and research direction. The D3 v5 code uses `d3.stratify` to convert CSV data into a hierarchy, `d3.pack` for circle layout, and a sequential magma color scale to indicate depth. Hovering highlights ancestor nodes, while leaf circles include clipped text labels. Rendering is done via SVG, with data loaded from `flare.csv`.

HHAORAN CHEN

67% match