Enclosing Force Circles

100%

Enclosing Force Circles

✓ Published0🌍 Public

Last edited Aug 17, 2017

Created on Aug 17, 2017

The visualization displays pay ratios at London universities, where each circle’s size and color encode the ratio between highest and lowest salaries. Dots inside each circle represent the ratio value, with hover interactions revealing the exact ratio and adjusting opacity. Built with D3 v4, the code uses `d3.forceSimulation` for positioning dots and `d3.packEnclose` to compute enclosing circles. Data from `paygaps.js` lists institutional salary figures, rendered as SVG with interactive hover states.

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

95% match

Loading thumbnail…

Enclosing Force Circles

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.

FFrissAnalytics

94% match

Loading thumbnail…

Lollipop Chart

This lollipop chart compares the yearly pay gap between the lowest, median, and highest paid employees at five universities. Hovering over circles displays the specific salary values. The visualization uses D3 v4 with SVG rendering, employing `d3.scaleBand` for categorical y-axis positioning, `d3.scaleLinear` for the salary x-axis, and `d3.line` generators for the connecting stems and grid lines.

TThanaporn-sk

75% match

Loading thumbnail…

Fork of Circles with D3

This visualization presents salary data as a heatmap, using color intensity on a linear scale from light gray to blue to represent salary amounts in US dollars across job titles and company sizes. The SVG chart employs D3 v7 with `scaleBand` for the categorical axes and `scaleLinear` for the color mapping. Hovering over individual rectangles triggers a tooltip displaying the exact salary value, while a legend with axis ticks and color rectangles provides a visual reference for the salary scale.

MMonish Galla

75% match

Loading thumbnail…

Lollipop Chart

A lollipop chart compares the lowest, median, and highest yearly salaries across five UK universities, with each university’s salary range drawn as a horizontal line between green and magenta circles. The visualization uses d3.v4 with SVG rendering, employing d3.scaleBand for the categorical y-axis, d3.scaleLinear for the numeric x-axis, and d3.axisLeft and d3.axisTop for tick marks. Tooltips appear on circle hover via mouseover and mouseout events, revealing the exact salary values.

TThanaporn-sk

73% match

Loading thumbnail…

Fork of Fork of Circles with D3

This bubble chart visualizes the relationship between salary and employee residence place, with bubble size representing population and color indicating job title. It is rendered as an SVG using D3 v7, employing `d3.scaleLinear` for axes, `d3.scaleSqrt` for radius encoding, and `d3.scaleOrdinal` with `d3.schemeCategory10` for categorical coloring. The chart includes interactive tooltips on circle hover, axis labels, and a categorical legend. Data comes from merged JSON containing salary, population, and job title information.

Ssanjanadadi19@gmail.com

71% match

Loading thumbnail…

Salary scatter plot

This scatter plot displays individual member salaries as yellow circles, with a single dark blue circle representing the current user's salary for comparison. The y-axis shows salary amounts in dollars, while the x-axis positions are randomized. When hovering over a circle, it enlarges, changes color, and displays a yellow tooltip with the exact salary value. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleLinear` for scales, `d3.axisLeft` for the y-axis, and event handlers for mouse interactions, with data sourced from a JSON array.

FFernando Guillen

71% match

Loading thumbnail…

Fork of first

This visualization compares early career pay against mid career pay for the top eight universities by mid-career salary, with circle size representing absolute salary growth and color encoding the university’s state. Data is loaded as CSV from a GitHub repository via `d3.csv`, then filtered, sorted, and sliced. The SVG chart uses `d3.scaleLinear` for both axes, `d3.scaleSqrt` for bubble size, and `d3.scaleOrdinal` for categorical state colors, rendered through D3 v7 with axes, tick formatting, and an interactive tooltip.

Kkoushika.3002@gmail.com

71% match