Skip to main content
SimilarExport ZIP
100%

Lollipop Chart

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

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.

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

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
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
73% 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…

reusable roughjs ordinal lollipop

This lollipop chart displays salary, age, and experience for football players in the Swedish Allsvenskan league, with salary on a linear y-axis and years on a categorical x-axis, while circles encode experience using a square-root scale. The visualization uses the Rough.js library to render hand-drawn, sketch-like SVG elements, and D3 v4 for scales, axes, and layout. Data is sorted by year in descending order, with a legend, axis titles, and a subtitle explaining that experience is not the decisive factor.

PPatrick Wojda
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
70% 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
69% 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
69% 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
69% match