Skip to main content
SimilarExport ZIP
100%

Enclosing Force Circles

✓ Published0🌍 Public
FFrissAnalytics
Last edited Sep 3, 2018
Created on Sep 3, 2018

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.

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>

forked from <a href='http://bl.ocks.org/Thanaporn-sk/'>Thanaporn-sk</a>'s block: <a href='http://bl.ocks.org/Thanaporn-sk/1c59a9a25188e667ce3196555d3d9899'>Enclosing Force Circles</a>

mit Licensed

Similar vizzes

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

Scatterplot

This scatterplot shows the relationship between years since PhD and salary for professors, with each circle representing an individual. The visualization uses D3 v5 (d3.scaleLinear, d3.extent, d3.axisLeft, d3.axisBottom) to map the data from a CSV file onto an SVG canvas. Data is attributed to a professor salary dataset, with axes labeled "Years Since PhD" and "Salary." The title, gridlines, and circle opacity enhance readability of the distribution across academic ranks.

Mmmustafau
68% match
Loading thumbnail…

Cars Scatter plot

This scatter plot visualizes the relationship between years of service and salary for university professors. Each circle represents an individual, with its position determined by the `d3.scaleLinear` scales mapping the x-axis (years of service) and y-axis (salary in USD). The chart uses `d3.axisBottom` and `d3.axisLeft` for labeled axes, and a 1.2-second `transition` animation grows the circles from radius zero to their final size. The data is loaded from a CSV file and filtered to include only professors with more than two years of service.

BbeauMarko
67% 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
67% match
Loading thumbnail…

P1 - Task 2

This visualization uses a scatter plot to show the relationship between years of service and salary for professors, with each circle’s size varying based on years since PhD. The data comes from a Salaries.csv file. Built with D3.js and rendered as an SVG, it uses `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.csv` for loading data. Circle radius is set using `Math.sqrt(d.yrs_since_phd)`, and styling includes gray grid lines and steelblue semi-transparent points.

AAnita Tse
66% 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
66% match