Skip to main content
SimilarExport ZIP
100%

Interactive barchart

✓ Published2🌍 Public
Jjbruzzo
Last edited Nov 29, 2022
Created on Oct 26, 2022
Forked from Interactions 1

This interactive barchart shows the distribution of humidity measurements from a weather dataset. Users can hover over bars to see the exact humidity range and the number of days in each bin via a tooltip. Built with D3 v5 and React, it uses `d3.histogram()` to generate bins, `d3.scaleLinear()` for axes, and SVG for rendering. The mean humidity is marked with a dashed line. Data is loaded asynchronously via `d3.json()`.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

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

Starter Template

This example shows a histogram of humidity measurements from weather data, with bars colored cornflower blue and a maroon dashed line marking the mean humidity. The visualization is built using D3 v5 and renders to SVG, using `d3.histogram` to bin the continuous humidity values and `d3.scaleLinear` for both axes. The chart is made accessible with ARIA roles and labels, and it includes a labeled x-axis for humidity. The data is loaded asynchronously from a JSON file hosted on GitHub.

Jjbruzzo
85% match
Loading thumbnail…

Bar Graph of Humidity histogram

This bar graph shows the distribution of humidity levels from a year of weather data, with the mean humidity marked by a dashed line. It uses d3.histogram to bin the humidity values into 12 intervals, and d3.scaleLinear for both the x and y axes. The chart is rendered as an SVG, with bar heights calculated from the binned counts, and is built with D3 v5 within a React starter template.

VVikil Lakkavatri
85% match
Loading thumbnail…

Humidity histogram

This histogram shows the distribution of daily humidity levels in 2016. The chart uses twelve bins to display the frequency of days across the humidity range, with a dashed line marking the mean humidity and its corresponding label. Built with React and D3 v5, the code loads JSON weather data, calculates histogram bins using the d3.histogram API, and renders the SVG output as an accessible figure with region labels and keyboard navigation support.

Jjbruzzo
84% 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
84% 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
84% 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
84% 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