Cal-Adapt

July 01, 2022

Exploratory climate data visualization and web application design and development.

Project Link: Cal-Adapt

Cal-Adapt is both a complex web application and content rich website that enables users to access climate data for California in the form of over a dozen interactive data visualization dashboards, data download formats, and educational content.

Cal-Adapt’s frontend is a static site that interfaces with the backend through a RESTful API which is responsible for serving climate data. The majority of the project’s content is stored as Markdown files which are rendered to HTML serverside during the build process, making the page load times fast. Deployment is handled using a NodeJS script that enables deploying to various environments (production, development, beta, Netlify) utilizing feature flags to include or disable various features per environment.

From 2021 through 2022, Cal-Adapt underwent both a redesign and code refactor to address usability issues and technical debt. I assisted with this effort, both in the UX design and frontend development. For this process we utilized Figma for designing UI mocks, SvelteJS as the frontend framework, SapperJS for SPA like functionality, D3JS and Layer Cake for interactive charts, MapBoxGLJS for interactive geo-visualizations, and the Carbon Design system and component library for the user interface.

Cal-Adapt is the result of a collaboration between members of UC Berkeley’s Geospatial Innovation Facility, including Shruti Mukhtyar, Brian Galey, Eric Lehmer, Lucy Andrews, and Nancy Thomas and Eagle Rock Analytics with grant funding and directional support provided by the California State Energy Commission and the Governor’s Office of Planning and Research.

Technologies Used: - SvelteJS - SapperJS - Sass - NodeJS - Webpack - Carbon Design System

View code on Github

cal-adapt-01.jpg cal-adapt-02.jpg cal-adapt-03.jpg cal-adapt-04.jpg cal-adapt-05.jpg cal-adapt-06.jpg cal-adapt-07.jpg cal-adapt-08.jpg cal-adapt-09.jpg cal-adapt-10.jpg

Back to the Portfolio