Skip to content

Commit b59b26a

Browse files
committed
document topojson
1 parent 320bb7b commit b59b26a

File tree

1 file changed

+59
-1
lines changed

1 file changed

+59
-1
lines changed

docs/lib/topojson.md

Lines changed: 59 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,63 @@
11
# TopoJSON
22

3-
```js echo
3+
[TopoJSON](https://github.com/topojson/topojson) is an extension of GeoJSON that encodes topology.
4+
5+
The [client](https://github.com/topojson/topojson-client) part of the library is available in Observable Markdown as `topojson`, allowing you to transform compact TopoJSON files to GeoJSON and display a map with—for instance—[Leaflet](leaflet), [D3](d3), or [Observable Plot](plot).
6+
7+
If you prefer to import it explicitly:
8+
9+
```js echo run=false
410
import * as topojson from "npm:topojson-client";
511
```
12+
13+
For an example, let’s load a file that describes the counties, states and general outline of the United States, already [projected](https://d3js.org/d3-geo/conic#geoAlbersUsa) to a frame of 975×610 pixels:
14+
15+
```js echo
16+
const us = FileAttachment("counties-albers-10m.json").json();
17+
```
18+
19+
We can then create a GeoJSON object for each feature we want to display. First, the general outline of the nation:
20+
21+
```js echo
22+
const nation = topojson.feature(us, us.objects.nation);
23+
```
24+
25+
The counties mesh, which includes each of the delimitations once (instead of once per county). This avoids an additional stroke on the perimeter of the map, which would otherwise mask intricate features such as islands and inlets.
26+
27+
```js echo
28+
const countiesmesh = topojson.mesh(us, us.objects.counties);
29+
```
30+
31+
The _statemesh_ likewise contains the internal borders between states, _i.e._, everything but the coastlines and country borders.
32+
33+
```js echo
34+
const statemesh = topojson.mesh(us, us.objects.states, (a, b) => a !== b)
35+
```
36+
37+
```js echo
38+
Plot.plot({
39+
projection: "identity",
40+
width: 975,
41+
height: 610,
42+
marks: [
43+
Plot.geo(countiesmesh, {strokeOpacity: 0.5}),
44+
Plot.geo(statemesh, {strokeWidth: 0.75}),
45+
Plot.geo(nation, {strokeWidth: 1.5})
46+
]
47+
})
48+
```
49+
50+
If you need to manipulate topologies, for example to simplify the shapes on-the-fly, you may need to import the [server](https://github.com/topojson/topojson-server) and [simplify](https://github.com/topojson/topojson-simplify) parts of the library, too. They are conveniently bundled together in the topojson npm module:
51+
52+
```js echo
53+
import * as topojson from "npm:topojson";
54+
```
55+
56+
Or, you can be more precise and import only the symbols you need:
57+
58+
```js echo run=false
59+
import {topology} from "npm:topojson-server";
60+
import {presimplify, simplify} from "npm:topojson-simplify";
61+
```
62+
63+
(For more details, please refer to the library’s documentation.)

0 commit comments

Comments
 (0)