Skip to main content
SimilarExport ZIP
100%

Fork of Histogram

✓ Published0🌍 Public
PPrincEddy
Last edited Apr 12, 2021
Created on Apr 12, 2021
Forked from Histogram

This interactive histogram displays the distribution of numerical weather measurements, such as temperature and humidity, from a San Francisco dataset. A dropdown menu lets users select the data column to visualize, while a numeric input controls the number of bins. Built with React and D3 v5, the chart uses `d3.histogram` to bin values and renders bars as SVG with animated transitions. Hovering over a bar highlights it and reveals a tooltip with the bin range and absolute frequency.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Histogram

This interactive histogram displays the distribution of weather measurements from San Francisco, with a dropdown menu to select the input column and a numeric input to adjust the number of bins. The chart uses `d3.histogram` to bin the data and `axisBottom`/`axisLeft` for axes, with SVG rendering and animated transitions on axis updates. Hovering over bars reveals class ranges and absolute frequencies via a tooltip, while the included dropdown menu and bin controls dynamically update the visualization in a React framework.

Mminson
95% match
Loading thumbnail…

Histogram

This histogram displays the distribution of a selected weather-related column, such as temperature, from a San Francisco weather dataset. The chart updates with smooth transitions when a different input column is chosen from a dropdown menu or when the bin count is adjusted via the number input. Built with React and D3 v5, it renders as SVG and uses `d3.histogram`, `d3.scaleLinear`, and `d3.axisBottom`/`axisLeft`. Interactive tooltips highlight each bar and show its class range and frequency on mouseover.

SSchmittYannic
90% match
Loading thumbnail…

Fork of Humidity histogram

This histogram visualizes the distribution of daily humidity levels from a 2016 weather dataset, with bars showing the number of days in each humidity bin. The mean humidity is marked by a dashed line. The chart uses D3 v5’s `d3.histogram` and `d3.scaleLinear` to generate bins and scales, rendering SVG elements with React. It includes interactive accessibility features like ARIA roles and labels for the bars and figure.

Cckp8
82% match
Loading thumbnail…

Fork of Interactive barchart

This example shows an interactive histogram of humidity data, rendered as vertical bars in an SVG using D3 v5 within a React setup. The bars are colored cornflower blue and turn purple on hover, with a dashed line marking the mean humidity. A tooltip appears on mouseover, displaying the exact humidity range and day count for each bin. The chart also includes labeled axes and a styled tooltip with a pointer arrow.

Cchalasanigayaetiri@gmail.com
82% match
Loading thumbnail…

Fork of Humidity histogram

This example visualizes the distribution of humidity measurements from a 2016 weather dataset as a histogram. The chart displays twelve bins of humidity ranges on the x-axis, with the count of days in each bin represented by the height of blue bars. A dashed maroon line marks the mean humidity value. The visualization is built with React and D3 v5, using `d3.histogram()` to generate bins and `d3.scaleLinear()` to map data to SVG coordinates. The code also implements accessibility features, adding ARIA roles and labels to chart elements.

Vvipin kumar paikra
82% 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
82% match
Loading thumbnail…

Fork of Humidity histogram

This histogram visualizes the distribution of daily humidity levels from a 2016 weather dataset, with bar heights representing the number of days within each humidity range. A dashed maroon line marks the mean humidity, and each bar displays its count value. Built with React and D3 v5, the chart uses `d3.histogram` with twelve thresholds to bin the data, `d3.scaleLinear` for both axes, and SVG elements for rendering. Accessibility features include ARIA roles on the figure, bars, and text elements, while the data loads asynchronously from a remote JSON file.

Cckp8
81% match
Loading thumbnail…

Fork of Humidity histogram

This histogram visualizes the distribution of daily humidity levels from a 2016 weather dataset, with bar heights representing the number of days within each humidity range. A dashed maroon line marks the mean humidity, and each bar displays its count value. Built with React and D3 v5, the chart uses `d3.histogram` with twelve thresholds to bin the data, `d3.scaleLinear` for both axes, and SVG elements for rendering. Accessibility features include ARIA roles on the figure, bars, and text elements, while the data loads asynchronously from a remote JSON file.

Cckp8
81% match