Important bits for rainy cities visualization

Raincloud CartoCSS

A raincloud visualization renders one hour of rainfall data as overlapping, semi-transparent ellipses on a map, with marker size and color scaled by precipitation intensity. The CartoCSS styles define six value-based classes, from deep blue for heavier rainfall to pale white for trace amounts, while zoom-dependent width rules amplify marker sizes at higher zoom levels. The visualization uses CartoDB's styling language with marker properties, zoom conditions, and composition operators to layer the raincloud effect.

79% match

Gist 11071111

This visualization maps global earthquake intensity using CartoDB’s CartoCSS styling. It shows point markers scaled by the `mmio` attribute (Modified Mercalli Intensity), with larger circles for stronger quakes and zoom-dependent width increases. The code applies marker properties like `marker-type: ellipse`, `marker-fill`, and `marker-comp-op: multiply` to blend overlapping points, while labels display intensity values at higher zoom levels via `text-name`. The example uses CartoDB’s tile rendering and CSS-like rules to style geographic data without JavaScript libraries.

Gist 4503902

This map shows global cities categorized by type, with buttons to filter between all populated places, national capitals, and megacities. It overlays a second data layer that can be toggled via the same menu, though the code only reveals it on button click without a corresponding hide action. The visualization uses the CartoDB.js library to load tile layers and vector data from CartoDB’s viz.json API, with Leaflet handling the map interaction and tile display. Styling applies custom marker properties for red fill, white outlines, and overlap allowance, while CSS fades are disabled for smoother layer transitions.

Gist 4495761

This interactive map displays global cities, filtered by categories such as all locations, national capitals, and megacities. Users select a filter via buttons in the top-right menu, which dynamically updates the displayed points. The visualization uses the CartoDB library to create and manage layers over a Leaflet map, with a dark MapBox tile layer as the base. Point styling is defined through CartoDB’s tile style syntax, and SQL queries on the underlying dataset change the visible features per selection.

Vvyjayanthimamidipalli@gmail.com

vyjayanthi2

This area chart displays average monthly rainfall for ten global cities, using a steelblue filled polygon and red circular data points. The visualization employs D3 v7's area generator, point-scale, and linear-scale APIs to map city names to x-coordinates and rainfall values to y-coordinates. An interactive tooltip appears on hover, showing the city name and rainfall in millimeters. The chart includes rotated x-axis labels for city names and axis labels for both dimensions.

Quick list of CartoDB weather and climate related maps

This gallery page compiles a series of CartoDB maps focused on weather and climate events, including hurricanes, tornadoes, rain, drought, and general weather conditions. Each entry pairs a static thumbnail image with a hyperlink to an interactive map hosted on CartoDB. The maps use CartoDB’s tile-based rendering and SQL querying to display data such as 2004 hurricane tracks, ten years of tornado paths, 2013 drought monitor zones, and real-time precipitation. The page itself is plain HTML, organizing the examples into sections by weather category without custom JavaScript or visualization libraries.

68% match

Kkmduncan2@dons.usfca.edu

A2 - Heat Map

This heat map visualizes total precipitation across seven cities from 1995 to 2005, using color intensity to represent rainfall amounts. The p5.js sketch loads CSV data from a GitHub gist via `loadTable`, then plots color-coded rectangles for each city-year combination. Countries appear on the y-axis, years on the x-axis, with a legend showing the precipitation scale. Colors range from light green for low rainfall to dark teal for higher totals.

68% match