Skip to main content
100%

CARTO Locations | Training

✓ Published0🌍 Public
Aandrewbt
Last edited Jul 27, 2017
Created on Jul 27, 2017

This interactive map displays U.S. census tracts and blocks colored by the ACFOSW_200 metric, with zoom-based switching between tract and block levels and a readout panel for selecting red or blue color schemes. It uses CartoDB.js and Leaflet with zoomdisplay, loading polygon data from a gist. CartoCSS styles define choropleth ramps and quantile breaks, while an infowindow template shows GEOID and ACFOSW_200 values on click.

AI-generated description

Similar vizzes

Loading thumbnail…

CARTO Locations | Training

This interactive map shows choropleth data for U.S. census tracts and counties, colored by the `acfosw_200` attribute. A readout overlay indicates that tract boundaries appear at zoom levels 0–12, while block-level data displays at zoom 12 and higher. The visualization uses Leaflet with the CARTO.js library, applying CartoCSS styles that switch between quantile-based color ramps and manual class breaks depending on zoom. Clicking a feature opens a popup revealing its GEOID and attribute value.

Aandrewbt
94% match
Loading thumbnail…

CartoDB Point Clustering

This example displays a choropleth map of U.S. ZIP code tabulation areas, colored by the ratio of mortgage disclosures to brokers, with polygon opacity scaled by broker count. It uses CartoDB.js with Leaflet to render the map, an SQL query joining broker data to census geographies, and CartoCSS for the graduated color and opacity styling. The map applies an aggregation stack blur filter to smooth the rendered polygons.

Aandrewxhill
70% match
Loading thumbnail…

Census Tract Quadtree Contours

This visualization uses a quadtree-based indexing technique to render U.S. Census Tract demographic data as an interactive, zoomable map. It precomputes a uniform grid of sampled values from tract polygons indexed in an R-tree, aggregates those values into a quadtree, and then renders the visible quadtree nodes as colored rectangles using Canvas. The map displays racial composition data (e.g., white, black, Asian populations) from the 2023 ACS, with countries and graticule lines from the VisionsCarto world atlas. Built with D3.js, React, and Turf, it demonstrates a performant alternative to traditional choropleth rendering for large polygon datasets.

CCurran Kelleher
69% match
Loading thumbnail…

Gist 8393729

This visualization displays a single U.S. Census tract (24031703201) subdivided into five polygons, each representing a census block group. The GeoJSON data includes the tract’s coordinates, with latitude and longitude properties for each feature. The map renders the tract’s boundaries, highlighting the internal subdivisions and their spatial relationships, likely for demographic or geographic analysis.

Aadkatrit
67% match
Loading thumbnail…

CartoDB Point Clustering

This example displays point clustering on an interactive map centered on New Orleans, using CartoDB and Leaflet. It shows a sublayer of Twain dataset points filtered by city name, rendered as large blue markers. Clicking a marker queries overlapping points via CartoDB’s SQL API, revealing their count and source values in a side panel. The map uses Stamen toner tiles, while hover interactions change the cursor through CartoDB’s `featureOver` and `featureOut` events.

Aandrewxhill
67% match
Loading thumbnail…

L

A choropleth map of U.S. census block groups colors each polygon by a seven-step color ramp based on the `median_rent_moe` column, overlaid on a dark CartoDB basemap. The example generates a static 500×200 pixel image centered at latitude 40, longitude -100, using the CartoDB SQL API to compute Jenks natural breaks for classification. The `CartoImage` class builds a CartoCSS style, posts a map configuration to the CartoDB static map endpoint, and returns the resulting PNG URL.

Aandrewxhill
67% match
Loading thumbnail…

Easy example | CartoDB.js

This example shows a full-screen interactive map that renders a dataset called "untitled_table_5" with custom CartoCSS styling. The map displays points, lines, and polygons in a red color scheme with white outlines, and includes tooltips triggered by interactivity on the `cartodb_id` field. The code uses the CartoDB.js library version 3, specifically `cartodb.createVis`, which loads the visualization from a JSON configuration object. The base map is provided by OpenStreetMap tiles via Leaflet, while the geographic data is queried from a CartoDB table using SQL and styled with CartoCSS rules for each geometry type.

Aandrewxhill
66% match
Loading thumbnail…

Map Connections | CartoDB.js

Clicking a ZIP code polygon on a U.S. map triggers a dynamic query that draws purple curved lines from that selected area to nearby ski resorts within a 1,000-unit distance. The example uses CartoDB.js with Leaflet to render the base map and vector layers, while a CartoDB SQL API call executes `ST_MakeLine`, `ST_Segmentize`, and `ST_Transform` to generate geodesic connection paths in GeoJSON format. Interactivity includes cursor changes on feature hover and line removal/replacement on each new click, with styling controlled through CartoCSS.

Aandrewxhill
66% match