← All use cases

Scientific Research Visualization

Publication-quality scientific visualizations with Chart.ts. 3D scatter plots and surface plots via @chartts/gl, violin and box plots for distributions, parallel coordinates for multivariate data, and statistical analysis with @chartts/statistics and @chartts/regression.

Chart Types You Need

Scatter3D

3D scatter plots for multivariate data exploration

Surface3D

3D surface plots for continuous field visualization

Violin Plot

Kernel density estimation for distribution shape

Box Plot

Quartile ranges, outliers, and group comparison

Parallel Coordinates

Multivariate data with n-dimensional comparison

Heatmap

Correlation matrices and intensity maps

Histogram

Frequency distributions with configurable bins

Example Implementation

dashboard.tsx
import { Scatter3D, SurfacePlot } from "@chartts/gl"
import { ViolinChart, BoxPlotChart, HeatmapChart } from "@chartts/react"
import { regression } from "@chartts/regression"
import { kde, percentile } from "@chartts/statistics"

export function ResearchDashboard({ experiment }) {
  const fit = regression(experiment.observations, { type: "polynomial", degree: 2 })
  const density = kde(experiment.measurements, { bandwidth: 0.5 })

  return (
    <div className="grid grid-cols-12 gap-4">
      <div className="col-span-6 rounded-xl card p-6">
        <Scatter3D
          data={experiment.samples}
          x="concentration" y="temperature" z="yield"
          colorBy="catalyst"
          className="h-96"
          orbit
        />
      </div>
      <div className="col-span-6 rounded-xl card p-6">
        <ViolinChart
          data={experiment.groups}
          category="treatment"
          value="response"
          className="h-96"
          showMedian
          showQuartiles
        />
      </div>
      <div className="col-span-12 rounded-xl card p-6">
        <HeatmapChart
          data={experiment.correlationMatrix}
          x="varA" y="varB" value="r"
          className="h-72"
          colorScale={["#3b82f6", "#ffffff", "#ef4444"]}
        />
      </div>
    </div>
  )
}

Why Chart.ts for Scientific Research

3D scatter and surface plots via WebGL (@chartts/gl)
Violin plots with kernel density estimation
Statistical analysis: mean, median, percentile, KDE
Regression trend lines (linear, polynomial, exponential)
SVG export for journal and conference publications
Parallel coordinates for high-dimensional data
Heatmaps for correlation matrices and p-value tables
TypeScript types prevent data shape errors in analysis code

Start building your scientific research

Install Chart.ts and have your first chart rendering in 2 minutes.

$npm install @chartts/react
Get StartedSee Examples