VANA MSDS Dashboard

A single-page, interactive reference for process-chemical safety information.

Open the live dashboard

This academic dashboard organizes Material Safety Data Sheet information for the substances associated with a conceptual chromium-oxide production process. It turns a large body of safety content into a searchable visual catalog with risk levels, physical properties, exposure controls, first aid, transport information and regulatory notes.

The content is an academic exercise and does not replace a current, supplier-issued Safety Data Sheet or professional process-safety review.

Experience

• Filterable dashboard grouped by product, natural-gas components, process air, raw materials and by-products.
• Detail views following the standard 16-section SDS structure.
• Risk-level pills, chemical identifiers, composition tables and contextual safety guidance.
• Responsive layout with no build step or server dependency.
• Direct deployment through GitHub Pages.

Technical approach

The project is intentionally contained in one index.html file:

index.html
|-- semantic HTML structure
|-- responsive CSS design system
|-- embedded chemical/SDS dataset
`-- vanilla JavaScript rendering and navigation

This makes the dashboard portable and easy to review: clone the repository and open the file in any modern browser.

Run locally

git clone https://github.com/rafaelsava/msds_dashboard.git
cd msds_dashboard
python -m http.server 8000

Then visit http://localhost:8000.

Design decisions

• Each substance receives an accent palette while preserving a consistent information hierarchy.
• The landing view optimizes quick comparison; the detail view favors reading and operational reference.
• Data is rendered client-side so the demo remains fully static and inexpensive to host.
• The application labels the material as academic content and includes revision information inside each record.

Responsible use

Before using any chemical information operationally:

1. Obtain the latest SDS from the manufacturer or supplier.
2. Validate local regulations and exposure limits.
3. Confirm process-specific conditions with a qualified safety professional.
4. Treat emergency, toxicology and transport information here as illustrative only.

Author

Rafael Salcedo · Frontend development and technical information design.