An interactive psychrometric chart experience for HVAC engineers and data-driven designers.
Built with Next.js, D3, Tailwind, framer-motion, and psychrolib.
- Accurate psychrometrics – every state point and contour is calculated via psychrolib, matching ASHRAE Fundamentals.
- Interactive charting – zoom, pan, hover crosshair, and click-to-lock markers with millidegree/hour precision.
- Multiple overlays – saturation, relative humidity, enthalpy, wet-bulb, and specific-volume lines that densify as you zoom.
- Unit-aware UI – instantly flip between SI and IP units; all inputs and outputs update in sync.
- Scenario templates – preload DOAS, data center, and greenhouse loops or overlay them for comparisons.
- Comparison runs – snapshot chart states, toggle visibility, and layer multiple processes at once.
- Shareable snapshots – encode the full UI state into URLs for quick collaboration.
- PDF export – capture the chart + live properties in a ready-to-send document.
- Responsive dark UI – AMOLED-ready layout with condensed control panel and live property table.
- Built-in analytics – Vercel Analytics tracks visits and page views with zero config post-deploy.
Clone the repository and install dependencies:
npm installRun the development server:
npm run devVisit http://localhost:3000 to explore the chart.
- Next.js App Router with TypeScript
- D3.js for SVG rendering and zoom handling
- psychrolib for thermodynamic equations
- Tailwind CSS + shadcn/ui for styling
- framer-motion for subtle animations
├─ app/
│ ├─ layout.tsx # Root layout & metadata
│ └─ page.tsx # Main page layout & interactions
├─ components/
│ └─ psychro-chart.tsx # D3-based chart component
├─ lib/
│ └─ psychrometrics.ts # psychrolib helpers & curve generators
├─ public/
│ └─ favicon.png
└─ README.md
This project is released under the MIT License. See LICENSE for details.
Made by Katakuri