Skip to main content
100%

Text Along Topojson Features

✓ Published0🌍 Public
Aandrew-reid
Last edited Oct 14, 2016
Created on Oct 5, 2016

A world map rendered with a Kavrayskiy VII projection displays three concentric buffer rings around Whitehorse, Canada, with distance labels (5000, 10000, 15000) drawn directly along the curved TopoJSON line features using D3 v4 and SVG. The map includes a graticule, land area, country boundaries, and a white marker point, with the buffer text styled in small gray Arial font.

AI-generated description

Block showing how to place text on topojson lines in d3.js v4. Built off of one of Mike Bostock's blocks on displaying arcs (Snowden's Route I think). Whitehorse, in the Yukon, Canada, is shown on the map with the small circle.

Similar vizzes

Loading thumbnail…

Kavrayskiy VII

This example displays the Kavrayskiy VII projection, a pseudocylindrical world map. It renders the Earth’s landmasses in dark gray with white country boundaries, overlaid on a graticule and sphere outline. Built with D3 v3, it uses `d3.geo.kavrayskiy7`, `d3.geo.path`, and `d3.geo.graticule`, loading world data via TopoJSON. Land and mesh features are drawn as SVG paths, with the projected sphere defined as a reusable path element.

Mmbostock
72% match
Loading thumbnail…

World Map

This world map visualization displays all countries as filled polygons, with each nation assigned a distinct color and outlined by thin white boundaries. The map uses a Kavrayskiy VII projection and includes a graticule overlay. Built with D3 v3, it employs `d3.geo.path` for projection and rendering, `topojson.feature` to extract country features, and `topojson.neighbors` to color each country based on its neighbors, ensuring adjacent nations have different colors. The data comes from the Natural Earth Admin 0 Countries shapefile, converted to TopoJSON format.

RRomyRatolojanahary
72% 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
71% match
Loading thumbnail…

Canada Map

This example displays a static choropleth map of Canada rendered as SVG paths. It loads GeoJSON data from `canada.json` and uses `topojson.feature` to convert the TopoJSON collection. A Mercator projection (`d3.geoMercator`) centers the country, with `d3.geoPath` generating the path data for each province. The map applies a uniform gray fill and dark strokes, using D3 v7 with a standard SVG element.

GGogineni44
71% match
Loading thumbnail…

Canada p2

This example displays a map of Canada using a conic conformal projection, with SVG paths outlining the country's boundaries and small circles marking the starting point of each arc in the TopoJSON data. The visualization is built with D3 v5, using `d3.geoPath` and `topojson.mesh` to render the geographic shapes, while the projection is configured with specific parallels and rotation. The data originates from a local JSON file containing topology information, and the map is drawn within an SVG canvas.

Kkasalwelengwe@gmail.com
71% match
Loading thumbnail…

World map with the world Topojson data

This example displays a world map using the Topojson world data, rendered as an SVG with a teal sphere background and white country boundaries. It employs D3.js v5’s geoEquirectangular projection and d3.geoPath to convert geographic coordinates into SVG paths. The data loads from a remote GitHub gist, and the topojson library’s feature function extracts country geometries. The map is styled via CSS classes for the sphere and individual countries.

Vvegurusaiprathyusha
71% match
Loading thumbnail…

World Map with Topojson data

This example displays a world map using TopoJSON data, rendering countries as blue-filled paths with pink strokes against a white spherical backdrop. It uses D3 v5’s `geoMercator` projection and `geoPath` to convert geographic coordinates into SVG paths, while the TopoJSON library’s `feature` method extracts country geometries from a remote JSON file. The visualization loads data asynchronously via `json` and appends each country path to the SVG canvas, demonstrating a straightforward choropleth-free baseline of global boundaries.

PPrathyusha0304
71% match
Loading thumbnail…

world map with the world Topojson data

This example displays a world map rendered as white countries with black borders on a green background. It uses D3 v5 and TopoJSON to load world-atlas data from a CDN, then projects the geographic features with a Natural Earth projection via `geoNaturalEarth1()` and draws them using `geoPath()`. The `feature()` function from TopoJSON converts the TopoJSON topology into GeoJSON for binding to SVG paths.

Nnsatyaprakash22
71% match