Skip to main content
SimilarExport ZIP
100%

Irregular Histogram

✓ Published0🌍 Public
Mmbostock
Last edited Feb 9, 2016
Created on Jan 17, 2012

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.

AI-generated description

See also this histogram of an Irwin–Hall distribution.

gpl-3.0 Licensed

Similar vizzes

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

Histogram

This histogram visualizes the distribution of salary values in U.S. dollars from a CSV dataset loaded via a gist URL. It uses D3.js v7 with an SVG renderer to draw rectangular bars, each representing a salary range, with bar height indicating frequency. The code applies `d3.histogram()` with `xScale.ticks(20)` to bin the data, along with linear scales for both axes. Hovering highlights bars in orange, and axis labels are rotated for readability.

SSrinivasAbburi@my.unt.edu
78% 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
77% 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
76% match
Loading thumbnail…

Histogram Using D3

This example shows a histogram of numeric price data loaded from a CSV file, rendered as an SVG bar chart using D3 v4. It uses `d3.histogram()` to bin the values into 70 thresholds, `d3.scaleLinear()` for both the x- and y-axes, and `d3.axisBottom()` and `d3.axisLeft()` to draw the axes. Each bin is drawn as a rectangle whose width and height are derived from the bin’s x0/x1 domain and the count of records in that bin. The data comes from a remote GitHub-hosted CSV, and bars are styled with a fixed fill color.

Eethanrampersaud@gmail.com
76% match
Loading thumbnail…

histogram

This histogram visualizes the distribution of salaries from a data science salaries dataset, showing the frequency of salary values within equal-width bins. The visualization uses D3.v7 to load CSV data, compute histogram bins with the `d3.histogram` API, and render the result as SVG rectangles. Axes are added using `d3.axisBottom` and `d3.axisLeft`, with the x-axis labels rotated for readability. The chart includes a legend and interactivity, as bars change color on hover.

AArungopal Andalam
76% match
Loading thumbnail…

Untitled

This interactive histogram displays the distribution of a single numeric variable from a CSV dataset of prices. A slider dynamically adjusts the number of bins from 1 to 100, with smooth 1000ms transitions updating both the bar widths and the y-axis scale. The visualization uses d3.histogram to compute bin values, d3.scaleLinear for axes, and d3.axisBottom/axisLeft for rendering scales. Bars are drawn as SVG rectangles with a teal fill, while d3’s data join pattern handles entering and exiting elements during updates.

AAbhishek Kumar
74% match
Loading thumbnail…

Histogram

This histogram displays the distribution of a numeric variable (price) from a CSV dataset loaded from a GitHub repository. The visualization uses D3.js v7 with an SVG rendering approach, where the `d3.histogram()` API computes the binning and thresholds, and axis scales are created with `d3.scaleLinear()`. Bars are appended as SVG rectangles, and the chart is responsive, redrawing on window resize with a debounce function. The design uses a dark background with steelblue bars.

DDattatrayPatil73076
74% match