Boxplot testing

100%

Boxplot testing

✓ Published0🌍 Public

Last edited Oct 6, 2020

Created on Oct 6, 2020

This example demonstrates interactive box plots that visualize the distribution of selected numeric columns, optionally grouped by a categorical variable through dropdown menus. It shows quartiles, medians, and outliers, with tooltips revealing exact values on hover. The visualization is built with React and D3 v5, using `d3.nest()` to compute summary statistics and `d3.scaleLinear` for the y-axis. Rendered as SVG with animated transitions, box plots and outlier circles respond to mouse events, highlighting the interquartile range while dimming others.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Boxplots V2

This example shows a set of boxplots for multiple numerical columns from a small dataset. Users can toggle checkboxes to include or exclude columns, and the chart updates with an animated transition. The visualization is built with React and D3 v5, using `d3.quantile` to compute quartiles, `d3.scaleLinear` and `d3.scaleBand` for axes, and SVG with a custom tooltip that displays summary statistics on hover. Data is hardcoded in the script.

SSchmittYannic

87% match

Loading thumbnail…

test 3

This example shows an interactive boxplot of a small dataset with two columns, allowing users to toggle between a linear and a log10 scale for the y-axis. The visualization uses D3 v5 within a React framework, rendering SVG elements with animated transitions. Key D3 APIs include `scaleLinear`, `scaleLog`, `scaleBand`, `quantile`, and axis components like `axisBottom` and `axisLeft`. The code computes quartiles and whiskers, and removes outlier circles when switching scales. A tooltip appears on hover over the boxplot.

SSchmittYannic

86% match

Loading thumbnail…

first boxplot

This example demonstrates a classic boxplot visualization of a numeric dataset, highlighting the median, interquartile range, whiskers, and any potential outliers. The chart computes the five-number summary using `d3.quantile` and draws the box, median line, and whiskers as SVG shapes, with circles marking values beyond 1.5 times the interquartile range. The y-axis is rendered with `d3.axisLeft`, and the scaling is handled by `d3.scaleLinear`. The dataset is hardcoded in the script, and the entire visualization is built with React and D3 v5, outputting to SVG.

SSchmittYannic

85% match

Loading thumbnail…

test2

This example presents interactive boxplots for four data groups, allowing viewers to switch between linear and log10 scales and toggle individual columns. The boxplot elements—including IQR boxes, median lines, whiskers, and outlier points—are rendered as SVG shapes with animation. The visualization is built with D3 v5, using `d3.scaleLinear`, `d3.scaleBand`, and `d3.axisLeft` to compute and draw the statistical summaries. A tooltip appears on mouseover of the median line, while Bootstrap buttons and custom checkboxes manage the scale and column selections.

SSchmittYannic

85% match

Loading thumbnail…

Boxplot mit Buttons

This example shows a boxplot of a fixed dataset, with buttons to toggle between a linear and a base-10 logarithmic scale for the y-axis. It highlights how the choice of scale affects the visual representation of quartiles, median, and whiskers, while also demonstrating out-of-scale outliers. The visualization is built with React and D3 v5, using `d3.quantile` for summary statistics, `d3.scaleLinear` and `d3.axisLeft` for the axes, and SVG transitions to animate the boxplot's redraw when the scale changes.

SSchmittYannic

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

80% match

Loading thumbnail…

Boxplot in D3

This boxplot visualization displays the distribution of a dataset through a series of vertical box-and-whisker plots, with each plot summarizing key statistics such as the median, quartiles, and potential outliers. The chart is rendered using the D3.js library, specifically leveraging `d3.select` to append SVG elements and `d3.scaleLinear` for the y-axis mapping. Data values are drawn using SVG `rect` and `line` elements, while axes are annotated via `d3.axisLeft`. The example emphasizes standard boxplot conventions, with whiskers extending to the most extreme data points within 1.5 times the interquartile range, and individual outliers plotted as circle markers.

RRiya Mathur

79% match

Loading thumbnail…

Box Plot

This box plot visualizes the distribution of a numeric variable across categories, with each category represented by a box-and-whisker summary. The chart is built as a Chiasm plugin using D3, drawing from Mike Bostock’s Box Plots example. It computes quartiles (lower, median, upper) and whiskers from the data, rendering a box for the interquartile range, a center line for the median, and horizontal whisker lines. The x-axis is ordinal, mapped from unique values in a selected column, while the y-axis is linear and derived from the data’s extent. The visualization is configured through margins, column selections, and styling properties such as fill, stroke, and stroke width. The code integrates with the Chiasm reactive model, responding to changes in data, columns, and layout dimensions to keep the chart in sync.

CCurran Kelleher

78% match