@nice2dev/ui-science

Scientific visualization components for React.

Features

• NiceScientificChart — Advanced scientific charting with error bars, annotations
• Nice3DPlot — 3D surface plots, scatter plots, and vector fields
• NiceMolecularViewer — Molecular structure visualization (PDB, MOL2)
• NicePhylogeneticTree — Evolutionary tree visualization
• NiceGeographicMap — GeoJSON-based mapping with projections

Installation

npm install @nice2dev/ui-science

Usage

import { NiceScientificChart, Nice3DPlot, NiceMolecularViewer } from '@nice2dev/ui-science';

function App() {
  return (
    <div>
      <NiceScientificChart
        data={[
          { x: 1, y: 2.5, error: 0.3 },
          { x: 2, y: 4.1, error: 0.2 },
        ]}
        showErrorBars
      />

      <Nice3DPlot
        type="surface"
        data={(x, y) => Math.sin(x) * Math.cos(y)}
        xRange={[-Math.PI, Math.PI]}
        yRange={[-Math.PI, Math.PI]}
      />

      <NiceMolecularViewer format="pdb" data={pdbContent} style="ball-and-stick" />
    </div>
  );
}

Styling

This package ships unstyled component logic. Import the shared CSS bundle once at your app entrypoint:

import '@nice2dev/ui/style.css';

Optional: opt into the legacy shorthand token aliases (--bg-*, --text-*, --border-*, ...) when migrating from a custom design-token system:

import '@nice2dev/ui/css/legacy-bg-text-aliases.css';

License

MIT