Skip to main content
SimilarExport ZIP
100%

Fork of Boxplot test

✓ Published0🌍 Public
CCurran Kelleher
Last edited Feb 15, 2022
Created on Feb 15, 2022
Forked from Hello VizHub

This example visualizes wine prices as a boxplot, displaying the minimum, maximum, median, and interquartile range of a dataset loaded from a Google Sheets CSV. It computes quartiles and scales the plot to fit a 600x600 canvas. The implementation uses the p5.js library, relying on `loadTable`, `createCanvas`, `rect`, `line`, and `ellipse` functions to render the chart and its axes with tick marks.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Boxplot test

This example displays a boxplot visualization of wine prices, with the chart area laid out on a pastel turquoise canvas. The code loads wine price data from a Google Sheets CSV via `loadTable` and computes the median, quartiles, and min/max values using JavaScript array operations. The drawing is implemented with p5.js, using `createCanvas` and `background` to set up the scene, though the actual boxplot rendering is not yet included in the draw loop.

SSean Sanchez
90% match
Loading thumbnail…

Fork of Fork of Box Plot

This example shows box plots for new COVID-19 cases by country, displaying minimum, first quartile, median, third quartile, and maximum values derived from a CSV dataset. The chart uses the D3 `scaleBand` and `scaleLinear` functions for positioning, with React components rendering each plot element as SVG. The data is aggregated using D3’s `nest`, `quantile`, and `rollup` functions, and the visualization is inspired by a D3 graph gallery example. Axis ticks are generated separately with custom React axis components.

Vvryvarma5577@gmail.com
76% match
Loading thumbnail…

Fork of Box Plot

This fork of a box plot visualizes the distribution of new COVID-19 cases across different locations, showing the minimum, first quartile, median, third quartile, and maximum values for each group. The chart uses React to render SVG elements, with D3.js functions like `scaleBand` and `scaleLinear` for axes and `quantile` for statistical calculations. The data is filtered to include only values above 5500 new cases and loaded from a CSV file via `d3.csv`.

XXiaoyu Su
76% 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
75% 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
75% 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
75% match
Loading thumbnail…

Box Plot

This example visualizes the distribution of salary data as a box plot, highlighting the minimum, first quartile, median, third quartile, and maximum values using a green box with a red median line. The data is loaded from a CSV file using p5.js’s `loadTable`, then processed and sorted in `setup` before a custom `drawBoxPlot` function renders the chart on a dimmed background. The code computes quantiles via a `quantile` helper function and uses p5.js drawing commands like `rect` and `line` to construct the plot directly on the canvas.

RRiya Mathur
74% 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
74% match