|
1 | 1 | # TopoJSON
|
2 | 2 |
|
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 |
4 | 10 | import * as topojson from "npm:topojson-client";
|
5 | 11 | ```
|
| 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