vertical boxplot

100%

vertical boxplot

✓ Published0🌍 Public

Last edited Mar 9, 2017

Created on Mar 9, 2017

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.

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>

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

mit Licensed

Similar vizzes

Loading thumbnail…

horizontal boxplot

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.

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

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

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

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

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

70% match

Loading thumbnail…

Vertical bars but d3.v3

A vertical bar chart displays monthly values from a two-column CSV, with dates on the x-axis and values on the y-axis. The visualization uses the older d3.v3 API, loading the library from a CDN into the page. It constructs the chart with an ordinal scale for the date categories, a linear scale for the value range, and SVG axes, then renders steelblue rectangles for the bars. The code employs chained methods like `d3.scale.ordinal()`, `d3.svg.axis()`, and `.rangeRoundBands()` to position and size the bars.

SSebastian Barrett

70% match

Loading thumbnail…

Fork of Box Plot

This visualization presents a fork of a classic box plot, summarizing the distribution of new COVID-19 cases across different locations using React and D3 v5. The view displays min, quartiles, median, and max values for each categorical group after filtering to cases above 5,500. The implementation uses D3's `scaleBand`, `scaleLinear`, and `quantile` functions to compute the five-number summaries and render SVG elements, including vertical range lines, interquartile rectangles, and median markers. Data is loaded from a CSV file hosted on GitHub via D3's `csv` loader.

Vvryvarma5577@gmail.com

70% match