A4 Box Plot (D3)

100%

A4 Box Plot (D3)

✓ Published0🌍 Public

Last edited Feb 21, 2024

Created on Feb 21, 2024

This visualization shows the distribution of average video game play lengths from 2004 to 2008 using a single horizontal box plot, with outliers removed via the interquartile range method. The chart displays the min, max, median, Q1, and Q3 values, and hovering over any of these elements reveals the exact numeric value via SVG `<title>` tooltips. Built with D3 v7, the code loads CSV data from a GitHub gist, uses `d3.quantile` to compute quartiles, and renders the plot using SVG shapes, scales, and axes.

AI-generated description

Visualization of average video game durations from the CORGIS dataset made with D3. Outliers have been removed from the data. Implementation learned from D3 Graph Gallery.

Hover over min, max, or median to see values. Hover over the box to see the Q1 and Q3 values.

MIT Licensed

Similar vizzes

Loading thumbnail…

A4 Box Plot

A box plot displays the distribution of used video game prices from 2003–2010, based on data sourced from CORGIS. It visualizes key statistics including the median, interquartile range, and outlier boundaries derived using D3’s `d3.quantile` and `d3.median` functions. The chart uses D3 v7 to create an SVG rendering with a linear scale (`d3.scaleLinear`) for the x-axis, and draws rectangles and lines to represent the quartiles and range.

AAllen Jake Polintan

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

82% match

Loading thumbnail…

Box Plot

This example shows a box plot of used video game prices from 2004–2010, with a summary of the median, quartiles, and outliers displayed across a price axis. The visualization highlights the distribution’s center and spread, using a purple rectangle for the interquartile range and small squares to mark extreme values. Built with p5.js, the sketch loads CSV data via `loadTable`, computes quartiles and the IQR manually, and renders the chart with `rect` and `text` calls on an 800×600 canvas.

AAllen Jake Polintan

80% match

Loading thumbnail…

Fork of D3 Boxplot

This visualization displays the global sales distribution of top video games from 2015, highlighting the median, quartiles, and whiskers in a box plot. The chart uses d3.quantile to calculate statistical values and renders a vertical box with median line, whiskers, and min/max labels using SVG. The data is embedded directly as an array of sales figures, and d3.scaleLinear maps sales values to pixel positions. The code was adapted from a p5.js bar chart example, as shown in the included sketch.js file.

KKwasi Acquaye

77% match

Loading thumbnail…

Video Game Platforms Box and Whisker

This visualization displays box-and-whisker plots of annual video game platform sales, with each platform as a separate facet and years on the x-axis. The boxes show quartiles, whiskers extend to the IQR bounds, and outliers appear as dots, with the median marked by a thicker line. Using the Observable Plot library and D3’s `d3.csv` and `d3.rollup`, the code aggregates Global_Sales from the vgsales.csv dataset, repeating data entries to compute quartiles via `d3.quantile`. The custom `boxX` function from BoxPlot.js builds the marks, and the plot is rendered into the document body at full window size.

DDaniel Ribaudo

75% match

Loading thumbnail…

D3 Boxplot

This example displays a bar chart of global sales figures for video games in 2016, with each game’s sales in millions of units shown on the y-axis and game names on the x-axis. It uses D3 v6 to build the visualization, loading data from a CSV file that is manually encoded into a JavaScript array. The SVG rendering uses `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the numeric y-axis, and `d3.axisBottom` and `d3.axisLeft` to generate axis ticks, with circles placed via `append('circle')` and positioning computed from the scales.

KKwasi Acquaye

74% match

Loading thumbnail…

Bubble Chart

This bubble chart visualizes video game data by plotting average play length on the x-axis against review scores on the y-axis, with circle radius representing average completionist length and color encoding the console platform. It uses d3.csv to load the dataset, d3.scaleLinear for positioning and sizing, and d3.scaleOrdinal with d3.schemeSet1 for categorical colors. The SVG visualization includes hover tooltips via the title element, axis labels, and custom legends for both color and size, all rendered through D3 v6 selection and data-join methods.

AAllen Ho

74% match

Loading thumbnail…

A4 - boxPlot

This example visualizes the total expected goals (xG) accumulated by football teams in home games using a box plot. The chart displays the distribution of these values across all teams, with the box representing the interquartile range and whiskers extending to the minimum and maximum within 1.5 times the IQR. The code loads CSV data from a GitHub gist using `d3.csv`, aggregates values with `d3.rollup`, and computes quartiles with `d3.quantile`. The visualization is rendered as SVG using D3 scales, axes, and shape primitives.

RRavneet Singh Bhatia

73% match