boxPlot

100%

✓ Published1🌍 Public

Last edited Feb 15, 2022

Created on Feb 9, 2022

Forked from dotPlot

This example visualizes a boxplot of CO2 levels (carbon intensity in gCO2/kWh) for European countries in 2020, displaying statistical summaries including minimum, maximum, median, and quartiles. The plot is drawn manually on a 1000x1000 canvas using p5.js, with loadTable() to import the CSV data and custom JavaScript functions for sorting and calculating median values. The visualization includes labeled axes and a title to communicate the distribution of carbon intensity across countries.

AI-generated description

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

Similar vizzes

Loading thumbnail…

dotPlot

This dot plot visualizes carbon intensity (gCO2/kWh) for 2020 across multiple countries, with each circle representing a data point positioned along the y-axis based on its value. The chart includes labeled axes, tick marks, grid lines, and a rotated axis title indicating the measured metric. The visualization is built using p5.js, loading data from a CSV file via `loadTable()` and rendering circles with the `circle()` function. Data is processed from the `powerData.csv` source, with countries listed on the x-axis and carbon intensity values plotted vertically.

Hhollyjpotter

82% match

Loading thumbnail…

barChart

This example displays a vertical bar chart of carbon intensity data (gCO2/kWh) for 2020, loaded from a CSV file hosted on a GitHub gist. Each bar’s height represents a data value, with categorical labels drawn beneath the bars and a rotated axis title at the bottom left. The visualization is built using the p5.js library, with custom functions `drawTickYAxes` and `drawTickXAxes` that render grid lines and tick marks on the plot. A maximum value from the data drives the y-axis scale, labeled in increments of 50.

Hhollyjpotter

75% match

Loading thumbnail…

P5 BoxPlot

This example renders a boxplot of industrial natural gas prices in Hawaii using p5.js. It loads CSV data from a GitHub gist, computes quartiles and median from the price array, and draws the plot with rectangles, lines, and text labels. The chart displays minimum, maximum, and quartile values on a numeric scale, with axes marked from 0 to 800. The sketch uses p5.js functions like `loadTable`, `createCanvas`, and `rect` within the `setup` and `draw` loops.

Mmariahdiaz

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

Loading thumbnail…

Box Plot

This box plot visualizes the distribution of COVID-19 case counts across selected countries, showing min, first quartile, median, third quartile, and max values using a vertical whisker-and-box layout. The chart is built with React and D3 v5, using `scaleLinear` and `scaleBand` for positioning, `d3.nest` and `d3.quantile` to compute summary statistics, and SVG `rect` and `line` elements for rendering. Data comes from a CSV file of global COVID-19 figures, filtered to include only countries with at least 5,500 new cases.

CChristian Magelssen

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

73% match

Loading thumbnail…

Box Plot with p5.js

This visualization displays box plots of California birth rates per 1000 people across seven years, with each plot summarizing the distribution for a given year. The p5.js sketch loads CSV data via `loadTable()`, groups rows by year, and computes quartiles and median for each group. It renders colored rectangles for interquartile ranges, median lines, and whiskers using `rect()` and `line()`, with gridlines and axis labels drawn on an 800×500 canvas.

OOlha

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

71% match