29:null 2a:["$","title",null,{"children":"Napoleon's March in Vega-Lite | Ayaan Kazerouni | Observable"}] 2f:T4f9,## Data The good folks behind [stdlib](https://github.com/stdlib-js/) have published a version of the dataset, which we have in the `data` object. It contains the following arrays inside of it: - `data.army`: The number of troops (`size`) at a given longitude (`lon`) and latitude (`lan`), the direction they're going in (`A`dvance or `R`etreat), and the `division` (`1` or `2`), which denotes the small divisions that break off from the main army. - `data.cities`: The names and locations of cities, so we can layer on those labels. (These label locations have been offset slightly from the original data to make them readable.) - `data.temperature`: The temperatures on particular dates during the retreat. **Extras**. Minard's graphic included additional elements we won't try to address in this exercise, but you can try to tackle them if there's time. - `data.rivers`: Geodata depicting the rivers that appeared in Minard's graphic. If you're feeling adventurous, do the assigned reading on [Cartographic Visualization](https://observablehq.com/@uwdata/cartographic-visualization) and come back and try this, or return to this exercise later this quarter when we cover it in class. - `data.labels`: The numerical labels that Minard included in his original graphic.30:T4ef,data = { const data = await minard(); data.cities = data.cities.map(d => { const offsets = cityOffsets[d.city] ?? [0, 0]; const lon = d.lon + offsets[0]; const lat = d.lat + offsets[1]; return { ...d, lon, lat }; }); // Create the projection, fit to the expected size of the map const projection = d3.geoEqualEarth() .fitSize([mapWidth, mapWidth / 2], { type: 'MultiPoint', coordinates: data.army.map(d => [d.lon, d.lat]) }); // Manually project the temperature data's longitudes using the equalEarth projection. // The equalEarth projection needs both lon,lat but the temp data only has longitudes. // Since the army stayed in a pretty narrow latitude band, we'll use the mean latitude of the retreat const meanLat = d3.mean(data.army.filter(d => d.direction === 'R'), d => d.lat); // Compute an `x` field on each temperature row, obtained by projecting that // row's lon,meanLat tuple. // We'll use the regular `x` channel with this field, and it will match map longitudes, // since the troops map is drawn by default using the equalEarth projection data.temperature = data.temperature.map(d => { const [x] = projection([d.lon, meanLat]); return { ...d, x }; }); return data; }31:[] 2d:{"id":"93c77cc77544ecef","slug":"napoleons-march-vl","title":"Napoleon's March in Vega-Lite","thumbnail":"8d375410fe22f91f72ba518736802be392133613c6fc703adf089d05863276ef","access_level":"unlisted","create_time":"$D2026-03-31T00:05:13.721Z","update_time":"$D2026-04-28T17:04:32.300Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"1d83bfce92a9c574","login":"ayaankazerouni","name":"Ayaan Kazerouni","avatar_url":"https://avatars-next.observableusercontent.com/0e57571babb328d16b661fb3c0f94c9629fc275ae03e484ce19dbcf72fa1be0d","tier":"starter_2024"},"version":621,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"7a2aaf0dcd8f4999","login":"ayaankazerouni","name":"Ayaan Kazerouni","avatar_url":"https://avatars-next.observableusercontent.com/d56bdf990c9be43beacbf55c7ca358b0aa7c36eb9211e9fc23f3b50bc80603bd","tier":null}],"members":[{"type":"team","id":"1d83bfce92a9c574","login":"ayaankazerouni","name":"Ayaan Kazerouni","avatar_url":"https://avatars-next.observableusercontent.com/0e57571babb328d16b661fb3c0f94c9629fc275ae03e484ce19dbcf72fa1be0d","tier":"starter_2024","role":"editor"},{"type":"individual","id":"7a2aaf0dcd8f4999","login":"ayaankazerouni","name":"Ayaan Kazerouni","avatar_url":"https://avatars-next.observableusercontent.com/d56bdf990c9be43beacbf55c7ca358b0aa7c36eb9211e9fc23f3b50bc80603bd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":25,"collection":{"id":"6c810503155b0a33","slug":"csc-477-cal-poly","title":"CSC 477","owner":{"id":"1d83bfce92a9c574","login":"ayaankazerouni","name":"Ayaan Kazerouni"}},"type":"notebook","body":{"title":"Napoleon's March in Vega-Lite","cells":[{"id":0,"value":"# Napoleon's March in Vega-Lite","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":529,"value":"toc(\"h2,h3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"In this exercise, we'll use what we've learned about _multi-view composition_ in Vega-Lite to create a version of [Charles Minard](https://en.wikipedia.org/wiki/Charles_Joseph_Minard)'s map depicting Napoleon Bonaparte's losses on his Russian campaign in 1812.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":324,"value":"viewof translated = Inputs.checkbox(new Map([[\"English version\", true]]), { value: [false] })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"

\"Minard's — ${image.caption} Click to enlarge.

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":383,"value":"$2f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":405,"value":"## Analyze the graphic\n\n**Let's decompose this graphic into its composite views.** In the spirit of the view-composition algebra we talked about in class, here is roughly what we will build toward (pseudocode):\n\n```js\nvl.vconcat(\n vl.layer(\n bands, // the bands showing the troop counts\n cityLabels,\n troopCountLabels,\n rivers // if/when you do this\n ),\n vl.layer(\n temperature, // a simple line chart\n tempLabels, // temps and dates\n )\n)\n```\n\nLet's tackle each part of the graphic one-by-one.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":417,"value":"## Bands\n\nHere are some hints to spare you some web wandering.\n\n- Mark: At first glance it feels like a `line` mark would do. However, Vega-Lite has a separate [`trail` mark](https://vega.github.io/vega-lite/docs/trail.html) for when you want to encode line size to the underlying data.\n- Encodings:\n - `longitude` and `latitude` are available channels\n - The [`detail` channel](https://vega.github.io/vega-lite/docs/encoding.html#detail) is used to group data by a field that is not mapped to any visual channel. Add the other encodings you, and see the chart you end up with. Then, _can you tell which field should be encoded to `detail`?_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"bands = {\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"## Temperatures\n\nNext, we need the line chart that appears on the bottom, depicting temperatures during the army's return journey.\n\n- Mark: A `line`\n- Encodings:\n - The original graphic plots both geographical and quantitative data in this chart. The horizontal axis shows longitudes, and the vertical axis shows temperature. Using `vl.longitude()` and `vl.y()` won't work, because Vega-Lite expects longitude to be _projected_ — but this is not a geographical chart!\n - Normally, simply using an `x` encoding on the original data would not line up the temperature chart with the map accurately, since the map is using the [Equal earth projection](https://en.wikipedia.org/wiki/Equal_Earth_projection).\n - However, I have separately projected the `lon` values in the raw data using the Equal Earth projection (we will learn more about map projections later this quarter). **So, for this chart, you should just use the `x` encoding for `x` values.**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":443,"value":"temps = {\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":"## Concat\n\nWhen you're ready with each chart, use `vconcat` to put them together. Remember to save the _unrendered_ version in a variable to use in the `vconcat`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":463,"value":"// Your code here. Use vconcat to stack the two charts.","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":514,"value":"## Appendix\n\n### Data preparation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"minard = require( 'https://cdn.jsdelivr.net/gh/stdlib-js/datasets-minard-napoleons-march@umd/browser.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"// Offsets for city labels so they don't overlap the lines\ncityOffsets = ({\n \"Kowno\": [-0.05, 0],\n \"Wilna\": [-0.05, -0.1],\n \"Smorgoni\": [0, 0.1],\n \"Molodexno\": [0, -0.1],\n \"Gloubokoe\": [0, 0.15],\n \"Studienska\": [0, -0.25],\n \"Bobr\": [0.15, -0.22],\n \"Minsk\": [0, 0],\n \"Polotzk\": [0, 0.15],\n \"Witebsk\": [0, 0.15],\n \"Orscha\": [0, -0.2],\n \"Mohilow\": [0, -0.25],\n \"Smolensk\": [0, 0],\n \"Dorogobouge\": [-0.2, 0.11],\n \"Wixma\": [0.1, -0.2],\n \"Chjat\": [0, 0],\n \"Mojaisk\": [0, 0.15],\n \"Tarantino\": [0, 0],\n \"Malo-Jarosewli\": [0, -0.14],\n \"Moscou\": [-0.5, 0.12],\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"### Constants and styles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":489,"value":"mapWidth = width * .75","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"image = ({\n url: translated.length ? \"https://upload.wikimedia.org/wikipedia/commons/thumb/d/db/Redrawing_of_Minard%27s_Napoleon_map.svg/3840px-Redrawing_of_Minard%27s_Napoleon_map.svg.png\" : \"https://upload.wikimedia.org/wikipedia/commons/2/29/Minard.png\",\n caption: translated.length ? htl.html`Translated redrawing by Inigo Lopez Vazquez, CC BY-SA 4.0, Link` : htl.html`Figure source: Minard's Wikipedia page.`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"import { stylesheet } from '@ayaankazerouni/utils'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":523,"value":"import {toc} from \"@jonfroehlich/collapsible-toc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":395,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2e:"$2d:body"