Box Plot of Power and Class of Orbit

100%

Box Plot of Power and Class of Orbit

✓ Published1🌍 Public

Last edited Apr 9, 2023

Created on Apr 9, 2023

Forked from Box Plot

This interactive bar chart displays the distribution of satellite power (in watts) across different orbit classes. The visualization uses a box plot for each orbit category, showing the minimum, first quartile, median, third quartile, and maximum values. The code leverages d3’s `nest`, `quantile`, `scaleBand`, and `scaleLinear` functions to compute statistics and map data to SVG coordinates. Built with React and D3 v5, it renders directly to SVG elements, drawing box rectangles, center lines, and whisker caps using custom components like `Box`, `CenterLine`, and `UpLine`. The dataset is loaded from a Gist CSV file, and the y-axis is inverted to start from zero.

AI-generated description

A program to plot box plot

Plot is showing min, quantile 1, median,quantile3, max values for sepallength of Setosa, Versicolor, and Viginica Iris data is available here [https://gist.github.com/manasishrotri/ee68ea71a0867091c6dbf96b77d0c63f]

BoxPlot inspired from (d3-graph-gallary)[https://www.d3-graph-gallery.com/graph/boxplot_several_groups.html]

MIT Licensed

Similar vizzes

Loading thumbnail…

Box plot for Dry Mass and Class of Orbit

Box plots display the distribution of satellite Dry Mass (in kilograms) across different Classes of Orbit, summarizing the minimum, first quartile, median, third quartile, and maximum values. The chart uses a vertical layout with a reversed y-axis, colored teal boxes, and black whisker lines. Built with React and D3 v5, the visualization computes quartiles via `d3.quantile` and renders custom SVG components like `boxRect` and `CenterLine`. Data is loaded from a CSV file using `d3.csv`, filtered to non-negative mass values, and grouped by orbit class before plotting.

Vvryvarma5577@gmail.com

82% match

Loading thumbnail…

Box plot for Launch Mass and Class Of Orbit

This visualization uses box plots to show the distribution of launch mass (in kilograms) across different classes of orbit. The plot displays the minimum, first quartile, median, third quartile, and maximum for each orbit class, with whiskers extending to 1.5 times the interquartile range. Built with React and D3 v5, the chart uses `scaleLinear` and `scaleBand` for axes, `quantile` for statistical calculations, and custom SVG components for rendering the box rectangles, median lines, and whisker caps. Data comes from a CSV file loaded via D3’s `csv` function.

Vvryvarma5577@gmail.com

80% match

Loading thumbnail…

Boxplot testing

This example demonstrates interactive box plots that visualize the distribution of selected numeric columns, optionally grouped by a categorical variable through dropdown menus. It shows quartiles, medians, and outliers, with tooltips revealing exact values on hover. The visualization is built with React and D3 v5, using `d3.nest()` to compute summary statistics and `d3.scaleLinear` for the y-axis. Rendered as SVG with animated transitions, box plots and outlier circles respond to mouse events, highlighting the interquartile range while dimming others.

SSchmittYannic

68% match

Loading thumbnail…

Scatter Plot UCS Satellite Dataset

This scatter plot visualizes the relationship between dry mass and power for satellites in the UCS Satellite Dataset. Each circle represents a satellite, with its position determined by mass on the x-axis and power on the y-axis, while color encodes the satellite’s country of origin. The code loads the CSV data using D3’s `csv` method, applies linear scales via `scaleLinear`, and renders the SVG circles with `d3.schemeCategory10` for color mapping. Axis labels are added via `axisLeft` and `axisBottom`, demonstrating a straightforward D3 v6 data-binding workflow.

RRohith Reddy

67% match

Loading thumbnail…

Boxplot in D3

This boxplot visualization displays the distribution of a dataset through a series of vertical box-and-whisker plots, with each plot summarizing key statistics such as the median, quartiles, and potential outliers. The chart is rendered using the D3.js library, specifically leveraging `d3.select` to append SVG elements and `d3.scaleLinear` for the y-axis mapping. Data values are drawn using SVG `rect` and `line` elements, while axes are annotated via `d3.axisLeft`. The example emphasizes standard boxplot conventions, with whiskers extending to the most extreme data points within 1.5 times the interquartile range, and individual outliers plotted as circle markers.

RRiya Mathur

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

66% match

Loading thumbnail…

Fork of Box Plot

Vvryvarma5577@gmail.com

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

66% match