[DMP 2024]: Met Data for Everyone #386

[sbhaya]

Description

India Water Portal has meteorological datasets for 13 climate parameters for all districts of India from 1901 to 2002. Researchers in academia and practice often refer to these datasets. In this project, we visualize these datasets in simple charts that can be exported.

Parameters Precipitation Minimum temperature Average temperature Maximum temperature Cloud cover Vapour pressure Wet day frequency Diurnal temperature range Ground frost frequency Reference Crop Evapotranspiration Potential Evapotranspiration

Goals & Mid-Point Milestone

Goals

• [X] [Mobile Responsive webpage template created]
• [X] [Working Webpage that pulls data from DB]
• [X] [All numeric values are calculated and displayed]
• [X] [Basic Charts are plotted]

Setup/Installation

No setup needed. All CSVs are available here

Expected Outcome

1. Create a webpage to generate charts based on the datasets
2. Users will select State, District, time span and a parameter
3. Based on the selection, show tables and plot charts

Ex: User selects Bihar State, selects District Purnia, selects 1945 to 1950. User is shown

1. Monthly Mean values
2. Annual Mean values
3. Annual Totals
4. Trend Charts

User is shown a trend chart with months/years on X axis and values on Y axis.

C4GT Finalist Contributor

Kushagra Gupta

Implementation Details

Any visualisation framework - D3. Front End - NextJS Backend - NodeJS [ExpressJs] Database - PsotgreSQL

Mockups/Wireframes

Product Name

India Water Portal

Organisation Name

Arghyam

Domain

Water

Tech Skills Needed

D3.js

Mentor(s)

Sreechand Tavva, @sbhaya

Category

Backend, Database, Frontend

[sbhaya]

Weekly Goals

Week 1

• [x] Create PRD
• [x] Create User Persona
• [x] Create User Flow Journey
• [x] Research and document about existing open source projects that can be integrated to solve the issue

Week 2

• [x] Create Low fidelity wireframes
• [x] Define Frontend File and Folder Structure
• [x] Setup the frontend directory and layout

Week 3

• [x] Create the Navbar
• [x] Create the Met Data Info Section
• [x] Create the Statistics and Visualizations info cards

Week 4

• [x] Create the Statistics UI

Week 5

• [x] Document and research on API and Backend Implementation

Week 6

• [x] Deployment and User testing

Week 7

• [x] Analyse the mid point evaluation feedback and integrate them into the project accordingly
• [x] Create a Chart component using D3.js with informative and interactive visualizations.

Week 8

• [x] Migrate data from CSV files to an AWS RDS PostgreSQL instance and ensure data consistency.

Week 9

• [x] Improve server logic for calculating and handling statistics efficiently.

Week 10

• [x] Implement server-side logic for generating visualizations based on the migrated data.

Week 11

• [x] Optimise the website for mobile and tablet compatibility and improve the landing page with a cohesive theme.

Week 12

• [x] User testing of temporarily deployed project on Vercel
• [x] Dockerize the Frontend and Backend directories

[sbhaya]

@Kushdapush Please add Weekly Learnings as a comment in this issue ticket's comment section. Thank you!

[Kushdapush]

Weekly Learnings & Updates

Week 1

• Explored some System Design fundamentals
• Learnt the important project planning concepts
• Researched on user flows and user journey patterns

Week 2

• Breezed through some UI designing principles
• Explored Figma and Figjam board
• Researched about Low fidelity UI wireframes

Week 3

• Researched on the frontend directory structure
• Revised some NextJs concepts regarding SSR and Functional Components
• Explored some Tailwind CSS UI features

Week 4

• Explored the responsive UI techniques
• Learnt about the behavior of components on different devices

Week 5

• Brushed up the concepts of express js framework
• Deep dive into the REST APIs

Week 6

• Researched about the Vercel Deployment
• Updated the Master Doc with all the planning and resource links

Week 7

• Explored D3.js
• Researched implementations of various plots (trend , heat-map etc) in Nextjs and their Typescript compatibility
• Explored cloud platforms for DB deployment

Week 8

• Explored Amazon RDS
• Introduction to Quintype

[sbhaya]

Weekly Learnings & Updates

Week 7

• Explored D3.js
• Researched implementations of various plots (trend , heat-map etc) in Nextjs and their Typescript compatibility
• Explored cloud platforms for DB deployment

Week 8

• Explored Amazon RDS
• Introduction to Quintype

@Kushdapush May we also add the learnings of the previous weeks, starting from week 1 in this comment ?

[Kushdapush]

Sure @sbhaya , will complete it by the EOD