Box/Whisker

100%

✓ Published0🌍 Public

Last edited Jun 23, 2020

Created on Jun 22, 2020

Forked from Relearning and formatting everything

This example visualizes the revenue of various companies across two categories using a box and whisker plot. The visualization displays individual data points as circles with jitter, overlaid on semi-transparent rectangles. Built with React and D3 v5, the code uses `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisLeft` to construct the chart, while data is loaded from a CSV file. The SVG rendering includes interactive hover effects that change rectangle colors.

AI-generated description

A bare minimum HTML page.

Similar vizzes

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…

d3fc box plot

This visualization uses d3fc (a library of D3 modules) to create a box plot chart showing revenue data for four quarters. The code calculates quartiles, whiskers, and outliers for each quarter using D3’s `d3.quantile` function, then renders the boxes, whisker lines, and outlier points using `fc.seriesSvgBoxPlot` and `fc.seriesSvgPoint`. A multi-series component (`fc.seriesSvgMulti`) combines these with labeled points showing whisker and quartile values. The chart is built with `fc.chartSvgCartesian`, using a point scale for quarters and a linear scale for revenue, with data loaded from `data.csv`.

CColinEberhardt

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

75% match

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

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

74% match

Loading thumbnail…

Untitled

This example shows the distribution of carbon emissions per employee across companies, grouped by emission scope (1, 2, 3). For each scope, a box-and-whisker plot summarizes quartiles, median, and outliers, while individual companies appear as colored circles, jittered vertically to reduce overlap. The visualization uses D3 v4’s `d3.csv`, `d3.nest`, `d3.quantile`, and `d3.scaleBand` to structure and layout the data, with a sequential color scale from `d3.interpolateRdYlGn` mapping emissions intensity. Circles include mouseover tooltips, complementing the SVG-rendered boxes and axes.

Bbertieip

74% match

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

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

74% match