Skip to main content
100%

CartoDB + D3 Bubble Map

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

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.

AI-generated description

Similar vizzes

Loading thumbnail…

CartoCSS for Animated Bubble Map

CartoCSS drives an animated bubble map of crime incidents, showing how event density changes over time. The visualization uses Torque’s time-based rendering with 72 frames over a 30-second duration, aggregating counts from the `fromdate` attribute. Bubble sizes scale progressively when aggregated values exceed thresholds (2, 8, 16), with an XOR composite operation blending overlapping markers. The map relies on CartoDB’s Torque API and CartoCSS styling, referencing `cartodb_id` for counting, while marker properties like fill color, line width, and ellipse shape are defined in the stylesheet.

Aandrewxhill
79% match
Loading thumbnail…

Exploding world

The visualization renders an orthographic world map with country borders as SVG paths, which are then scattered outward using a force-directed layout, creating an “exploding” globe effect. D3.js v3 handles the projection and zoom behavior via `d3.geo.orthographic` and `d3.behavior.zoom`, while the force layout (`d3.layout.force`) pushes each country’s centroid away from its original position. The code retrieves GeoJSON data for world borders from CartoDB’s SQL API using the `cartodb.SQL` client, and applies a simplify operation to reduce detail. A second layer of populated place points is defined but not populated in the visible script.

Aandrewxhill
78% 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
78% 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
78% match
Loading thumbnail…

Basic D3 map (live mods) d3v4

This example shows a world map rendered with a stereographic projection, overlaid with populated places as scaled circles. The map uses D3 v4’s `d3.geoStereographic` projection and `d3.geoPath` to draw country outlines from GeoJSON world data. City points come from a second GeoJSON dataset, with circle radius proportional to `pop_max` and color indicating megacity status (dark green) versus other populated places (salmon). The code loads both datasets via `d3.json` and appends SVG circles with opacity for visual clarity.

AAlan McConchie
77% 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
77% match
Loading thumbnail…

Size Bubbles

A world map displays cities as semi-transparent bubbles, with bubble area scaled by population using a sqrt scale and a maximum radius of 15 pixels. The visualization uses d3.geoNaturalEarth1 projection and d3.geoPath to render landmasses, graticules, and interiors from TopoJSON world-atlas data, while city coordinates and populations come from a cleaned CSV. React manages the component state and rendering, with SVG circles positioned by projecting each city’s longitude and latitude. The map’s styling uses light gray fills for land and graticules, with teal, translucent circles for urban centers.

Rrstrauss127
77% match
Loading thumbnail…

Map Pan / Zoom with Cities and Text v5

This example displays an interactive map of the world centered on the Pacific, overlaid with red circular markers for eleven cities and their labels. Pan and zoom controls are implemented using the `d3.zoom` API, which applies SVG `transform` attributes to all map paths, circles, and text. The map geometry and city positions are projected using `d3.geoMercator` and `d3.geoPath`, with country outlines loaded from a TopoJSON file. City coordinates come from a CSV loaded via `d3.csv`, and text labels are placed above each marker, each linking to a web search.

Dd3noob
76% match