turf: measurement

100%

turf: measurement

✓ Published0🌍 Public

Last edited Nov 10, 2016

Created on Nov 10, 2016

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.

AI-generated description

Using turf.js to measure features

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/4122298'>U.S. Counties TopoJSON</a>

forked from <a href='http://bl.ocks.org/enjalot/'>enjalot</a>'s block: <a href='http://bl.ocks.org/enjalot/4a449bee40e7b74108de89e303a2a284'>WWSD #12: d3 + TopoJSON</a>

forked from <a href='http://bl.ocks.org/enjalot/'>enjalot</a>'s block: <a href='http://bl.ocks.org/enjalot/f6ac38e86de3e7d4cbe109ed601fa6d7'>WWSD #13: d3 + Canvas</a>

forked from <a href='http://bl.ocks.org/enjalot/'>enjalot</a>'s block: <a href='http://bl.ocks.org/enjalot/7e1c6eda09fb3c8cb64453a79e760f25'>WWSD #16: turf: measurement</a>

gpl-3.0 Licensed

Similar vizzes

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

66% match

Loading thumbnail…

hello turf.js

This visualization demonstrates the integration of Leaflet, Turf.js, and D3.js to explore spatial analysis on a map of Nepal's districts. It displays district areas and headquarters as interactive layers with popups showing computed area, center, and bounding box values. The code uses Turf’s `area`, `center`, `bbox`, and `buffer` functions to calculate spatial metrics, and also constructs overlapping polygons to visualize union, difference, and intersection operations. A base OpenStreetMap tile layer provides geographic context, with layer controls to toggle between the OSM, district, and headquarters overlays. The map is initialized and rendered entirely in the browser using Leaflet’s API.

Zzach b.

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

65% match

Loading thumbnail…

d3.geo.tiler

This example demonstrates an interactive map of weather stations in California using tiled image layers from CloudMade and custom point overlays. The `d3.geo.tiler` API organizes station locations from stations.json into a quadtree structure, enabling efficient data retrieval per map tile. The Polymaps library handles map navigation, while D3.js manages the tile-specific SVG rendering of station markers and labels. The visualization showcases the integration of D3's geographic projections with Polymaps' tile-based mapping system for scalable point data visualization.

Mmbostock

65% match

Loading thumbnail…

Border Distance

This visualization shows the distance from any point in the contiguous United States to the nearest border or coastline, using a sequence of concentric buffer strokes around the landmass. It approximates geographic distance by applying stroke widths in projected pixel coordinates, which the author notes is not perfectly accurate. The map is rendered with D3 v3, using `d3.geo.albersUsa` for projection and `d3.geo.path` to draw land and state borders from TopoJSON data. A color scale maps nine distance bands from yellow (near) to dark blue (far).

Mmbostock

64% match

Loading thumbnail…

California Counties

This example visualizes California counties with a map rendered using SVG and the D3.js v4 library. It loads county boundaries from a TopoJSON file and an earthquake feed from USGS, though only the county boundaries are drawn. The map uses a conic conformal projection via `d3.geoConicConformal` and `d3.geoPath`, with the projection fit to the state’s extent. Hovering over a county highlights it in crimson and displays its name and population in an overlay, using a mouseover event and the `d3.format` API.

MMTClass

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

64% match

Loading thumbnail…

Steps used to make map of California rivers

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.

Aandrewxhill

64% match