Duration Histogram

100%

Duration Histogram

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Jul 4, 2012

This histogram displays the distribution of 1,000 randomly generated duration values drawn from a log-normal distribution with a median of 30 minutes, binned into 20 uniform intervals. The bars show the count of durations falling within each time range, with the x-axis using a linear scale and custom tick labels formatted as times via `d3.time.format`. Built with D3 v3, the chart uses `d3.layout.histogram` to bin the data, `d3.svg.axis` for the axes, and renders as SVG with `shape-rendering: crispEdges` for sharp bar edges.

AI-generated description

This chart shows a histogram of a log-normal distribution of time durations. The data is randomly generated: each value is a number representing a duration measured in minutes. The values are then binned at regular intervals using D3’s histogram layout. A custom tick format for the x-axis converts these numbers to dates before passing them through a d3.time.format. The x-axis uses a linear scale, such that the tick values appear in-between bars; this provides better indication that each bar represents the count of values between its surrounding tick values.

gpl-3.0 Licensed

Similar vizzes

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

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

70% match

Loading thumbnail…

Histogram Chart

This histogram chart visualizes the Irwin–Hall distribution by generating 10,000 random samples and grouping them into bins. Built with D3 v3, it employs the reusable chart module pattern, where a `histogramChart()` function configures scales, axes, and bars. The chart uses `d3.layout.histogram` for binning, an ordinal x-scale for bar positions, and an SVG rendering with a bottom axis. The code also demonstrates the use of `d3.rebind` to expose histogram properties and the x-axis tick format, while the parent script generates sample data via `Math.random`.

Mmbostock

70% match

Loading thumbnail…

Histogram

This example shows a histogram of 24 integers, ranging from 0 to 9, distributed into 10 bins. The plot uses a bar chart to display the frequency of each value, with bars colored teal on a white background. The code builds the chart with D3 v7, using `d3.scaleLinear` for both the x and y axes, `d3.histogram` and `d3.ticks` to bin the data, and `d3.axisBottom` and `d3.axisLeft` for the tick marks. The SVG rendering is set up with fixed dimensions and margins, and the data is provided as a static array in the script.

Hhanulik.ondrej@gmail.com

70% match

Loading thumbnail…

Example histogram using pareto distribution.

This example shows a histogram of 1,000 random values drawn from a Pareto distribution, with only those values between 0 and 5 included. It uses D3 v3 to generate the data via a custom `pareto` function and the `d3.layout.histogram` API, which creates twenty uniformly-spaced bins. The chart renders as an SVG with steelblue bars, and each bar is labeled with its count using `d3.format`. The x-axis is created using `d3.svg.axis`, and the layout applies fixed margins and a linear scale for both axes.

CCurran Kelleher

68% match

Loading thumbnail…

Duration Heat Map

This heat map visualizes the duration of events across months and days, using color intensity to reveal patterns. The code fetches a remote text dataset, loads D3 v5 from UNPKG, and renders the graphic with SVG. It builds the chart using `d3.scaleBand` for axes, `d3.scaleSequential` with an interpolateBlues color scale, and adds interactive tooltips. Axes, labels, and a color legend are included, all authored as plain D3 code.

Ssrikkanth05

67% match

Loading thumbnail…

Histogram

This histogram visualizes the distribution of a dataset using interactive bars, rendered with React and D3. It shows the frequency of data points across numeric bins, with hover effects highlighting individual bars. The code uses `d3.histogram` to compute bin ranges and `d3.scaleLinear` for positioning, while SVG paths are generated via `d3.area` for the bar shapes. The chart dynamically updates based on user-selected bin counts, demonstrating a reusable React component pattern. The underlying data is random-generated, and the styling relies on plain CSS defined in the linked stylesheet.

RRiya Mathur

67% match

Loading thumbnail…

Histogram

This interactive histogram visualizes the distribution of one numeric variable using data loaded from a CSV file. Built with D3 v7, it renders bars as SVG rectangles, with the x-axis scaled linearly and the y-axis representing bin counts. The chart updates responsively on window resize, recalculating the histogram with 40 thresholds to accommodate the new width. Data is fetched from the `data_to_viz` GitHub repository.

Aarjun-lab663

66% match