Close Editor Run Reset Auto Update CJS /**
* Example showcasing 3D variant of popular 2D statistics data visualization method of confidence ellipses
*/
const lcjs = require('@arction/lcjs')
const { lightningChart, PointStyle3D, ColorShadingStyles, Themes } = lcjs
const chart3D = lightningChart()
.Chart3D({
// theme: Themes.darkGold
})
.setTitle('3D scatter data set and confidence ellipsoid')
chart3D.forEachAxis((axis) => axis.setInterval({ start: -1.8, end: 1.8 }))
const scatterSeries = chart3D.addPointSeries().setName('Scatter series')
const confidenceEllipsoidSeries = chart3D.addPointSeries().setName('Confidence ellipsoid')
const xSize = 1.2
const ySize = 1.2
const zSize = 1.5
const pi2 = Math.PI * 2
const data = new Array(1000).fill(0).map((_) => {
// https://karthikkaranth.me/blog/generating-random-points-in-a-sphere/
const u = Math.random()
const v = Math.random()
const theta = u * pi2
const phi = Math.acos(2.0 * v - 1.0)
const r = Math.cbrt(Math.random())
const sinTheta = Math.sin(theta)
const cosTheta = Math.cos(theta)
const sinPhi = Math.sin(phi)
const cosPhi = Math.cos(phi)
const x = xSize * r * sinPhi * cosTheta
const y = ySize * r * sinPhi * sinTheta
const z = zSize * r * cosPhi
return { x, y, z }
})
scatterSeries.add(data)
confidenceEllipsoidSeries
.setDepthTestEnabled(false)
.setColorShadingStyle(new ColorShadingStyles.Simple())
.setPointStyle(
new PointStyle3D.Triangulated({
// Ellipsoid is rendered as sphere with individual sizes along X, Y and Z axes.
shape: 'sphere',
size: { x: xSize * 2, y: ySize * 2, z: zSize * 2 },
fillStyle: scatterSeries.getPointStyle().getFillStyle().setA(50),
}),
)
.add({ x: 0, y: 0, z: 0 })
const legend = chart3D.addLegendBox().add(chart3D)
JavaScript 3D Confidence Ellipsoid Chart - Editor Example showcasing the 3D variant of a common statistical data visualization method: confidence ellipses.
Confidence ellipses are used especially with statistic chart applications. A common usage, for example, is the 95% confidence ellipse, which visualizes the area that contains 95% of samples, which makes it easier for the user to understand which points are outliers .
The same can be done in more complex 3D scatter data set visualizations, in which case the ellipse becomes an ellipsoid .
Programmatically, this can be implemented by drawing the ellipsoid as a sphere with different sizes along the X, Y and Z axes.
const ellipsoidSeries = chart3D
. addPointSeries ( )
. add ( { x: 0 , y: 0 , z: 0 } )
. setPointStyle (
new PointStyle3D . Triangulated ( {
size: { x: 1 , y: 2 , z: 1.5 } ,
} ) ,
)