The same plot in 14 other libraries — JavaScript: Chart.js, D3.js, Apache ECharts, Highcharts; Python: Altair, Bokeh, lets-plot, Matplotlib, Plotly, plotnine, Pygal, Seaborn; R: ggplot2; Julia: Makie.jl. Compare all 15 side by side: Cumulative Explained Variance for PCA Component Selection in Python, R, Julia and JavaScript.
A line plot showing the cumulative proportion of explained variance as a function of the number of Principal Component Analysis (PCA) components. This visualization helps determine the optimal number of components to retain by displaying the trade-off between dimensionality reduction and information preservation. The cumulative curve typically exhibits an elbow pattern where additional components yield diminishing returns, and horizontal threshold lines (e.g., 90%, 95%) guide component selection decisions.
// anyplot.ai
// line-pca-variance-cumulative: Cumulative Explained Variance for PCA Component Selection
// Library: muix 7.29.1 | JavaScript 22.23.2
// Quality: 91/100 | Created: 2026-08-26
import { LineChart } from "@mui/x-charts/LineChart";
import { ChartsReferenceLine } from "@mui/x-charts/ChartsReferenceLine";
import { Box, Typography } from "@mui/material";
const t = window.ANYPLOT_TOKENS;
// --- Data (in-memory, deterministic) ----------------------------------------
// A 16-sensor vibration/temperature/pressure array on a rotating pump feeds a
// predictive-maintenance model. PCA on the standardized sensor readings finds
// a handful of latent modes (imbalance, misalignment, bearing wear, thermal
// drift, ...) that explain most of the signal — the classic "how many
// components do we keep" question. Eigenvalues decay roughly geometrically,
// which is typical for correlated sensor arrays and produces the elbow shape
// the cumulative curve is meant to reveal.
const rawEigenvalues = [
28, 17, 13, 9.5, 7, 5.5, 4.2, 3.2, 2.4, 1.9, 1.5, 1.2, 0.95, 0.75, 0.6, 0.5,
];
const totalVariance = rawEigenvalues.reduce((sum, v) => sum + v, 0);
const varianceRatio = rawEigenvalues.map((v) => v / totalVariance);
const cumulativeVariance = [];
varianceRatio.reduce((sum, v, i) => {
const next = sum + v;
cumulativeVariance[i] = next;
return next;
}, 0);
const componentNumbers = rawEigenvalues.map((_, i) => i + 1);
// First component count whose cumulative curve reaches each guidance threshold.
const componentsFor = (threshold) => cumulativeVariance.findIndex((v) => v >= threshold) + 1;
const ninetyPctComponents = componentsFor(0.9);
const ninetyFivePctComponents = componentsFor(0.95);
const TITLE = "line-pca-variance-cumulative · javascript · muix · anyplot.ai";
// --- Chart (default-exported component — the harness mounts it) ------------
export default function Chart() {
const size = window.ANYPLOT_SIZE;
const padding = { top: 28, right: 48, bottom: 16, left: 16 };
const titleBlockHeight = 56;
// MUI X's y-axis `label` prop offsets itself from a hardcoded tick-width
// guess rather than the tick labels' real measured width, so it collides
// with the "100%"/"90%" tick text. A hand-rotated label in its own flex
// column sidesteps that and gives predictable, collision-free spacing.
const yLabelWidth = 32;
const chartWidth = size.width - padding.left - padding.right - yLabelWidth;
const chartHeight = size.height - padding.top - padding.bottom - titleBlockHeight;
return (
<Box
sx={{
width: size.width,
height: size.height,
boxSizing: "border-box",
padding: `${padding.top}px ${padding.right}px ${padding.bottom}px ${padding.left}px`,
display: "flex",
flexDirection: "column",
}}
>
<Typography sx={{ fontSize: 22, fontWeight: 600, color: "text.primary", mb: "20px", lineHeight: 1 }}>
{TITLE}
</Typography>
<Box sx={{ display: "flex", flexDirection: "row", height: chartHeight }}>
<Box sx={{ width: yLabelWidth, display: "flex", alignItems: "center", justifyContent: "center" }}>
<Typography
sx={{
fontSize: 16,
color: "text.secondary",
whiteSpace: "nowrap",
transform: "rotate(-90deg)",
}}
>
Explained Variance
</Typography>
</Box>
<LineChart
width={chartWidth}
height={chartHeight}
skipAnimation
series={[
{
id: "cumulative",
label: "Cumulative variance explained",
data: cumulativeVariance,
curve: "monotoneX",
showMark: true,
color: t.palette[0],
valueFormatter: (v) => `${(v * 100).toFixed(1)}%`,
},
{
id: "individual",
label: "Variance from this component",
data: varianceRatio,
curve: "monotoneX",
showMark: true,
color: t.palette[2],
valueFormatter: (v) => `${(v * 100).toFixed(1)}%`,
},
]}
xAxis={[
{
data: componentNumbers,
scaleType: "point",
label: "Number of Principal Components",
valueFormatter: (v) => `${v}`,
tickLabelStyle: { fontSize: 14 },
labelStyle: { fontSize: 16 },
},
]}
yAxis={[
{
min: 0,
max: 1,
valueFormatter: (v) => `${Math.round(v * 100)}%`,
tickLabelStyle: { fontSize: 14 },
},
]}
grid={{ horizontal: true }}
slotProps={{
legend: {
direction: "row",
labelStyle: { fontSize: 14 },
itemMarkWidth: 18,
itemMarkHeight: 10,
markGap: 8,
},
}}
sx={{
"& .MuiLineElement-series-cumulative": { strokeWidth: 3 },
"& .MuiLineElement-series-individual": { strokeWidth: 2, strokeDasharray: "6 4" },
"& .MuiMarkElement-series-cumulative": { r: 5 },
"& .MuiMarkElement-series-individual": { r: 4 },
"& .MuiChartsGrid-line": { strokeDasharray: "4 3" },
}}
>
<ChartsReferenceLine
y={0.9}
label={`90% → ${ninetyPctComponents} components`}
labelAlign="start"
lineStyle={{ stroke: t.amber, strokeWidth: 1.5, strokeDasharray: "8 4" }}
labelStyle={{ fontSize: 13, fill: t.inkSoft }}
/>
<ChartsReferenceLine
y={0.95}
label={`95% → ${ninetyFivePctComponents} components`}
labelAlign="start"
lineStyle={{ stroke: t.amber, strokeWidth: 1.5, strokeDasharray: "8 4" }}
labelStyle={{ fontSize: 13, fill: t.inkSoft }}
/>
</LineChart>
</Box>
</Box>
);
}
Runnable source as JSON, for any HTTP client: https://api.anyplot.ai/specs/line-pca-variance-cumulative/muix/code. Any spec id and library id listed in llms-full.txt fit the same URL shape; every URL below is complete and callable.
{
"spec_id": "line-pca-variance-cumulative",
"language": "javascript",
"library": "muix",
"page": "https://anyplot.ai/line-pca-variance-cumulative/javascript/muix",
"hub": "https://anyplot.ai/line-pca-variance-cumulative",
"code_json": "https://api.anyplot.ai/specs/line-pca-variance-cumulative/muix/code",
"spec_json": "https://api.anyplot.ai/specs/line-pca-variance-cumulative",
"render_light_png": "https://storage.googleapis.com/anyplot-images/plots/line-pca-variance-cumulative/javascript/muix/plot-light.png",
"render_dark_png": "https://storage.googleapis.com/anyplot-images/plots/line-pca-variance-cumulative/javascript/muix/plot-dark.png",
"interactive_light_html": "https://storage.googleapis.com/anyplot-images/plots/line-pca-variance-cumulative/javascript/muix/plot-light.html",
"interactive_dark_html": "https://storage.googleapis.com/anyplot-images/plots/line-pca-variance-cumulative/javascript/muix/plot-dark.html",
"quality_score": 91.0,
"license": "MIT",
"guide": "https://anyplot.ai/llms.txt"
}Part of Cumulative Explained Variance for PCA Component Selection on anyplot.ai.