Steps used to make map of California rivers

100%

Steps used to make map of California rivers

✓ Published0🌍 Public

Last edited Dec 7, 2014

Created on Dec 6, 2014

A map of California rivers displays stream networks color-coded by Strahler stream order, with line widths scaled by order and zoom level. The visualization is built from NHD Plus flowline data processed via SQL queries in CartoDB, which join river attributes and merge segments using `ST_LineMerge` and `ST_Union`. CartoCSS rules define zoom-dependent stroke widths for each order class, while a second optional version applies directional coloration to the same underlying geometry. The map relies on CartoDB’s spatial index for rendering performance.

AI-generated description

Similar vizzes

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

73% match

Loading thumbnail…

California Map

This example displays a choropleth map of California counties, colored with a sequential blue scale according to values mapped to each county’s FIPS code. The visualization uses data from the `us-atlas` package, loading county boundaries via `d3.json` and converting them with `topojson.feature`. The map is rendered using `d3.geoPath` with an Albers projection, and the color scale is defined with `d3.scaleSequential` and `d3.interpolateBlues`.

Nnithinreddypinikesi@my.unt.edu

66% match

Loading thumbnail…

CA Zip Code Map Part 2B

This example maps California zip code boundaries, coloring each region light blue with a red hover highlight. It visualizes stroke mortality data by zip code, though the chart itself displays the geographic shapes without encoding the count values in the fill. The map uses a Mercator projection with d3.geoPath and d3.geoMercator, rendering SVG paths from a GeoJSON file of California zip codes. The stroke data is loaded from a CSV, and the map supports pan-and-zoom interaction through d3.zoom.

Ggarrettriha

64% match

Loading thumbnail…

turf: measurement

This visualization measures the lengths of California streams using Turf.js, coloring each stream according to its distance in miles. A threshold color scale maps shorter streams to darker reds and greens, with longer streams shown in blue. The map renders on a Canvas element using d3.geo.path with a Mercator projection, drawing TopoJSON data loaded from a remote file. Turf.js’s `lineDistance` function calculates each feature’s length, while D3’s `d3.scale.threshold` assigns the stroke colors.

AAlan McConchie

64% match

Loading thumbnail…

California Population Density II

A choropleth map of California displays population density per square mile across 23,198 block groups, using a sequential red color scale and a square-root axis legend. Drawn with `d3.geoPath` and SVG, the visualization loads topology from a preprocessed `topo.json` file, created by scripts that download Census block group boundaries and ACS population data via the Census API. The `prepublish` script projects, joins, and simplifies the data using `geo2topo`, `topomerge`, and `topoquantize`. County borders are overlaid as semi-transparent outlines.

Mmbostock

63% match

Loading thumbnail…

CA Zip Code Map Part 2C

This example displays a choropleth-style map of California zip codes, with each region colored light blue and highlighted red on hover. The visualization renders stroke mortality counts for 2016 by overlaying zip code boundaries from a GeoJSON file onto a Mercator projection. The code uses D3 v5’s `geoMercator`, `geoPath`, and `zoom` to create an interactive, pannable SVG map, while stroke data from a CSV file is joined to the geographic features via zip code identifiers.

Ggarrettriha

63% match

Loading thumbnail…

Untitled

This choropleth map shows population density per square mile across California counties, using a sequential orange-red color scale with a threshold legend. The visualization loads GeoJSON topology data and renders county boundaries as SVG paths via `d3.geoPath`. Colors are assigned by county ID using `d3.schemeOrRd[9]`, while the legend uses `d3.scaleThreshold` and `d3.axisBottom` to display the value ranges. County outlines are drawn from a separate topology object with a semi-transparent black stroke.

AAlice Hua

62% match

Loading thumbnail…

California Map

This example renders a map of California using D3.js and TopoJSON data from the US Atlas. The code loads the states-10m.json file, filters the TopoJSON to extract the California geometry, and applies a d3.geoAlbersUsa projection fit to the state’s bounds. A d3.geoPath generator then draws the resulting SVG path element, displaying the state’s outline at a 960×500 resolution. The visualization demonstrates importing D3 via UNPKG and using topojson-client to convert geographic features.

Aaniteshterala2000

62% match