Skip to content

Commit afeffa8

Browse files
committed
Update CHANGELOG
1 parent 4d4e2da commit afeffa8

File tree

2 files changed

+33
-14
lines changed

2 files changed

+33
-14
lines changed

CHANGELOG.md

Lines changed: 33 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
*Not yet released. These are forthcoming changes in the main branch.*
66

7-
The new [geo mark](https://observablehq.com/@observablehq/plot-geo) renders GeoJSON geometries.
7+
The new [geo mark](./README.md#geo) renders GeoJSON geometries such as polygons, lines, and points. Together with Plot’s new [projection system](https://observablehq.com/@observablehq/plot-projections), Plot can now produce thematic maps. For example, the choropleth map below shows unemployment rates by U.S. county.
88

99
[<img src="./img/choropleth.png" width="640" alt="A choropleth of unemployment rate by U.S. county">](https://observablehq.com/@observablehq/plot-geo)
1010

@@ -21,25 +21,26 @@ Plot.geo(counties, {fill: (d) => d.properties.unemployment}).plot({
2121
})
2222
```
2323

24-
Naturally, it works with Plot’s core features, including scales, legends, and faceting.
24+
The new top-level [**projection** option](./README.md#projection-options) controls how geometric coordinates are transformed to the screen and supports a variety of common geographic projections, including the composite U.S. Albers projection shown above, the Equal Earth projection, the Mercator projection, the orthographic and stereographic projections, several conic and azimuthal projections, among others. Projections can be fit to geometry using the projection.**domain** option, and rotated to an arbitrary aspect using the projection.**rotate** option.
2525

26-
[<img src="./img/faceted-map.png" width="930" alt="A dot map of Walmart store openings faceted by decade">](https://observablehq.com/@observablehq/plot-geo)
26+
[<img src="./img/orthographic.png" width="640" alt="A world map using the orthographic projection, centered somewhere around San Antonio, Texas">](https://observablehq.com/@observablehq/plot-projections)
2727

2828
```js
2929
Plot.plot({
30-
width: 975,
31-
projection: "albers",
32-
fx: {tickFormat: (d) => `${d}’s`},
33-
facet: {data: walmarts, x: (d) => Math.floor(d.date.getUTCFullYear() / 10) * 10},
30+
height: 640,
31+
inset: 1,
32+
projection: {type: "orthographic", rotate: [100, -30]},
3433
marks: [
35-
Plot.geo(statemesh, {strokeOpacity: 0.1}),
36-
Plot.dot(walmarts, {x: "longitude", y: "latitude", r: 1, fill: "currentColor"}),
37-
Plot.geo(nation)
34+
Plot.graticule(),
35+
Plot.geo(land, {fill: "currentColor"}),
36+
Plot.sphere()
3837
]
3938
})
4039
```
4140

42-
The new top-level [**projection** option](https://observablehq.com/@observablehq/plot-projections) controls how geometry coordinates are mapped to the screen. While primarily for the geo mark, it works automatically with most of Plot’s other mark types. For example, here is a map using vectors to show county-level vote margins in the 2020 U.S. presidential election.
41+
The new graticule convenience mark renders meridians and parallels (lines of constant longitude and latitude), while the sphere convenience mark draws the outline of the sphere.
42+
43+
Plot’s projection system works automatically with most of Plot’s mark types, including dots, vectors, lines, and rects. For example, the map below uses vectors to show county-level vote margins in the 2020 U.S. presidential election: a margin for Biden is shown as a blue left-pointing arrow, while a margin for Trump is shown as a red right-pointing arrow; the length of the arrow is proportional to the margin.
4344

4445
[<img src="./img/vector-map.png" width="640" alt="An arrow map showing the county-level vote margins in the 2020 U.S. presidential election; a margin for Biden is shown as a blue left-pointing arrow, and a margin for Trump is shown as a red right-pointing arrow">](https://observablehq.com/@observablehq/plot-projections)
4546

@@ -64,7 +65,7 @@ Plot.plot({
6465
})
6566
```
6667

67-
With the line mark, it’s not just a point projection; the line mark automatically passes line geometry through the projection, allow projections to interpret line segments as geodesics and to clip or cut as needed. For example, the route of the HMS *Beagle* shown below is automatically cut when it crosses the antimeridian.
68+
For the [line mark](./README.md#line), the specified projection doesn’t simply project control points; the projection has full control over how geometry is transformed from its native coordinate system (often spherical) to the screen. This optionally allows line geometry to be represented as [geodesics](https://en.wikipedia.org/wiki/Geodesic), which are sampled and clipped during projection. For example, the map below shows the route of Charles Darwin’s voyage on the HMS *Beagle*; note that the line is cut when it crosses the antimeridian in the Pacific ocean. (Also note the use of the *stroke* channel to vary color.)
6869

6970
[<img src="./img/beagle.png" width="640" alt="A map of the route of the HMS Beagle, 1831–1836; color indicates direction, with the ship initially departing London and heading southwest before circumnavigating the globe">](https://observablehq.com/@observablehq/plot-projections)
7071

@@ -80,7 +81,25 @@ Plot.plot({
8081
})
8182
```
8283

83-
Plot’s projection system works with Plot’s transforms. For example, the map below demonstrates using the hexbin transform to aggregate projected locations into local hexagons.
84+
Plot’s new geo mark and projection system work with Plot’s other core features, including scales, legends, faceting, and transforms. For example, here is a faceted dot map showing openings of Walmart stores over five decades.
85+
86+
[<img src="./img/faceted-map.png" width="930" alt="A dot map of Walmart store openings faceted by decade">](https://observablehq.com/@observablehq/plot-geo)
87+
88+
```js
89+
Plot.plot({
90+
width: 975,
91+
projection: "albers",
92+
fx: {tickFormat: (d) => `${d}’s`},
93+
facet: {data: walmarts, x: (d) => Math.floor(d.date.getUTCFullYear() / 10) * 10},
94+
marks: [
95+
Plot.geo(statemesh, {strokeOpacity: 0.1}),
96+
Plot.dot(walmarts, {x: "longitude", y: "latitude", r: 1, fill: "currentColor"}),
97+
Plot.geo(nation)
98+
]
99+
})
100+
```
101+
102+
As another example using the same dataset, the map below uses the hexbin transform to aggregate Walmart store opening into local hexagons.
84103

85104
[<img src="./img/hexbin-map.png" width="640" alt="A bivariate hexbin map of Walmart store openings; within each hexagonal area, size indicates the number of Walmart store openings, and color indicates the year of the first opening">](https://observablehq.com/@observablehq/plot-projections)
86105

@@ -100,7 +119,7 @@ Plot.plot({
100119
})
101120
```
102121

103-
While a variety of basic projections are included by default, Plot’s projection system can be extended using any implementation that is compatible with D3’s *projection*.stream interface. This includes the existing d3-geo-projection and d3-geo-polygon libraries. For example, here is a world map using Goode’s interrupted homolosine projection.
122+
In addition to the included basic projections, Plot’s projection system can be extended using any projection implementation compatible with D3’s [projection stream interface](https://github.com/d3/d3-geo/blob/main/README.md#streams). This includes all the projections provided by the [d3-geo-projection](https://github.com/d3/d3-geo-projection) and [d3-geo-polygon](https://github.com/d3/d3-geo-polygon) libraries! For example, here is a world map using Goode’s interrupted homolosine projection.
104123

105124
[<img src="./img/goode.png" width="640" alt="A world map using Goode’s interrupted homolosine projection">](https://observablehq.com/@observablehq/plot-projections)
106125

img/orthographic.png

112 KB
Loading

0 commit comments

Comments
 (0)