Irregular Histogram (Lollipop)

100%

Irregular Histogram (Lollipop)

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Jan 17, 2012

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.

AI-generated description

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Irregular Histogram

This irregular histogram visualizes income distribution by adjusting the height of each bar to represent the quotient of people per income unit, a technique aligned with standard histogram normalization. The visualization loads data from an `income.csv` file and renders in SVG using the D3.js v3 library, employing `d3.scale.linear` for both axes and `d3.svg.axis` for tick marks. Each bin’s width is derived from the varying income ranges (e.g., 8.8, 30, 49.9), and the first bin is discarded to anchor the scale. The chart uses a steelblue fill for the rect elements and displays clear axis labels.

Mmbostock

87% match

Loading thumbnail…

Histogram

This histogram visualizes the distribution of a numeric variable, grouping observed values into discrete bins and displaying their frequencies as vertical bars. It uses the D3.js library, specifically leveraging `d3.histogram` and `d3.scale` APIs to compute bin ranges and map data to screen coordinates. The rendering relies on SVG paths generated from the binned counts, with axes and labels drawn via D3’s measurement and tick utilities. The dataset originates from a GitHub gist, and the code operates entirely in the browser without external data files.

Mmbostock

73% match

Loading thumbnail…

Gist 6568151

A histogram displays a randomly generated Irwin–Hall distribution of 50 values, showing the count of scores binned into twenty uniform intervals. The chart uses D3’s histogram layout and linear scales to position bars, with axis ticks placed between bars to clarify bin boundaries. Bar counts are labeled above each rectangle, and mouseover events log the original data objects and associated names filtered from the source array. Rendered as SVG using d3.v2, the example demonstrates binning and interactive data binding.

11wheel

73% match

Loading thumbnail…

Untitled

This example visualizes the distribution of a single numeric variable using a histogram with 70 bins. The code loads data from a CSV file, applies d3.histogram to compute bin counts, and renders bars with d3.scaleLinear axes. Bars below a threshold of 140 are colored orange, while others are teal, with a dashed line and label marking the split. The visualization is built with d3.v4, rendered as SVG within a React framework, and uses d3.axisBottom and d3.axisLeft for the axes.

Aansnejib2468

71% match

Loading thumbnail…

Fork of Histogram

This interactive histogram displays the distribution of GDP per capita data across countries from 1960 to 2019, allowing users to switch between data columns or adjust the number of bins via a dropdown menu and numeric input. Built with React and D3 v5, it uses `d3.histogram`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` to render SVG bars with smooth transitions, while tooltips reveal bin ranges and frequencies on hover.

TTracey

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

70% match

Loading thumbnail…

Untitled

This example shows the distributions of two variables as overlaid histograms, enabling visual comparison of their frequency shapes. The code uses d3.csv to load a dataset, then d3.histogram with 40 bins to compute counts per range for each variable. Bars are rendered as SVG rectangles with semi-transparent fills, while d3.scaleLinear and d3.axisBottom/axisLeft construct the axes. A handmade legend uses circles and text to distinguish the two series.

Zzoniyac

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

70% match