Skip to main content
100%

D3.js Boxplot with Axes and Labels

✓ Published0🌍 Public
Aanaeliaovalle
Last edited Mar 16, 2017
Created on Mar 14, 2017

This example shows a box-and-whisker plot built with D3.js (v3) that visualizes measurements across multiple categorical variables, with each column in the CSV representing an independent variable and each row containing measurements for all variables. The chart renders all boxplots in a single root SVG element, making it straightforward to add axes and labels. The implementation supports toggling label visibility via a `showLabels` variable and accepts CSV input where each column is a variable. It is based on Mike Bostock's boxplot design, adapted to group all plots in one root element for easier axis integration. The visualization uses SVG rendering and is available under the MIT license.

AI-generated description

A box-and-whisker plot with axes. Based on Mike Bostock's implementation. Instead of using individual svg elements as in Mike's implementation, here all boxplots are rendered with in one root element. This makes it easy to add axes.

Further differences between the two implementations are:

  • visibility of boxplot labels can be switched with the labels variable
  • CSV files are supported in which each column is an independent variable and each row contains measurements for all variables (see data.csv)
  • transitions are not used here but can be easily added again

forked from <a href='http://bl.ocks.org/jensgrubert/'>jensgrubert</a>'s block: <a href='http://bl.ocks.org/jensgrubert/7789216'>D3.js Boxplot with Axes and Labels</a>

mit Licensed

Similar vizzes

Loading thumbnail…

D3.js Boxplot with Axes and Labels

This D3.js boxplot visualizes the distribution of revenue across four quarters, with data parsed from a CSV file. Each quarter is represented by a vertical box-and-whisker plot, showing the median, quartiles, and whiskers, with outliers indicated. The chart includes labeled axes and a title, and the boxplot elements are rendered as SVG shapes. The implementation uses the `d3.box` function, a custom module inspired by Mike Bostock's earlier version, and leverages D3's scaling and axis APIs to draw the chart.

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

D3.js Boxplot working branch

This boxplot visualization, built with D3.js v3, displays the distribution of response times across eight alarm incident types (Alarms, Fire, Hazard, Citizen Assist, Rescue, Vehicle-Related, Other, and Medical Incident). Based on Mike Bostock's boxplot implementation, this version renders all boxplots within a single root SVG element to simplify adding axes, with each column in the CSV representing an independent variable and each row containing measurements for all variables. The chart shows the quartiles, median, whiskers, and outliers for each category, with optional text labels that can be toggled via the `showLabels` variable. Unlike the original implementation, transitions are not used by default, but the code is structured to support them easily. The visualization uses D3.js v3 and is rendered as SVG.

Aanaeliaovalle
78% match
Loading thumbnail…

Box Plots

This visualization demonstrates the classic box-and-whisker plot, summarizing the distribution of data from the Michelson–Morley experiment using five statistics: minimum, lower quartile, median, upper quartile, and maximum. The chart renders as SVG and includes smooth animated transitions, periodically randomizing values to highlight how the box, median line, whiskers, and outliers update. The d3.box reusable chart component draws each distribution’s center line, innerquartile box, median line, whiskers, and outlier points, with support for custom whisker definitions and quartile calculations.

Aalvinthai
76% match
Loading thumbnail…

Violin Plot + Box Plot v2

This example showcases a responsive distribution chart that can display box plots, notched box plots, violin plots, bean plots, and beeswarm or scatter plots on the same dataset. Built with D3 v3, the visualization renders in SVG and supports interactive toggling between chart types via buttons. The chart uses a custom `makeDistroChart` function to modularly manage plot components, with options for styling, outlier display, and trend lines. Data is loaded from a CSV file with year and value columns, and the visualization includes tooltips and CSS-based responsive sizing.

AAjayyy
76% match
Loading thumbnail…

Box Plots

This example displays a series of box-and-whisker plots summarizing speed measurements from the Michelson–Morley experiment, with each plot representing one experimental run. The visualization periodically randomizes the underlying data values, animating the transitions using D3's `transition` API over 1000 milliseconds. The charts are rendered as SVG, with the `d3.box` custom layout implemented in the included `box.js` file. The code uses `d3.csv` to load the morley dataset and `d3.scale.linear` for positioning, while outliers, medians, and whiskers update smoothly between randomization cycles.

Mmbostock
75% match
Loading thumbnail…

BoxPlotD3

This example uses D3 v7 to create a horizontal box plot that visualizes the distribution of fuel economy (mpg) for a dataset of cars. It computes statistical quartiles, median, and min/max values from the data, then renders a box and whisker plot with labeled values for each statistic. The visualization is drawn as an SVG, with the data fetched from a remote CSV file and mapped to a linear scale for the x-axis.

Ccwb314159@gmail.com
75% match
Loading thumbnail…

BoxPlot D3

A box plot visualizes the distribution of metric review scores across 50 video games, loaded as CSV data. The chart displays the minimum, first quartile, median, third quartile, and maximum values as interactive black lines that highlight on hover, alongside a steelblue box that changes color when moused over. Built with D3 v6, the code uses `d3.csv`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.quantile` to compute the summary statistics and render the plot as SVG elements.

AAllen Ho
75% match