Color ramp for a topology

100%

Color ramp for a topology

✓ Published0🌍 Public

Last edited Sep 28, 2012

Created on Sep 26, 2012

A color ramp encodes a topology of traffic density in the Troparevo-Nikulino district, with each road segment colored by a normalized `cars` value. The CartoCSS styles define nested thresholds from red (high traffic) to blue (low traffic), using CSS attribute selectors like `[cars<0.5]` to adjust line color and opacity. A second, glow layer overlays thicker, semi-transparent lines to emphasize the density gradient. The rendering relies on Mapnik’s CartoCSS syntax, processing the point and line layers from the GeoJSON data source.

AI-generated description

Similar vizzes

Loading thumbnail…

turbo-cartocss examples

This interactive map demonstrates the `ramp()` function in CartoCSS, a styling language for CartoDB maps, through live-editable SQL and CartoCSS panels. Users can explore how color ramps (using ColorBrewer palettes) and numeric ramps (for marker width or opacity) can be applied to data columns, with options to control the number of data classes, quantification methods (quantiles, equal interval, jenks, and headtails), and bucket counts. The map, centered on Brazil, updates in real time as code is edited, showing the impact of different ramp configurations on point, line, and polygon styling. The interface includes a CodeMirror editor for both SQL and CartoCSS, an examples dropdown, and a customizable API endpoint, allowing users to experiment with different data and styling combinations.

AAlan McConchie

67% match

Loading thumbnail…

Cubehelix II

Six color ramps illustrate variations of the Cubehelix color scheme, including reversed, hue-shifted, diverging, and a perceptual rainbow approximation. Each ramp renders as a horizontal gradient on individual Canvas elements, with pixel colors computed via the `d3.scale.cubehelix` plugin and `d3.interpolateCubehelix`. A polylinear scale with multiple domain points creates the diverging ramps. The labels and layout are positioned absolutely via D3 selections and ordinal scales.

Mmbostock

61% 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

60% match

Loading thumbnail…

Maptimeify a polygon in CartoCSS

This visualization demonstrates how to apply a Maptime-themed rainbow outline to a specific building polygon using CartoCSS in TileMill. It shows a single OpenStreetMap feature (osm_id 260351411) styled with seven stacked line layers, each offset by two pixels and colored red, orange, yellow, green, blue, purple, plus a white halo. The CartoCSS snippet defines separate compositing layers (::red, ::orange, etc.) with line-width, line-color, and line-offset properties to create the striped effect. The example references tips from TileMill GitHub issue #2144 and credits AJ Ashton and Dane Springmeyer for the technique.

AAlan McConchie

60% match

Loading thumbnail…

Foot Traffic

This visualization maps estimated foot traffic across Manhattan, with each neighborhood polygon colored on a gradient from light to dark blue to indicate relative pedestrian volume. The map is rendered as an SVG using D3 v3, with a Mercator projection and topojson for geographic data. Color intensity reflects the average foot traffic rating per polygon, and a color bar provides a legend. The code uses `d3.json` and `d3.csv` to load the geographic and traffic data, then applies a linear color scale to fill each polygon.

MMelanieFreed

60% match

Loading thumbnail…

Gist 46fd5ee6e8f80b62bd42

This map of US rivers uses color to show flow direction, with each river segment assigned a hue based on its azimuth angle measured via CartoDB’s ST_Azimuth function. A circular color gradient cycles from pink through blue and back, encoding compass orientation. River thickness scales with Strahler stream order and zoom level using CartoCSS rules. The visual style, inspired by Von Worley’s metro area street-grid maps, renders the data as smooth, rounded lines with white casing, emphasizing the directional patterns of the nation’s waterways.

Aandrewxhill

59% match

Loading thumbnail…

Color ramp maker

This tool generates color ramps by interpolating between two user-selected hex colors. A linear gradient bar is rendered as a series of divs, each showing the computed intermediate color and its hex code. Users adjust the start and end colors via jscolor pickers, set the number of entries, and click build; d3.scaleLinear performs the color interpolation. Clicking a swatch copies its hex code to the clipboard.

LLuisSevillano

59% match

Loading thumbnail…

SQL for building a dynamic topo

This example builds a dynamic topographic map from traffic data by buffering and dissolving point geometries into nested contour layers. It first generates a series of buffer rings around each data point, scales the car counts across nine distance levels, and then unions those buffers into isolines representing traffic intensity. The SQL query uses PostGIS functions like `ST_Transform`, `ST_Buffer`, and `ST_Union`, while a second pass outputs the original points. The result combines colored topo bands and overlaid points, with the visualization likely rendered using a web-mapping library that consumes the `the_geom_webmercator` geometries.

Aandrewxhill

59% match