CARTO Locations | Training

CARTO Locations | Training

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.

Aandrewbt

94% match

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.

68% match

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

68% match

Chloropleth

A choropleth map visualizes census tract data from ct2010.json using a TopoJSON topology. The map is rendered with SVG paths in D3 v3, where each tract is drawn as a filled polygon. The geographic boundaries are derived from the encoded arcs, and the choropleth coloring communicates quantitative variation across regions.

Aandrew-reid

67% match

CartoDB + Time

The visualization maps the locations of U.S. post offices over time, animating their cumulative appearance based on the year each was built. It uses CartoDB’s Torque layer to render 128 animation frames across a 16-second loop, aggregating point counts by grid cell. The map is built with Leaflet, using Stamen’s toner tiles for the base layer. The Torque style specifies a time attribute, cumulative aggregation, and blue rectangle markers, with a color blend mode to show density. The code loads data from the `us_po_offices` table hosted by CartoDB’s `viz2` account.

Lesson 2 | CARTO.js | CartoDB

This example demonstrates interactive layer controls for a map built with CARTO.js. It displays two CartoDB sublayers—African countries and global lakes—over an OpenStreetMap basemap using the Leaflet map object. Two dashboard buttons toggle the visibility of each sublayer by calling the `hide()` and `show()` methods on the corresponding sublayer. The map is centered on southern France at zoom level 3, and the sublayers are defined with custom SQL queries and CartoCSS styling.

Aandrewbt

Gist 1198897

This visualization demonstrates the geographic distribution of the 2010 U.S. Census data, mapping population counts and related demographic metrics across states. Built with Ruby and CartoDB importer, it renders interactive choropleth maps using color-coded polygons to represent data values, allowing users to explore spatial patterns in the dataset. The visualization leverages Google Spreadsheet integration for data input and PostgreSQL for storage, with map rendering handled through CartoDB’s geospatial processing pipeline.

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.