Lollipop charts

100%

Lollipop charts

✓ Published1🌍 Public

Last edited Apr 19, 2024

Created on Apr 19, 2024

Forked from Task8

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.

AI-generated description

A blank slate starting point showing the "Hello World" for the VizHub V3 Runtime Environment, which supports continuous hot reloading with interactive widgets.

https://vizhub.com/drbagwell/cfc6aaba08b54a598475e867bcc8fa21

MIT Licensed

Similar vizzes

Loading thumbnail…

Lollipop Chart: 2008-2012

This interactive lollipop chart displays four football statistics—Goals, Goals Conceded, Titles, and League Points—for the years 2008 through 2012. Clicking a button triggers the `update` function, which transitions the vertical lines and circle markers to new values using animated `transition` calls on SVG elements. The chart reads tabular data from a remote CSV file via `d3.csv` and scales axes dynamically with `d3.scaleBand` and `d3.scaleLinear`. Rendering is entirely SVG-based, with axis and glyph transitions handled through D3's selection and merge operators.

SSimon Hackbert

77% match

Loading thumbnail…

Untitled

This visualization displays a lollipop chart of numeric values by country, using vertical teal lines topped with magenta circles to represent each data point. The chart loads CSV data from a GitHub repository, then renders an SVG with D3.js version 6.6.1 within a React framework. It uses `scaleBand` for the categorical x-axis, `scaleLinear` for the y-axis, and `axisBottom` and `axisLeft` to generate rotated tick labels and gridlines.

Ssubratanp

75% match

Loading thumbnail…

Irregular Histogram (Lollipop)

This example shows the income distribution of a population using an irregular histogram rendered as vertical lollipop sticks. Each line’s height encodes the number of people in a given income bracket, with the x-axis positioned at each bin’s income value and the baseline at the bottom. The visualization uses d3.v3 with SVG lines, a linear x and y scale, and d3.svg.axis for the axes. The data is loaded from a local CSV file, and the bin values are coerced to numbers before setting scale domains.

Mmbostock

73% match

Loading thumbnail…

Population Lollipop Chart

This chart displays the populations of the ten most populous countries using a lollipop-style visualization, where each country is represented by a circle positioned along a linear population scale and connected by a line to a common baseline. The data comes from a CSV file, with populations multiplied by 1,000 for accuracy. Built with D3 v5, it uses `scaleLinear` and `scalePoint` for axes, rendered as SVG with `axisBottom` and `axisLeft`, and formatted tick labels via `format('.3s')` to abbreviate large numbers.

Ffbudwill

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

71% match

Loading thumbnail…

level

A circular progress indicator displays a 50% value in orange on a white background. The visualization uses D3.js to construct an SVG composition, layering paths and concentric circles to create a donut chart with tick marks. A large text element renders the percentage in the center. The code defines variables for size, border, stroke, and color, then uses `svg.append("path")` and `svg.append("circle")` with explicit `attr` settings to draw the shapes, and `svg.append("text")` for the label.

SServuc

70% match

Loading thumbnail…

Line Chart

This line chart visualizes monthly values for categories A through L, showing trends over time with a thick orange line connecting circular data points. The chart includes value labels and date labels for each point. Built with D3.js v3, it uses an ordinal x-scale, a linear y-scale, and SVG rendering. Hovering over a circle triggers a smooth transition that enlarges the point to yellow, reveals its corresponding value text, and draws a vertical orange line from the baseline, using D3's selection filtering and transition methods. The data comes from a local JSON file.

BBerengerCunillera

70% match

Loading thumbnail…

Fork of TP_dataviz Projet

This example shows a lollipop chart comparing the number of Deezer fans per country, with each country represented by a vertical line and a green circle marker. The chart uses D3 v4 to load JSON data from `data.json`, scales the x-axis with `d3.scaleBand` and the y-axis with `d3.scaleLinear`, and renders SVG elements using `d3.axisBottom`, `d3.axisLeft`, and `d3.max` to determine the domain.

GGinnWG

70% match