Tatar Dashboard Project 1st Submission

README.md

@@ -1 +1,23 @@
-Add a readme for your dashboard here. Include content overview, data citations, and any relevant technical details.
+# Hawai'i Climate Change Risk Assessment
+## Author: Tatar Anurakwongsri
+## Date: 10/21/2026
+
+[Check website here](https://canura8818.github.io/dashboard-project/)
+
+### Motivation
+
+Climate change brings erratic weather patterns, rising sea levels, and more extreme seasonal temperatures. These effects can be felt worldwide, but island communities are disproportionately affected due to thir sea-level elevation and decreased capacity to adapt in their natural landscape. Climate change, on many levels, brings uncertainty that can be difficult to predict or quantify. A key tool to account for these uncertainties is scenario planning. If trying to accurately predict the future is not an option, then planning for different outcomes will better prepare communities for whatever the future holds.
+
+### Audience
+
+This project aims to provide a way for planners in Hawaii to better prepare for future climate scenarios through identifying areas with high economic value, such as downtown areas, waterfronts, and agricultural land. Furthermore, this could be used as an educational tool to explore the forefront threats of climate change to Hawaii.
+
+### Considerations
+
+Most data is not up to date. Most of the data used is from 2018. The project is currently unfinished, as of 10/21/2026, in which more features will be added in the future!
+
+### Data Sources
+
+- Hawaii OpenData: https://opendata.hawaii.gov/group/geospatial?
+- Land Cover: https://developers.google.com/earth-engine/datasets/catalog/COPERNICUS_CORINE_V20_100m#code-editor-javascript
+- Climate: https://developers.google.com/earth-engine/datasets/catalog/NOAA_CFSV2_FOR6H_HARMONIZED#bands

css/style.css

@@ -0,0 +1,195 @@
+/* css/style.css */
+
+/* 1. Global CSS Variables */
+:root {
+  --color-primary: #0080ff;
+  --color-text: #212529;
+  --color-border: #000;
+  --color-tab-inactive: #c8ced3;
+  --color-tab-text-inactive: #495057;
+  --color-bg-map-fallback: #c0c0c0;
+}
+
+/* 2. Full Viewport Height Chain */
+html, body {
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-size: clamp(10px, 1.5vw, 14px);
+  font-family: 'News Cycle', sans-serif;
+  overflow: hidden;
+}
+
+/* 3. Layout Structure */
+header {
+  height: 5vh;
+  font-size: clamp(0.75rem, 2vw, 1rem);
+  box-sizing: border-box;
+  border-bottom: 2px solid var(--color-border);
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+main {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  box-sizing: border-box;
+  height: 90vh;
+  padding: 0.5vh;
+}
+
+footer {
+  box-sizing: border-box;
+  height: 2vh;
+  font-size: clamp(0.65rem, 1.5vw, 0.9rem) 
+}
+
+#footnote {
+  margin: 0;
+  margin-left: 1%;
+  box-sizing: border-box;
+}
+
+/* 4. Map Viewport */
+.map-section {
+  position: relative;
+  flex: 1 1 60%;
+  min-width: 280px;
+  height: 100%;
+  background-color: var(--color-bg-map-fallback);
+}
+
+.map { 
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+/* 5. Sidebar & Navigation Tabs */
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  z-index: 1;
+  flex: 1 1 30%;
+  min-width: 260px;
+  width: 30%;
+  height: 100%;
+  border-left: 2px solid var(--color-border);
+  box-sizing: border-box;
+  background-color: #fff;
+}
+
+.sidebar-tabs {
+  display: flex;
+  width: 100%;
+  border-bottom: 2px solid var(--color-border);
+}
+
+.tab-btn {
+  flex: 1;
+  padding: clamp(0.5vh, 1.2vh, 1.5vh);
+  font-size: clamp(0.85rem, 1.5vw, 1.2rem);
+  font-size: 1.2rem;
+  font-weight: bold;
+  font-family: inherit;
+  border: none;
+  cursor: pointer;
+  background-color: var(--color-tab-inactive);
+  color: var(--color-tab-text-inactive);
+  transition: background-color 0.2s, color 0.2s;
+}
+
+.tab-btn.active {
+  background-color: #fff;
+  color: var(--color-border);
+  border-bottom: 3px solid var(--color-primary);
+}
+
+/* 6. Panels & Controls */
+.panel {
+  display: none;
+  flex-direction: column;
+  height: 100%;
+  overflow-y: auto;
+  padding: clamp(0.5vh, 1vh, 2vh);
+  box-sizing: border-box;
+}
+
+.panel.active {
+  display: flex;
+}
+
+.map-search-controls,
+.scenario-controls,
+.map-layer-controls,
+.chart-section {
+  width: 100%;
+  padding: clamp(0.4vh, 0.8vh, 1.2vh);
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  margin-bottom: 1vh;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+#island-select {
+  font-size: clamp(0.9rem, 1.5vw, 1.1rem);
+  font-weight: bold;
+  padding: clamp(0.5vh, 1vh, 1.5vh);
+  margin-bottom: clamp(0.5vh, 1vh, 1.5vh);
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.scenario-controls label,
+.map-layer-controls label {
+  font-size: clamp(0.9rem, 1.5vw, 1.1rem);
+  font-weight: bold;
+  display: block;
+  margin-bottom: 0.5vh;
+  cursor: pointer;
+}
+
+/* 7. Year Range Slider Controls */
+.year-control {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  margin-bottom: 1vh;
+}
+
+.year-control label {
+  font-weight: bold;
+  font-size: clamp(1rem, 1.8vw, 1.3rem);
+  color: var(--color-text);
+  display: flex;
+  justify-content: space-between;
+}
+
+.year-control input[type="range"] {
+  width: 100%;
+  min-height: 20px;
+  box-sizing: border-box;
+  accent-color: var(--color-primary);
+  cursor: pointer;
+}
+
+/* 8. Chart Canvas */
+#chart {
+  width: 100%;
+  height: clamp(200px, 30vh, 350px);
+  box-sizing: border-box;
+}
+
+/* 9. Button styling */
+.btn-3d-active {
+  background-color: var(--color-primary);
+  color: white;
+}