Skip to main content
SimilarExport ZIP
100%

hist

✓ Published0🌍 Public
FFarhaan Qazi
Last edited Mar 2, 2023
Created on Mar 2, 2023
Forked from HTML Starter

This histogram visualizes the distribution of daily COVID-19 case counts over time, with values ranging from 5 to over 50,000. The X-axis is fixed to a domain of 0–1000, showing only the lower range of the data. The visualization uses d3.histogram to bin the dates based on their associated value, then renders bars with SVG rectangles. The bars are colored teal and scaled using d3.scaleLinear for both axes, with data loaded from a CSV file via d3.csv. The code defines its margins, width, and height explicitly before building the chart.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

hist

This visualization displays a horizontal histogram of COVID-19 case counts over time. Each bar’s length represents the cumulative number of cases for a given date, with bars arranged by value along the y-axis. The code uses d3.csv to load data, d3.scaleLinear for the x-axis width mapping, and d3.scaleBand for the y-axis categories. Rectangles are appended to an SVG and sized using the scales, with the data sourced from the provided CSV file. The chart is built with D3 v7.

FFarhaan Qazi
93% match
Loading thumbnail…

Covid 19 Deaths Date Histogram

This example shows a histogram of COVID-19 deaths over time, with bars representing monthly total deaths globally. The visualization uses React to render SVG elements, with d3.scaleTime and d3.bin for time-based binning, d3.sum to aggregate death totals, and custom React components for axes and marks. Data comes from the CSSE COVID-19 time series dataset, parsed with d3.csv and d3.timeParse. The chart displays a yellow background circle and styled axis labels, with tooltips showing exact death counts via SVG title elements.

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

d3 histogram

This visualization shows the distribution of yearly infection counts across US states from 1970 to 1980, using a histogram. The code loads CSV data from a GitHub gist, computes bins with `d3.histogram`, and renders rectangles with `d3.scaleLinear` for axes. Hovering over a bar reveals a tooltip with the bin range and count. The SVG chart displays maroon bars that turn crimson on interaction, with clear axis labels and a title.

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

Box Plot

This box plot visualizes the distribution of COVID-19 case counts across selected countries, showing min, first quartile, median, third quartile, and max values using a vertical whisker-and-box layout. The chart is built with React and D3 v5, using `scaleLinear` and `scaleBand` for positioning, `d3.nest` and `d3.quantile` to compute summary statistics, and SVG `rect` and `line` elements for rendering. Data comes from a CSV file of global COVID-19 figures, filtered to include only countries with at least 5,500 new cases.

CChristian Magelssen
73% match
Loading thumbnail…

Box Plot

This box plot visualizes the distribution of daily new COVID-19 cases across countries, showing minimum, quartiles, and maximum values. The chart uses React to render SVG elements with d3.scaleBand and d3.scaleLinear for axes, while d3.nest() and d3.quantile compute the statistical summaries from the CSV data. The code manually draws each box, median line, and whisker using React components, with d3.csv loading the source data.

Mmanasishrotri
73% match
Loading thumbnail…

cali covid histo

This histogram visualizes COVID-19 deaths over time across all California counties, aggregated into monthly bins that show the total deceased and missing per month. Built with React and D3 v6, the chart uses `d3.histogram` with `timeMonths` thresholds to bin data, `scaleLinear` and `scaleTime` for axes, and SVG rect elements for bars. The data comes from the JHU CSSE COVID-19 time-series dataset, with each bin summing the daily death totals by county.

AAnthony Ynami
73% match