BoxPlot D3

100%

✓ Published0🌍 Public

Last edited Feb 21, 2024

Created on Feb 19, 2024

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.

AI-generated description

A Box Plot of Metric Review Scores across 50 games, the lines are interactive to show the media, q1, a3, min, and max

Sources: https://d3js.org/ https://d3-graph-gallery.com/ http://learnjsdata.com/read_data.html https://learning.oreilly.com/library/view/interactive-data-visualization/9781491921296/ch06.html#idm140093201255856

MIT Licensed

Similar vizzes

Loading thumbnail…

BoxPlot

This box plot visualizes the distribution of Metric Review Scores for 50 video games, each selected to represent a single genre. It displays the median, quartiles, minimum, and maximum values, with outlier scores plotted as individual circles. The visualization uses the p5.js library with `createCanvas`, `loadTable`, and custom hover interactions to display box plot statistics. Data is loaded from a remote CSV file containing video game review metrics, and the scores are sorted and processed to calculate statistical values.

AAllen Ho

87% match

Loading thumbnail…

A4 Box Plot (D3)

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.

NNoah C.

82% match

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between Metric Review Scores and the average length of all playstyles across 50 video games. Each circle represents a game, with its horizontal position indicating playtime length and vertical position indicating review score, while a hover effect highlights individual points. The plot uses D3 v6 with `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, and `d3.csv` to load data from a GitHub gist. The visualization is rendered as SVG, with circle color encoding review score intensity.

AAllen Ho

80% match

Loading thumbnail…

Video Game Data Viz

A horizontal bar chart displays the top 25 video games by critic score, using D3 v5's `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to map data from a Kaggle dataset. The SVG render positions steelblue rectangles whose widths correspond to each game’s numerical `Critic_Score`, with game names on the y-axis and score values on the x-axis. The code also prints a data summary, including row count, column count, and file size, alongside the first ten rows of the dataset.

EEmma Schaale

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

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

78% match

Loading thumbnail…

D3 Bar Chart

This example displays a bar chart using D3.js within a React framework, showing the average review scores of top video game publishers from a CSV file. The visualization loads data from `top_10.csv` using the `loadTable` function and renders bars as colored `div` elements with steelblue backgrounds. The code uses D3.js selection methods like `d3.select` and `.selectAll` to bind data, while also defining an SVG canvas with width and height attributes. The chart is generated client-side entirely with JavaScript and CSS, without any additional charting libraries.

Pplai1

78% match

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

78% match