boxplot

100%

✓ Published0🌍 Public

Last edited Aug 16, 2018

Created on Aug 16, 2018

Seven box plots compare timing distributions for seven cycle stages, with jittered scatter points overlaid for individual outliers. The visualization uses d3fc’s `seriesSvgBoxPlot`, `seriesSvgPoint`, and `seriesSvgMulti` to render boxes, whiskers, and labeled markers, while d3-scales compute quantiles and the whisker range. Data comes from `data.csv` with seven duration columns. The chart also labels each median and quartile value, and colors each segment distinctly.

AI-generated description

forked from <a href='http://bl.ocks.org/ColinEberhardt/'>ColinEberhardt</a>'s block: <a href='http://bl.ocks.org/ColinEberhardt/b8b4be36f2ef72180c437eaeb214ad0a'>d3fc box plot</a>

mit Licensed

Similar vizzes

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

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

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

71% match

Loading thumbnail…

Box Plot Jitter

This example combines a box plot with jittered individual data points to show the distribution of fuel efficiency (mpg) for a 2012 Volvo XC90. The box plot displays quartiles, median, and whiskers, while red circles reveal each data point’s exact value, with mouseover tooltips showing the mpg. Using D3.js v4, it computes summary statistics via `d3.nest` and `d3.quantile`, then renders the SVG with scales, rectangles, lines, and circles. The data comes from the included `boxplot.csv` file.

Pprateekvasi

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

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

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

69% match

Loading thumbnail…

vertical boxplot

This example shows a vertical boxplot for each day in a small dataset, displaying the minimum, maximum, median, and quartile values as distinct graphical elements. The chart uses a green color scheme with rounded rectangles for the interquartile range, thin lines for the range, and white circles for the median. The visualization is built with D3.js (version 3.5.5) using an SVG rendering, with scales for the x-axis (day) and y-axis (values from -2 to 2). The data is loaded from an external CSV file, and the code defines custom scales, axes, and shapes to construct the plot.

AA6Brgeuka

68% match