Atlas
A globe of the places in a CV, beside the entries that happened there. As you read, the globe turns to each place.
Experimental May change in any minor version before 1.0.
In this chapter 14 pages
Example
Example places. 3 places, 3 moves between them.
PhD in Computer Science
to now
Example University
Neural networks for data where one relation joins more than two things: simplicial complexes, cell complexes, and sheaves. Teaching assistant for the graduate machine learning course.
Machine learning engineer
to
Example Company
Graph models for search ranking over a large product catalogue, from the first prototype to the version in production.
MSc in Computer Science
to
Example Institute of Technology
Thesis on why deep message passing networks over-smooth, and two ways to slow it down.
BSc in Mathematics
to
Example University
Final project on spectral graph theory: what the eigenvalues of a graph's Laplacian say about its shape.
<Atlas label="Where I have studied and worked">
<AtlasStop title="PhD in Computer Science" org="Example University" kind="Academia"
place="Edinburgh, United Kingdom" lat={55.95} lon={-3.19} from="2022-09" to="now">
<p>What you worked on, in a sentence or two.</p>
</AtlasStop>
<AtlasStop title="MSc in Computer Science" org="Example Institute of Technology"
kind="Education" place="Toronto, Canada" lat={43.65} lon={-79.38} from="2019-09" to="2021-06" />
</Atlas>What it is
The Atlas is for the CV or the about page of a personal site. Each entry is a stop: what you did, when, and where. The globe is drawn like the complex: places are points, the route between them in date order is a line of great-circle edges, and the entry you are reading is the tomato ball, with its dashed reach. The legs into and out of that place stay full chalk; the rest of the route fades with each move away from it, so a long CV does not cover the globe in lines. Countries that hold a place fill mustard.
The example above holds four entries. In a column this narrow the globe stays pinned above the entries; give it 52rem or more and the entries run on the left with the globe in view beside them, as on the CV page pattern.
Reading it
- Side by side, an entry becomes current when its top crosses a line 45% down the screen. Stacked, the current entry is the topmost one showing below the pinned globe, so the globe always names the entry you can read, and the caption under it gives that entry's title, organization, and dates. The globe flies to the place, and the ball travels the great circle from the last place, leaving a tomato trail that fades when it lands.
- Past the last entry the globe pulls back to every place, with the whole route in chalk. The first time, the route lights up leg by leg in date order, then fades back to chalk.
- A flight that passes near a pole turns the globe smoothly as it goes and lands with north up. If you stop a flight by dragging, the globe turns back to north up once you let go.
- A pin, or the place line of an entry, picks that entry. A pin holding several entries picks the next one each time.
- Drag turns the globe. Ctrl or Cmd and scroll zooms, so plain scrolling over the globe still scrolls the page; on touch screens a sideways drag turns it and a pinch zooms. The buttons zoom and show every place. With the globe focused, arrow keys turn it, + and - zoom, and 0 shows every place.
- With more than one kind of entry, a filter above the list shows one kind; the other places dim.
Options
| Atlas prop | Effect | Default |
|---|---|---|
label | Names the map for assistive technology | Places |
filter | Offers a filter by kind when the entries have more than one kind | true |
| AtlasStop prop | Effect |
|---|---|
title | What you did: the degree, the job, the visit |
place | Place name as it should read, such as Toronto, Canada |
lat, lon | Coordinates in degrees. Entries at the same coordinates share a pin |
from, to | Dates as 2019, 2019-09, or 2019-09-15; to can be now. From orders the route |
when | Text that replaces the printed dates, such as Summer 2024 |
kind | Education, Work, Academia, or any word. Shown as a label and offered as a filter |
org | Institution or company |
zoom | Zoom while the entry is current, from 1 (the whole globe) to 16. The default 6 shows about 3000km |
level | Heading level of the title, from 2 to 6. Default 3; make it follow the page outline, so 2 when the entries sit right under the page title |
The element fires ply-atlas-change with index and place when the current entry changes, and select(index) makes an entry current; -1 shows every place.
The map
The outlines are Natural Earth's countries as the United States government recognizes them, the dataset's US point of view, so borders in disputed places follow the US position. Natural Earth is in the public domain. The globe uses two levels of detail made from its 1:10 million shapes: a coarse one for the whole globe and a finer one from zoom 3.5. It is drawn in the browser with d3-geo, so it needs no map tiles, keys, or outside service. It zooms from the whole globe to a region about 400km across; streets and roads are not part of it.
The page loads about 60KB, compressed, when the Atlas connects, and the close outlines, about 76KB more, once it is near the screen and the reader scrolls, points, or presses a key, or as soon as a view needs them. It decodes the map and draws its first frame in short slices, so the page stays responsive while it does. Under reduced motion the globe jumps instead of flying, and the ball does not travel.
Without JavaScript
The server draws the globe with every place and the route, and the entries read as a plain list with their dates, places, and text. Contrast themes keep the globe's own colors, since the color is the content. In print the globe appears once above the entries, without its controls.
<ply-atlas class="ply-atlas" label="Where I have studied and worked">
<div class="ply-atlas__frame">
<div class="ply-atlas__stage"><div class="ply-atlas__map" data-surface="panel"></div></div>
<div class="ply-atlas__list">
<div class="ply-segmented ply-atlas__filter" hidden></div>
<ol class="ply-atlas__stops">
<li class="ply-atlas__stop" data-place="Toronto, Canada" data-lat="43.65" data-lon="-79.38"
data-from="2019-09" data-kind="Education">
<h3 class="ply-atlas__title">MSc in Computer Science</h3>
<p class="ply-atlas__when">2019 to 2021</p>
<p class="ply-atlas__org">Example Institute of Technology</p>
<p class="ply-atlas__meta"><span class="ply-label">Education</span>
<span class="ply-atlas__place"><span class="ply-atlas__dot" aria-hidden="true"></span>Toronto, Canada</span></p>
</li>
</ol>
</div>
</div>
</ply-atlas>
<script type="module" src="https://dario-loi.github.io/polytope/kit/js/atlas.js"></script>