D3 · all subjects

d3-geo/path

15 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

d3-geo path methods

Geographic path generator methods: path.area (compute projected planar area), path.bounds (compute projected planar bounding box), path.centroid (compute projected planar centroid), path.digits (set output precision), path.measure (compute projected planar length), path.projection (set geographic projection), path.context (set render context), path.pointRadius (set radius for point features).

geoPath constructor signature

geoPath(projection, context) creates a new geographic path generator. If projection is specified, sets the current projection. If context is specified, sets the current context. Example: d3.geoPath(projection) for SVG, or d3.geoPath(projection, context) for canvas.

geoPath supported geometry types

The path generator renders GeoJSON feature or geometry objects: Point (single position), MultiPoint (array of positions), LineString (continuous line of positions), MultiLineString (array of arrays of positions), Polygon (array of arrays forming a polygon with possible holes), MultiPolygon (multidimensional array forming multiple polygons), GeometryCollection (array of geometry objects), Feature (feature with one geometry), FeatureCollection (array of features), and Sphere (globe outline with no coordinates). Any additional arguments are passed to the pointRadius accessor.

path.area() method

path.area(object) returns the projected planar area in square pixels for the specified GeoJSON object. Point, MultiPoint, LineString and MultiLineString geometries have zero area. For Polygon and MultiPolygon, it computes the area of the exterior ring minus any interior holes. This method observes clipping performed by projection.clipAngle and projection.clipExtent. Example: path.area(california) returns 17063.1671837991.

path.bounds() method

path.bounds(object) returns the projected planar bounding box in pixels for the specified GeoJSON object as a two-dimensional array [[x₀, y₀], [x₁, y₁]], where x₀ is minimum x-coordinate, y₀ is minimum y-coordinate, x₁ is maximum x-coordinate, and y₁ is maximum y-coordinate. This method observes clipping performed by projection.clipAngle and projection.clipExtent. Example: path.bounds(california) returns [[18.48513821663947, 159.95146883594333], [162.7651668852596, 407.09641570706725]].

path.centroid() method

path.centroid(object) returns the projected planar centroid in pixels as [x, y] for the specified GeoJSON object. Useful for labeling boundaries or displaying symbol maps. This method observes clipping performed by projection.clipAngle and projection.clipExtent. Example: path.centroid(california) returns [82.08679434495191, 288.14204870673404].

path.digits() method

path.digits(digits) sets the number of fractional digits for coordinates generated in SVG path strings when digits is specified as a non-negative number. If digits is not specified, returns the current number of digits, which defaults to 3. This option only applies when context is null (for SVG path data output). Example: d3.geoPath().digits(3).

path.measure() method

path.measure(object) returns the projected planar length in pixels for the specified GeoJSON object. Point and MultiPoint geometries have zero length. For Polygon and MultiPolygon geometries, it computes the summed length of all rings. This method observes clipping performed by projection.clipAngle and projection.clipExtent. Example: path.measure(california) returns 825.7124297512761.

path.projection() method

path.projection(projection) sets the current projection if projection is specified. If projection is not specified, returns the current projection, which defaults to null (identity transformation, no projection applied). The projection can be any object exposing a projection.stream function, such as D3's built-in geographic projections or custom projections. Example: d3.geoPath().projection(d3.geoAlbers()).

path.context() method

path.context(context) sets the current render context and returns the path generator if context is specified. If context is null, the path generator returns an SVG path string. If context is non-null, the path generator calls methods on the specified context to render geometry. If context is not specified, returns the current render context, which defaults to null. The context must implement: beginPath(), moveTo(x, y), lineTo(x, y), arc(x, y, radius, startAngle, endAngle), and closePath() from CanvasRenderingContext2D API.

path.pointRadius() method

path.pointRadius(radius) sets the radius used to display Point and MultiPoint geometries if radius is specified. If radius is not specified, returns the current radius accessor, which defaults to 4.5. The radius can be specified as a number constant or as a function computed per feature, receiving any arguments passed to the path generator. Example: d3.geoPath().pointRadius(10).

Rendering multiple features with geoPath

To display multiple features, combine them into a feature collection and pass to a single path element, or use multiple path elements with data binding. A single path element is typically faster than separate path elements, but separate path elements are useful for styling and interaction. Canvas rendering is typically faster than SVG but requires more effort for styling and interaction.

Multiple features rendered as FeatureCollection

svg.append("path") .datum({type: "FeatureCollection", features: features}) .attr("d", d3.geoPath());

Multiple features rendered with separate path elements

svg.selectAll() .data(features) .join("path") .attr("d", d3.geoPath());

Creating a canvas path generator

const context = canvas.getContext("2d"); const path = d3.geoPath().context(context);

Give your agent this brain