Skip to main content
SimilarExport ZIP
100%

Lollipop Chart

✓ Published0🌍 Public
TThanaporn-sk
Last edited Jul 29, 2017
Created on Jul 29, 2017

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.

AI-generated description

A lollipop chart showing the pay gap between the lowest, median, and highest paid employees at universities. Hover over circles to reveal the data

forked from <a href='http://bl.ocks.org/tlfrd/'>tlfrd</a>'s block: <a href='http://bl.ocks.org/tlfrd/e1ddc3d0289215224a69405f5e538f51'>Lollipop Chart</a>

mit Licensed

Similar vizzes

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

Enclosing Force Circles

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.

TThanaporn-sk
75% match
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
73% 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
73% match
Loading thumbnail…

second

This scatterplot compares early career pay and mid career pay for the top eight universities by mid-career salary. Each circle represents a university, with x- and y-axes showing the two salary figures, circle size encoding salary growth, and color representing the university’s state. The visualization is built with D3 v7, using `d3.csv` to load data from a GitHub-hosted CSV file, `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.scaleSqrt` for scales, and SVG rendering with an HTML tooltip for interactivity.

Hh.harrycoding@gmail.com
72% match
Loading thumbnail…

Lollipop charts

This lollipop chart visualizes three categorical values (0%, 25%, and 50%) as large black circles connected to a baseline grid of horizontal and vertical lines. The SVG uses nested `<line>` and `<circle>` elements with inline styling, positioning circles at varying x-coordinates along distinct y-levels to create a dot-plot-like comparison. Text labels inside the circles display the percentage values, while a reference link in the HTML links to a Depict Data Studio tutorial. The chart is static and hand-coded rather than generated with a JavaScript library.

Aadonisacruz0@gmail.com
71% 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
69% 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
69% match