vertical boxplot

100%

vertical boxplot

✓ Published0🌍 Public

Last edited Feb 9, 2017

Created on Dec 28, 2016

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.

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/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/721a75f2ca7ffa69aa837e7817564f56'>mastery over time</a>

mit Licensed

Similar vizzes

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

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

74% match

Loading thumbnail…

Box Plot Example

A box plot visualization compares score distributions between public and private schools, showing the interquartile range as green rectangles, median lines, and dashed whiskers extending to minimum and maximum values. The chart uses an SVG rendering approach with D3.js v5, employing `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the y-axis, and `d3.quantile` to compute quartiles. Axes are drawn with `d3.axisBottom` and `d3.axisLeft`, while the data consists of hardcoded arrays representing test scores for each school type.

UuwFengyuan

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…

Box Plot

This box plot visualizes the distribution of daily new COVID-19 cases across countries, showing minimum, quartiles, and maximum values. The chart uses React to render SVG elements with d3.scaleBand and d3.scaleLinear for axes, while d3.nest() and d3.quantile compute the statistical summaries from the CSV data. The code manually draws each box, median line, and whisker using React components, with d3.csv loading the source data.

Mmanasishrotri

71% match

Loading thumbnail…

Fork of Student Scores Bar Chart 2

This bar chart displays student scores from a CSV file, using a horizontal layout with student names on the y-axis and score values from 0 to 100 on the x-axis. The visualization uses d3.csv to load the data, d3.scaleBand for the categorical axis, d3.scaleLinear for the numeric scale, and d3.axisLeft and d3.axisBottom to render the axes. Each rectangle’s width is proportional to the score, with a purple fill and hover effect that reduces opacity. The chart is rendered as SVG within a 960×450 pixel viewport, with margins applied to position the plot area.

Pprudhvi

70% match

Loading thumbnail…

Fork of Box Plot

This example shows a box plot for daily new COVID-19 cases across countries, displaying the minimum, first quartile, median, third quartile, and maximum for each location. The chart uses React to render SVG elements, with D3 v5’s `scaleBand`, `scaleLinear`, `quantile`, and `nest` functions to compute summary statistics and position the boxes, whiskers, and median lines. Data is loaded as CSV from a GitHub gist and filtered to include only countries with case counts above 5,500.

Vvryvarma5577@gmail.com

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

70% match