horizontal boxplot

100%

horizontal boxplot

✓ Published0🌍 Public

Last edited Nov 14, 2016

Created on Nov 14, 2016

A horizontal boxplot visualizes the distribution of values across seven days, with each row showing median, quartiles, and min/max range as thick lines, boxes, and circles. The D3.js (v3) code loads comma-separated data from `data.csv` and builds an SVG chart with linear scales for both axes. Grid lines from the axes and styled box elements with white-filled IQR rectangles and dashed tick subdivisions render the quantitative spread, while the y-axis lists day numbers in reversed order. This example demonstrates a classic statistical chart using D3's SVG and axis APIs.

AI-generated description

forked from <a href='http://bl.ocks.org/micahstubbs/'>micahstubbs</a>'s block: <a href='http://bl.ocks.org/micahstubbs/98d8b4eba987224e3c84'>horizontal boxplot</a>

cc0-1.0 Licensed

Similar vizzes

Loading thumbnail…

vertical boxplot

A vertical boxplot visualizes the distribution of data across 20 days, with each day represented by a box-and-whisker plot showing the min, max, median, and quartiles from the provided CSV data. The SVG rendering uses D3.js (version 3.5.5) with `d3.csv` to load the data, `d3.scale.linear` for both x and y axes, and `d3.svg.axis` to generate the axes. Each box is drawn as a rounded rectangle, whiskers as lines, and the median as a white circle, all styled with a mint-green color scheme on a teal background.

TThanaporn-sk

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

84% match

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

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

74% match

Loading thumbnail…

Assignment 4: boxplot with D3

This example visualizes the distribution of carrier delays from a CSV dataset using a single vertical boxplot. The chart displays the minimum, first quartile, median, third quartile, and maximum values, with interactive tooltips revealing summary statistics on hover. Built with D3.js version 7, the code loads data via `d3.csv`, computes quantiles using `d3.quantile`, and renders the boxplot as SVG elements.

Hhxu51@usfca.edu

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

73% match

Loading thumbnail…

boxplot

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.

JJLarseneur

72% match

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

71% match