Update: Weather Animation Effects in Accidents De France

I just shipped a fun update to the Accidents De France visualization. The existing weather filters: Clear sky, Rain, Fog, and Snow now drive an ambient animation layered across the scene, so the canvas reacts to the same condition the data is being filtered by.

Live App — https://datagouv-3d-viz.vercel.app/

How it works for the user

The weather filter buttons in the lower-left used to only filter accidents by the reported conditions at the time of the incident. Now they also drive a visual effect across the whole canvas. Snow drifts thousands of soft particles down across France. Rain renders fast vertical streaks. Fog adds a soft haze that pushes back the distant cities while keeping the foreground readable. Clear sky returns the unobstructed star-field background. The effect always sits behind the accident points and the city labels so legibility of the data stays the foreground priority.

How it was developed

The effects are built directly into the existing Three.js scene as lightweight particle systems and shader overlays. Snow and rain are point clouds with a custom shader that recycles particles within the camera's view, so a few thousand particles can blanket the whole map without re-spawning geometry every frame. Fog combines Three.js's built-in scene fog with a soft additive overlay tied to the day/night cycle that's already in the app.

Each effect subscribes to the same state that drives the existing filter buttons, so toggling a weather condition swaps the active effect instantly. The whole layer is gated behind a quality setting so it stays smooth on lower-end hardware. I built it iteratively with Claude Code, prototyping each weather state in isolation before composing them into a single weather provider the rest of the scene can consume.