Skip to main content
100%

CartoDB + D3 Drought Maps

✓ Published0🌍 Public
Aandrewxhill
Last edited Jan 17, 2013
Created on Jan 17, 2013

Four side-by-side maps show drought conditions across the United States during alternating months of 2012, using a color scale from yellow to dark orange for drought severity. Each map layers a simplified world border background under drought polygons queried from CartoDB via the cartodb.js SQL API, with data formatted as TopoJSON. The SVG maps are rendered with d3.geo.mercator and d3.geo.path, and all four views share a synchronized zoom behavior through d3.behavior.zoom.

AI-generated description

Similar vizzes

Loading thumbnail…

Untitled

A choropleth map of the United States displays drought counts per state from 2012 to 2021, with a year selector to switch between annual datasets. The visualization uses D3 v7 to render SVG paths and a color legend categorizing drought frequency into six bins from green (low) to red (high). The code loads data from local JavaScript config files and computes the map projection, with a tooltip and legend providing supplementary context.

JJosieeeeee
78% match
Loading thumbnail…

Albers Equal Area | US Drought | April 2014

A choropleth map of the United States shows drought severity from April 2014, using a dark USGS WELD tile layer as a base. CartoDB.js creates the map with Leaflet, transforming the drought polygons via ST_Translate and ST_Scale into a projected web mercator view. The choropleth colors range from yellow to dark red based on the drought magnitude (`dm`) attribute, with the CartoDB CSS template applying conditional polygon fills. The map centers on the lower 48 states at zoom level four.

Aandrewxhill
77% match
Loading thumbnail…

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.

Aandrewxhill
72% match
Loading thumbnail…

CartoDB + D3 Bubble Map

A bubble map renders world borders and populated places on a blue SVG canvas, with city markers animating from random positions to their geographic coordinates. The visualization combines CartoDB’s SQL API (fetching GeoJSON from `d3_world_borders` and `d3_populated_places`) with D3’s `d3.geo.mercator` projection and `d3.geo.path` for borders. City circles scale by population, and clicking a marker displays its name via SVG text. A `d3.behavior.zoom` handler enables panning and zooming through SVG transforms.

Aandrewxhill
72% match
Loading thumbnail…

CartoDB map of Colors

This map of named colors uses CartoDB and D3 to place colored circular markers on a world map, one for each color in a dataset. The markers are rendered as SVG ellipses with a multiply blend mode, sized by zoom level so they remain visible at any scale. Each marker’s fill is determined by matching its data attribute `named_color` to the corresponding CSS color in a large lookup table, turning the geographic coordinates into a palette of thousands of named colors. The result is a colorful, overlapping scatter of dots that reveals the global distribution of color names.

Aandrewxhill
72% match
Loading thumbnail…

d3.carto - Basic d3.carto Map

This map uses the d3.carto.map plugin to render a single GeoJSON layer of world country boundaries, styled with a blue fill and black strokes. The page loads the map into a full-screen div, applies zoom/pan controls via the plugin's built-in interface, and enables clickable features for interactivity. Data comes from a local world.geojson file, with countries drawn as SVG polygons; the accompanying CSS defines the visual styling for map elements, controls, and modal dialogs.

663anp3ca
71% match
Loading thumbnail…

dinesh ice8 q1

This example presents a dual-map visualization: a world choropleth and a US states choropleth, rendered as SVG using D3.js v7. The world map uses `d3.geoNaturalEarth1` projection and color-coded countries based on population data from a CSV file, while the US map uses `d3.geoAlbersUsa` projection with state-level values. Both maps load GeoJSON from the world-atlas and us-atlas CDN packages, and use `topojson-client` functions `feature` and `mesh` for geometry processing. A hover tooltip displays values; the US section also includes state borders drawn via a mesh layer.

Ddineshsingiri18@gmail.com
71% match
Loading thumbnail…

Basic CartoDB Layer in D3

This example displays geographic features from a CartoDB table as violet polygons on a map. It uses D3.js with a GeoJSON data format to load the geometry through the CartoDB SQL API. The code applies `d3.geoPath` with a projection to convert GeoJSON coordinates into SVG path data, appending `path` elements to a selected layer. The map relies on the `d3.json` method to fetch the data asynchronously and render it directly into the SVG.

Aandrewxhill
71% match