Skip to main content
SimilarExport ZIP
100%

Box Plot

✓ Published0🌍 Public
WWaseem Medhat
Last edited Dec 12, 2020
Created on Dec 12, 2020

This example displays a horizontal box plot summarizing the distribution of age values from a hepatitis C patient dataset. The chart shows the minimum, first quartile, median, mean, and maximum as colored lines and a rectangle, with whiskers extending to the full data range rather than using the 1.5 IQR rule. Built with React and D3 v6, it computes statistics using d3.min, d3.max, d3.quantile, and d3.mean, scales the x-axis with d3.scaleLinear, and renders SVG elements through reusable AxisBottom and BoxPlot components.

AI-generated description

Visualizing the five number summary of a single continuous variable.

Note: this boxplot does not use the 1.5 IQR rule. The whiskers always extend to the minimum and maximum of the data.

MIT Licensed

Similar vizzes

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

Fork of Box Plot

This example shows a box plot for daily new COVID-19 cases across countries, displaying the minimum, first quartile, median, third quartile, and maximum for each location. The chart uses React to render SVG elements, with D3 v5’s `scaleBand`, `scaleLinear`, `quantile`, and `nest` functions to compute summary statistics and position the boxes, whiskers, and median lines. Data is loaded as CSV from a GitHub gist and filtered to include only countries with case counts above 5,500.

Vvryvarma5577@gmail.com
77% match
Loading thumbnail…

Fork of Box Plot

This visualization presents a fork of a classic box plot, summarizing the distribution of new COVID-19 cases across different locations using React and D3 v5. The view displays min, quartiles, median, and max values for each categorical group after filtering to cases above 5,500. The implementation uses D3's `scaleBand`, `scaleLinear`, and `quantile` functions to compute the five-number summaries and render SVG elements, including vertical range lines, interquartile rectangles, and median markers. Data is loaded from a CSV file hosted on GitHub via D3's `csv` loader.

Vvryvarma5577@gmail.com
77% match
Loading thumbnail…

Fork of Box Plot

This visualization presents a fork of a classic box plot, summarizing the distribution of new COVID-19 cases across different locations using React and D3 v5. The view displays min, quartiles, median, and max values for each categorical group after filtering to cases above 5,500. The implementation uses D3's `scaleBand`, `scaleLinear`, and `quantile` functions to compute the five-number summaries and render SVG elements, including vertical range lines, interquartile rectangles, and median markers. Data is loaded from a CSV file hosted on GitHub via D3's `csv` loader.

Vvryvarma5577@gmail.com
77% match
Loading thumbnail…

Fork of Fork of Box Plot

This example shows box plots for new COVID-19 cases by country, displaying minimum, first quartile, median, third quartile, and maximum values derived from a CSV dataset. The chart uses the D3 `scaleBand` and `scaleLinear` functions for positioning, with React components rendering each plot element as SVG. The data is aggregated using D3’s `nest`, `quantile`, and `rollup` functions, and the visualization is inspired by a D3 graph gallery example. Axis ticks are generated separately with custom React axis components.

Vvryvarma5577@gmail.com
76% match
Loading thumbnail…

Fork of Box Plot

This fork of a box plot visualizes the distribution of new COVID-19 cases across different locations, showing the minimum, first quartile, median, third quartile, and maximum values for each group. The chart uses React to render SVG elements, with D3.js functions like `scaleBand` and `scaleLinear` for axes and `quantile` for statistical calculations. The data is filtered to include only values above 5500 new cases and loaded from a CSV file via `d3.csv`.

XXiaoyu Su
76% match
Loading thumbnail…

Fork of first boxplot

This visualization shows a single boxplot of a small dataset, with the median line, interquartile range box, and whiskers extending to the most extreme non-outlier points. Outliers beyond the 1.5×IQR fence are rendered as small circles. The chart is built with D3 v5, using `d3.scaleLinear` for the y-axis, `d3.quantile` to compute quartiles and median, and `d3.axisLeft` for the tick labels. The box, whiskers, and outlier circles are drawn as SVG elements within a React application.

Ddaniel
74% match