Fork of Histogram
This example shows a histogram of wine prices from a CSV dataset, using bars to display the distribution of the numeric price variable across 40 bins. The visualization updates responsively when the window is resized. The code uses d3.histogram() to compute binning, d3.scaleLinear() for both axes, and d3.axisBottom() and d3.axisLeft() for tick marks. SVG rectangles are appended and transformed to represent each bin, with a debounced resize listener triggering redraws of the histogram.
AI-generated descriptionHistogram
Definition
A histogram is an accurate graphical representation of the distribution of a numeric variable. It takes as input numeric variables only. The variable is cut into several bins, and the number of observation per bin is represented by the height of the bar.
What For
Histogram are used to study the distribution of one or a few variables. Checking the distribution of your variables one by one is probably the first task you should do when you get a new dataset. It delivers a good quantity of information.
Steps:
- A histogram displays the distribution of a numeric variable. So you basically need only one column in your input file.
- This numeric variable is provided to the d3.histogram() function that will compute the binning and returns the coordinates of each bar.
- These bars can thus be drawn using a classic .append("rect") approach.