Skip to main content
SimilarExport ZIP
100%

vertical boxplot

✓ Published0🌍 Public
AA6Brgeuka
Last edited Feb 9, 2017
Created on Feb 9, 2017

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.

AI-generated description

forked from <a href='http://bl.ocks.org/micahstubbs/'>micahstubbs</a>'s block: <a href='http://bl.ocks.org/micahstubbs/d5159b509e07179356e3'>vertical boxplot</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/882838c77beb142d7db1a81d60c4a17d'>vertical boxplot</a>

forked from <a href='http://bl.ocks.org/jzgit/'>jzgit</a>'s block: <a href='http://bl.ocks.org/jzgit/8e2ad000d054e8c29eb58049a8d3ae28'>vertical boxplot</a>

forked from <a href='http://bl.ocks.org/jzgit/'>jzgit</a>'s block: <a href='http://bl.ocks.org/jzgit/9213013e79f68e6b337670e7bacf8958'>vertical boxplot</a>

mit Licensed

Similar vizzes

Loading thumbnail…

vertical boxplot

This example shows a vertical boxplot of daily score values with error margins over a 30-day period. The chart displays the range from -2 to 2 with median, maximum, and minimum reference lines, rendered as white horizontal ticks. The code uses D3.js version 3.5.5 to load the CSV data and create scales, axes, and SVG line elements. Data is plotted chronologically along the x-axis with the y-axis representing the score distribution, though the visualization primarily emphasizes the overall value range rather than per-day quartiles.

AA6Brgeuka
86% 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…

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

boxplot

This example visualizes the distribution of automobile prices using a box plot, displaying the minimum, maximum, quartiles, median, and outliers. The code loads data from a CSV file hosted on GitHub, calculates the statistical measures with d3.min, d3.max, d3.quantile, and d3.median, and renders the chart as an SVG. It uses the d3-boxplot library to draw the box plot, with the chart titled "Box Plot of Car Prices" within a 600x400 viewport.

Iindushashi.g@gmail.com
75% match
Loading thumbnail…

A4_BoxplotPlot

This example visualizes the salary distribution across different job types using boxplots, highlighting the minimum, maximum, median, and quartile ranges for each category. The chart is rendered as an SVG using D3 v7, with interactive hover effects that display the exact max, min, and median values as text annotations. It loads the dataset from an external CSV file containing job titles and salaries, then computes quartiles and draws rectangles, lines, and axes. The code relies on D3 scales like `d3.scaleBand` and `d3.scaleLinear`, along with statistical methods such as `d3.quantile` and `d3.median`.

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