Boxplots V2

100%

✓ Published1🌍 Public

Last edited Aug 31, 2020

Created on Aug 28, 2020

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.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Boxplot testing

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.

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

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

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

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

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

77% match

Loading thumbnail…

multiple boxplots with Scale changing buttons and Deselection options through checkboxes... toolkit broken

This example displays multiple boxplots for four categories of numeric data, with controls to switch the y-axis between linear and log10 scales. Users can toggle entire categories on and off using dynamically generated checkbox labels. The visualization renders as SVG and uses d3.scaleBand for the x-axis and d3.scaleLinear for the y-axis. A tooltip is partially implemented but not functional; the code references d3.v5 and is adapted from an external bar chart and toolkit example.

SSchmittYannic

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

75% match