Public Info Banjir Malaysia:
The Thought Process

A Clearer View of Malaysia’s Floods Unofficial Website

4th October 2025

If there’s one thing that repeatedly occurs between December and March here in Malaysia, it’s the flood season. Last year, when Khairul Aming and his team reached out to flood-affected communities in Kelantan, they didn’t just provide help, they built a system that encouraged the public to join in as well. Their ensured food and essential supplies distribution was well-organized and reached victims efficiently. Their team effort was truly inspiring, and it really moved me.

From Schools to Floods

When I was building the SBP and MRSM web page, the flood project was already on my mind as the next thing on the list. I had imagined creating a map of flood-affected areas, showing in detail the extent of the damage in square meters. Once I finally had the chance, I started searching for information on flood zones; and that’s when I came across PublicInfoBanjir Malaysia.

Discovering PublicInfoBanjir

The first page I landed on was a list of stations reporting water levels and rainfall across the country. I was thrilled to see that the main page presented the data only in textual form. This opened up the opportunity for me to transform that raw information into a visual map.

Learning to Scrape

The first step I had to take was scraping the data from the website. In my earlier SBP and MRSM project, I didn’t scrape data directly. Most of it came from copy-pasting school lists off Wikipedia and then formatting them into a table. The data was then converted into a JSON file via code. This time, since there was only one official source to rely on, I had to learn how to scrape the data directly. AI was definitely handy for a task like this, but even AI can make mistakes. Some information did not load properly. That’s when manual edits on the code need to be done.

From Plotting to Storytelling

It was easy to test the scraped data because I already had the Malaysia map prepared from my previous project. The real challenge was not in plotting the points, but in figuring out how to present the data in a way that users could easily understand and gain insights from. A simple plot was straightforward, but what else can we convey to the user that is helpful to them? Fortunately, the scraped data included enough details that could be transformed into graphs and bar charts. For additional context, I searched for information such as Malaysia’s flood-prone areas over the past three to five years, so I could display relevant historical data alongside the live information.

The Struggle with Water Levels

My first few attempts to model the water levels as flood areas were unsuccessful. The idea was to map affected zones based on estimated square kilometers, which I thought would be a useful addition. But the results were not accurate, and when zoomed out, the supposedly smooth edges turned into awkward sharp polygons that looked unnatural. After testing few methods (read papers and searched for algorithm), I had to surrender to the standard circle icon. It may seem basic, but it turned out to be clean, effective, and much easier to interpret. With just a few tweaks to distinguish the water level categories (Normal, Alert, Warning, Danger), css is really efficient when it comes to custom animated icons.

Almost Giving Up

Halfway through building the flood webpage, I discovered that every state actually has its own flood information portal as well. Typically, these are hosted under infobanjirjps such as InfoBanjir Selangor. To my surprise, many of them already included static visual maps displaying water levels and rainfall. What I had not expected, perhaps because I was too eager to start without researching thoroughly; is that even PublicInfoBanjir Malaysia itself already provided a visual map. At that moment, I almost decided to drop the project. After all, what was the point of replicating something that already existed?

Why I Continued: Rainfall

If there was one reason I decided to keep going with this project, it was the chance to model rainfall. I’ve always been fascinated by dynamic weather visualisations. I once came across animated wind-flow maps, and they instantly gave me a clearer sense of what was happening just by looking at the motion. The thought of bringing a similar kind of interactivity to rainfall data is quite exciting. I decided that even if the difference on building this website is in its interactivity and dynamic representation, it could be worth pursuing.

Two Weeks of Rain

Modeling the rain itself took me about two weeks. I explored a few references for rain algorithms that allowed me to adjust the direction of raindrops, their frequency, and thickness. I also used AI to generate some alternative approaches. After testing different models, I eventually decided to use a CSS-based version instead of a rain-code algorithm. With CSS, it was much easier to tweak visual elements like lightning effects and cloud layers to suit different categories of rain (Light / Moderate / Heavy / Very Heavy).

CSS-based rain models are generally easier to manipulate when you want to represent categories. But if the models are driven by dynamic data streams, then a rain-animated algorithm is the better choice, since it can automatically adjust the intensity of rainfall based on the data. Since modelling different types of rain isn’t something that can be easily distinguished visually (apart from cloud heaviness and the number of lightning strikes), the most practical way is to represent rainfall intensity through data. In my case, I linked it to the legend dashboard, showing the amount of rainfall in millimeters. This way, instead of trying to “see” the difference between moderate and heavy rain in the animation, users can rely on the data-driven legend to understand the actual rainfall level.

Designing the Dashboard

The final step was figuring out how to present the dashboard itself. The dashboard is just as important as the map; it needs to provide clear reference information, but without overwhelming the screen. Placement was another key decision: should it sit at the top, bottom, left, or right? I kept asking myself questions like, “Which part of the screen will let it blend naturally with the map?” and “How thin can the dashboard be while still conveying enough information?”.

Choosing Colors

As for the theme color, I took into account feedback I received from my earlier project; the page should use a minimal number of colors to avoid distracting users. With that in mind, I decided to keep the palette simple and consistent. The icons and highlights were based on water-inspired tones, using mostly shades of blue and grey as the dominant theme.

Building Real-Time Updates

Eventually, I found a balance by using Render to handle the scraping and scheduling. The scraper ran automatically every 15 minutes, generating a JSON file that contained the latest scraped data. The output was linked through GitHub, which provided a clean public URL for the website to fetch. However, I had to wait during rainy days to test this setup when data feeds are frequently updated. During less rainy periods, there’s naturally less incoming data to verify against.

Dynamic vs. Static: The Power of Visual Maps

The moment the website went live, I realized just how much a dynamic visual map can do compared to a static one. It may look simple at first glance, but it provides a much clearer and more intuitive view of affected areas, water levels, and rainfall intensity, making it easier for users to understand the situation at a glance.

The Key Takeaway

If there is one lesson to take home? Start building. Even if a project feels uncertain at the beginning or midway through, keep going. You’ll discover what works, what doesn’t, and gain insights that no plan alone can provide. Seeing ideas come alive brings clarity like nothing else.

Check out the flood website: "PublicInfoBanjir Malaysia: A Visual Reference" and share it with others. You never know, it might help someone stay safe during the rainy season.

Disclaimer: This is an independent, unofficial project that visualizes data from the official PublicInfoBanjir website. We are not affiliated with Jabatan Pengairan dan Saliran (JPS) or the Malaysian government. Always refer to official sources for critical decisions.

Got thoughts or ideas? DM me on Instagram 💬 — I'd love to hear from you.