Skip to main content
SimilarExport ZIP
100%

Box Plot

✓ Published0🌍 Public
Pprateekvasi
Last edited Feb 18, 2022
Created on Feb 17, 2022
Forked from HTML Starter

This example visualizes the distribution of miles per gallon (mpg) for 2012 vehicles using a box plot. It shows the minimum, first quartile, median, third quartile, and maximum values as horizontal lines and a shaded box, with numerical labels for each statistic. The chart is built with D3.js v4 and rendered as SVG, reading data from a CSV file. The code uses `d3.csv`, `d3.quantile`, and `d3.scaleLinear` to compute summary statistics and map the data to screen coordinates.

AI-generated description
MIT Licensed

Similar vizzes

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
86% match
Loading thumbnail…

Box Plot for Assignment 3

This example shows a box plot that summarizes the distribution of median city MPG values for all car makes and models from 2009 to 2012. It displays the minimum, first quartile, median, third quartile, and maximum values along a vertical axis. The visualization is built with p5.js, loading a CSV dataset from a GitHub gist. The code programmatically calculates the quartiles from the sorted data and uses basic shape-drawing functions like `rect()` and `line()` to construct the plot.

Vvishusikka
84% match
Loading thumbnail…

Box Plot - hover test

This box plot shows the distribution of fuel efficiency (mpg) for five car makes, with individual model data points overlaid on each box. The chart uses a D3.js v4 SVG renderer with `d3.csv` to load data, `d3.nest()` to compute quartiles and medians per make, and `d3.scaleBand` with `d3.scaleLinear` for the axes. Jittered circles display each vehicle, while a tooltip div is appended but remains non-functional.

Ddriftcafe
79% match
Loading thumbnail…

boxplot

This example visualizes the distribution of automobile prices using a box plot, displaying the minimum, maximum, quartiles, median, and outliers. The code loads data from a CSV file hosted on GitHub, calculates the statistical measures with d3.min, d3.max, d3.quantile, and d3.median, and renders the chart as an SVG. It uses the d3-boxplot library to draw the box plot, with the chart titled "Box Plot of Car Prices" within a 600x400 viewport.

Iindushashi.g@gmail.com
79% match
Loading thumbnail…

Box Plot Jitter

This example combines a box plot with jittered individual data points to show the distribution of fuel efficiency (mpg) for a 2012 Volvo XC90. The box plot displays quartiles, median, and whiskers, while red circles reveal each data point’s exact value, with mouseover tooltips showing the mpg. Using D3.js v4, it computes summary statistics via `d3.nest` and `d3.quantile`, then renders the SVG with scales, rectangles, lines, and circles. The data comes from the included `boxplot.csv` file.

Pprateekvasi
79% match
Loading thumbnail…

D3 Boxplot with Jitter for Assignment 4

This D3.js v4 visualization presents a boxplot of BMW model fuel efficiency (mpg) across model years 2009–2012, sourced from boxplot.csv. It summarizes the distribution per model using d3.nest() to compute quartiles and the interquartile range, which are drawn as a box-and-whisker plot via SVG shapes. Individual data points are overlaid as red circles with a fixed x-offset, and hover interactions (configured via d3.select and tooltip transitions) reveal exact mpg values. The chart uses d3.scaleBand for the categorical axis, d3.scaleLinear for the numeric axis, and d3.axisBottom/Left for tick marks.

Vvishusikka
78% match
Loading thumbnail…

Boxplot

This boxplot visualizes the distribution of fuel efficiency (mpg) for BMW models across different production years, using a single grouped box and jittered red data points to reveal individual measurements. A blue rectangle marks the interquartile range, black lines extend to the minimum and maximum values, and the median is highlighted, with tooltips showing exact mpg values on hover. The visualization is built with D3 v4, using `d3.nest`, `d3.quantile`, and `d3.scaleBand` to compute summary statistics and render SVG shapes, while `d3.csv` loads the data from a local CSV file containing model names and their corresponding mpg ratings.

Ddriftcafe
78% match
Loading thumbnail…

Box Plot - Highest MPG

This visualization displays the distribution of fuel efficiency (mpg) for the top five automobile makes—Hyundai, Honda, Kia, Scion, and MINI—across multiple model years. It combines box plots showing quartiles, median, and whisker ranges with individual green data points jittered along the x-axis to reveal underlying data density. Built with D3 v4, the chart uses `d3.nest()` and `d3.quantile()` to compute summary statistics from a CSV file, then renders SVG rectangles, lines, and circles with hover tooltips for each point.

Vvishusikka
76% match