Slimmed down geojson from the West Coast Trail in Victoria

100%

Slimmed down geojson from the West Coast Trail in Victoria

✓ Published0🌍 Public

Last edited Jul 28, 2016

Created on Jul 28, 2016

This example visualizes a slimmed-down GeoJSON dataset of GPS track points from the West Coast Trail in Victoria, Canada. The map displays the trail’s geographic path by plotting individual point features as a scatter layer, with each point’s elevation value encoded in the data properties. The visualization is rendered using D3.js, specifically leveraging `d3.geoPath` to project the GeoJSON coordinates onto a map, while the points are drawn as simple SVG circles. The source data originates from a gist by SwampGuzzler, containing trail segments with attributes like track segment IDs and elevation values.

AI-generated description

Similar vizzes

Loading thumbnail…

[Working with spatial data](https://github.com/enjalot/wwsd)

This example demonstrates how to work with geospatial data using d3.js projections, visualizing trail points from a GeoJSON file on a Mercator projection. The code uses the d3.geo.path() function with a d3.geo.mercator() projection to render SVG paths, and employs d3.json() to load the data. The map displays points with a transform applied, while path elements are styled with a gray fill and white stroke that turn red on hover.

SSwampGuzzler

71% match

Loading thumbnail…

Gist bea3b68601c5004145624bdb03eaa43e

This example maps oceanographic CTD (conductivity, temperature, depth) sampling locations along the British Columbia coast and offshore Pacific. A GeoJSON MultiPoint dataset feeds a D3 map using `d3.geoPath` with a TopoJSON basemap for landmasses. Points cluster tightly near the continental shelf and along a repeating offshore grid, while a supplementary CSV (`proflocations.csv`) suggests profile station coordinates. The visualization shows the spatial distribution of oceanographic measurements, highlighting dense nearshore sampling versus broader offshore transects, rendered as a static point-layer over geographic context.

MMbrownshoes

69% match

Loading thumbnail…

Gist b2644a6ec6b1fd1a95ef87d5a93ec93c

This example visualizes a GPS track as a three-dimensional path using a MultiLineString GeoJSON feature. The data, sourced from a gist by FergusDevelopmentLLC, is rendered with altitude encoded as the third coordinate in each vertex. The visualization highlights the elevation changes along the path through a continuous line, with the points tracing a looping route. The use of 3D coordinates allows the viewer to perceive the terrain's vertical profile alongside its horizontal extent, making it useful for analyzing elevation gain, slope, and path shape in a compact, geographic context.

WWill Carter

68% match

Loading thumbnail…

with trails

This example visualizes hiking trail paths overlaid on a geographic projection of the Washington, D.C. area. It uses a conic conformal projection with custom parallels and rotation, fitting the trails to a 960×500 SVG canvas via `projection.fitSize`. Trail data is loaded from a TopoJSON file and converted to GeoJSON using `topojson.feature`, then rendered as crimson, unfilled SVG paths with `d3.geoPath` and `d3.json` for asynchronous loading.

AAnaMal08

68% match

Loading thumbnail…

Gist 69526c10c61369e9ebc7f2479ab96375

This example renders a choropleth map of British Columbia’s regional districts from a TopoJSON file, coloring each polygon by its `FEATURE_AREA_SQM` property. The visualization uses a custom `d3.geoPath` projection to draw district boundaries and a sequential color scale to encode area. Hover effects are implemented through a `transition.attrTween` that animates the fill color on selection, while a tooltip displays the district name and area. The map is composed using D3’s topology and geometry APIs, with the data sourced from the province’s legal boundary records.

MMbrownshoes

67% match

Loading thumbnail…

Canadian Province TopoJSON

This example displays a graticule-free map of Canadian provinces as a topojson mesh, rendered as SVG paths with black outlines. The code uses d3.geo.conicConformal for projection and d3.geo.path to draw the features. A scatter of small circles marks each arc’s starting point. The data comes from a topojson file that refines a GeoJSON FeatureCollection sourced from Natural Earth.

BBrideau

67% match

Loading thumbnail…

test gj

This example displays a map of geographic points representing cities, towns, and neighborhoods in the Seattle and Victoria regions, sourced from a GeoJSON file. It uses Vue to manage the application and renders the map with D3.js, likely employing `d3.geoPath` to project the coordinates onto a canvas or SVG. The visualization distinguishes place types such as cities, towns, and localities, with population data available for some features, though no interactive or animated behavior is demonstrated.

SSwampGuzzler

67% match

Loading thumbnail…

Gist 3479d944f561ed81b080d524d9c0a80b

This visualization maps hiking trails fetched from the Hiking Project API, with each trail positioned according to dynamic geographic coordinates passed to the API. The code builds a network-style graph where nodes represent trails, linked by proximity or shared attributes, using D3.js’s force simulation for layout. The rendering relies on `d3.forceSimulation` to compute node positions, while trail data is loaded asynchronously via HTTP requests and parsed from JSON. The display emphasizes spatial relationships between trails, with the simulation running in real time to reveal clusters and connections based on the fetched coordinates.

WWill Carter

66% match