28:null 29:["$","title",null,{"children":"Napoleon's campaign in Russia - Remake of Minard's graph | jrhurb | Observable"}] 2e:T712,## Choices in the re-imagination After studying the original chart from Charles Joseph Minard, here are my thoughts on it: * The indications on the timeline were partial, as the dates were only available after the French troops left Moscow. * There is not much information about what happened on the ground and why the soldiers disappeared: Was it fighting? Were the conditions difficult (as indicated in the temperature chart)? Other reasons? * The human toll of the campaign is enormous, but at first glance, I felt like I was missing the human side of it. * What happened on the Russian side? Reimagining would then answer some of these questions: * Animate the graphic to see the information one date at a time, to better capture the major stages of the campaign, as well as its temporal aspect. This would free up the color coding for another dimension than just input/output. * Display a timeline. * Add a unit chart using man and cross icons to represent the share of survivors at each stage of the campaign. * Provide details about each main event in the campaign to help provide context and clues about what happened. * [To do] Add a thermometer icon to provide information about temperatures. * [To do] Add "back" and "forward" buttons to allow the reader to follow the story at his own pace. * [To do] While looking through my main source of information (Adam Zamoyski), I realized that in the French army there were soldiers from satellite and allied countries, such as Poland and Germany. Another chart is required to include soldiers from other nationalities. * The time was too short to get information about the Russian troops. I reused Mike Bostock's dataset for the French army. Here is the original chart: ![Minard](https://upload.wikimedia.org/wikipedia/commons/2/29/Minard.png "Minard")2f:T6ca,// draw cities (circles) and field movements (lines) on a map function drawTimeline(data) { let y = heigthTimeline/2; let r = 5; let backgroundFill = "#d0c3ab"; let strokeColor = smalt; let strokeWidth = 3; const svg = d3.create("svg") .attr("width", width) .attr("height", heigthTimeline) .attr("viewBox", [0, 0, width, heigthTimeline]) // all dates in the background const allDates = svg.append("g") .selectAll("circle") .data(data) .join("circle") .attr("class", "allDates") .attr("transform", d => `translate(${x(parseDate(d.date))},${y})`) .attr("r", r)//heigthTimeline/10) .attr("fill", backgroundFill)//"none")//"#7f7f7f") //d=> colorCircles(d.r)) .style("stroke","none")// "grey") .style("stroke-width", strokeWidth); // draw a line to display the period duration const duration = svg.append("g") .append("line") .attr("class", "duration") .attr("x1", x(startDate)+r) .attr("x2", x(parseDate(period[id]))-r) .attr("y1", y) .attr("y2", y) .style("stroke", strokeColor) .style("stroke-width", strokeWidth); // start date and selected date appear darker const selectedPeriod = svg.append("g") .selectAll("circle") .data([startDate,parseDate(period[id])]) .join("circle") .attr("class", "selectedPeriod") .attr("transform", d => `translate(${x(d)},${y})`) .attr("r", r)//heigthTimeline/10) .attr("fill", "white")//"#7f7f7f") //d=> colorCircles(d.r)) .style("stroke", strokeColor) .style("stroke-width", strokeWidth); svg.append("g") .call(xAxis); return svg.node(); }30:T404,// Cross by Adrien Coquet from __[Noun Project](https://thenounproject.com/icon/cross-3066973/)__ // Please provide attribution crossPath = "M649.60,172.20 C 649.60,172.20 506.10,172.20 506.10,172.20 506.10,172.20 506.10,38.50 506.10,38.50 506.10,27.30 497.00,17.50 485.10,17.50 485.10,17.50 389.90,17.50 389.90,17.50 378.70,17.50 368.90,26.60 368.90,38.50 368.90,38.50 368.90,172.20 368.90,172.20 368.90,172.20 225.40,172.20 225.40,172.20 214.20,172.20 204.40,181.30 204.40,193.20 204.40,193.20 204.40,288.40 204.40,288.40 204.40,299.60 213.50,309.40 225.40,309.40 225.40,309.40 368.90,309.40 368.90,309.40 368.90,309.40 368.90,661.50 368.90,661.50 368.90,672.70 378.00,682.50 389.90,682.50 389.90,682.50 485.10,682.50 485.10,682.50 496.30,682.50 506.11,673.40 506.11,661.50 506.11,661.50 506.10,309.40 506.10,309.40 506.10,309.40 649.60,309.40 649.60,309.40 660.80,309.40 670.60,300.30 670.60,288.40 670.60,288.40 670.60,193.20 670.60,193.20 670.60,181.30 661.50,172.21 649.60,172.21 649.60,172.21 649.60,172.20 649.60,172.20"31:T415,// Man by Adrien Coquet from __[Noun Project](https://thenounproject.com/icon/man-1034124/)__ // Please provide attribution manPath = "M 503.30,168.70 C 503.30,168.70 486.50,168.00 486.50,168.00 486.50,168.00 388.50,168.00 388.50,168.00 388.50,168.00 371.70,168.70 371.70,168.70 345.10,170.10 325.50,193.20 326.90,219.10 326.90,219.10 336.00,373.10 336.00,373.10 337.40,392.70 353.50,408.80 373.80,408.80 373.80,408.80 376.60,408.80 376.60,408.80 376.60,408.80 392.70,648.20 392.70,648.20 394.10,670.60 406.69,683.20 422.10,683.20 422.10,683.20 452.90,683.20 452.90,683.20 468.30,683.20 481.60,671.30 482.30,648.20 482.30,648.20 498.40,408.80 498.40,408.80 498.40,408.80 501.19,408.80 501.19,408.80 520.79,408.80 537.59,393.40 538.99,373.10 538.99,373.10 548.09,219.10 548.09,219.10 549.50,192.50 529.90,170.10 503.30,168.70 503.30,168.70 503.30,168.70 503.30,168.70 M 504.00,84.00 C 504.00,120.73 474.23,150.50 437.50,150.50 400.77,150.50 371.00,120.73 371.00,84.00 371.00,47.27 400.77,17.50 437.50,17.50 474.23,17.50 504.00,47.27 504.00,84.00"32:T73b,// function to place custom shapes function gridModulo (data, value, { dataLength = data.length, columnLength = 0, squareSize = 50, squareCol = smalt,//"#3b4b69",// used in shape fill squareBgd = lightGrey,//inverted,//"#CACACA",//"#e0e5db", strokeCol = smalt,//"#de3d83",// used in shape stroke strokeWidth = 2, textFill = "#fff", showValues = true } = {}) { const size = (squareSize + (strokeWidth * 2)); const columns = (columnLength !== null && columnLength > 1 ) ? columnLength : Math.round(width / size) ; const height = (dataLength / columns) * size; console.log('columns', columns) const svg = DOM.svg(width, height+ size); const sel = d3.select(svg); const scaleCol = d3.scaleLinear() .domain([0, columns]) .range([0, columns * size]); const scaleRow = d3.scaleLinear() .domain([0, dataLength / columns]) //.range([height, 0]); // to display "latest" numbers on top .range([0, height]); // /!\ ? change here to add additional space every 5 rows (to display block of 100 custom shapes) const join = sel.selectAll('g') .data(data) .join('g').append('g') .attr('transform', (d, i) => { const x = i % columns const y = Math.floor(i / columns) return `translate(${scaleCol(x)}, ${scaleRow(y)})` }); join.append('path') .attr("d", (d, i) => (value < (i+1)/dataLength) ? crossPath : manPath) .attr('width', squareSize) .attr('height', squareSize) .attr('stroke-width', strokeWidth) .attr('stroke', (d, i) => (value < (i+1)/dataLength) ? squareBgd : squareCol)//strokeCol) .attr('fill', (d, i) => (value < (i+1)/dataLength) ? squareBgd : squareCol) // (i+1) to start counting from 1 (and not 0) .attr('transform', (d, i) => "scale("+shapeScale+")"); // reduce the size of the custom shape return svg; }33:T960,// draw cities (circles) and field movements (lines) on a map function drawMap(data1, data2, { } ={}){ const svg = d3.create("svg") .attr("width", width) .attr("height", heightFlowChart) //.attr("style","background-color: lightgrey") .attr("viewBox", [0, 0, width, heightFlowChart]) //.attr("style", "width: 100%; height: auto; height: intrinsic;"); // draw troop movements const troops = svg.append("g") .selectAll("line") .data(data2) .join("line") .attr("x1",d=> d.x1) .attr("y1",d=> d.y1) .attr("y2",d=> d.y2) .attr("x2",d=> d.x2) .style("stroke-width",d=>widthScale(d.survivors)) .style("stroke",d=>color(d.group))//"blue") .style("opacity",d=>d.step/stepSelection) .attr("class", "troops") .style("stroke-linecap","round") /* const labelTroops = svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("stroke-linejoin", "round") .selectAll("g") .data(data2) .join("g") .attr("transform", (d=> `translate(${d.x1},${d.y1})`)); labelTroops.append("text") .text(d => `(${d.long}, ${d.survivors})`)//`(${d.long}, ${d.lat}, ${d.survivors})`) .attr("fill", d=>color(d.group))//"#7f7f7f")//"red") .attr("text-anchor", "middle").attr("dy", "-0.7em"); */ // place cities const cities = svg.append("g") .selectAll("circle") .data(data1) .join("circle") .attr("class", "cities") .attr("transform", d => `translate(${d.x},${d.y})`) .attr("r", (d,i) => heightFlowChart/200) .attr("fill", "black");//test);//inverted)//"#7f7f7f")//"red"); //d=> colorCircles(d.r)) //.style("stroke-width", strokeWitdthSymbol) //.style("stroke", strokeColorSymbol) ; //.attr("fill", "blue") const labelCities = svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("stroke-linejoin", "round") .selectAll("g") .data(data1) .join("g") .attr("transform", (d=> `translate(${d.x},${d.y})`)); labelCities.append("text") .text(d => d.city) .style("background-color","black") .attr("fill", "black")//test)//inverted)//"#7f7f7f")//"red") .attr("text-anchor", "middle").attr("dy", "-0.7em"); return svg.node(); }34:T44a,## References * __[File attachment](https://observablehq.com/@observablehq/file-attachments)__ and especially for __[Excel files]( https://observablehq.com/@observablehq/xlsx)__ * Unit chart: * __[Grid layout](https://observablehq.com/@eesur/modulo-operation-to-create-a-grid-v2?collection=@eesur/data-visuals)__ * Specific shapes: * Man by Adrien Coquet from __[Noun Project](https://thenounproject.com/icon/man-1034124/)__, * Cross by Adrien Coquet from __[Noun Project](https://thenounproject.com/icon/cross-3066973/)__, * Flow chart: This was adapted from __[Ben Schmidt's Minard's Map of the Russian Campaign](http://benschmidt.org/D3-trail/minard.html )__. * Data: __[Protovis](http://mbostock.github.io/protovis/ex/napoleon.html)__ and __[Re-Vision Gallery](https://www.datavis.ca/gallery/minard/ggplot2/ggplot2-minard-gallery.zip)__ * Colors: __[Napoleon blue](https://encycolorpedia.fr/2f3c54)__ * Adding features to a map: __[Raster & Vector](https://observablehq.com/@d3/raster-vector)__, __[Streaming shapefiles](https://observablehq.com/@mbostock/streaming-shapefiles)__35:T4b3,html``36:[{"id":"dfac543683acb936b5c94d47cf2970b09a6ceba2a52e4c0d183a6118a32b279ec00489347af222d53d7502c61a3e188d93568bdb5fb7516f2fec72849284406d","href":"https://static.observableusercontent.com/files/dfac543683acb936b5c94d47cf2970b09a6ceba2a52e4c0d183a6118a32b279ec00489347af222d53d7502c61a3e188d93568bdb5fb7516f2fec72849284406d","name":"events3.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1723196882548.304,"size":14243},{"id":"eefa372553b1e644c24eec35b0dff125a389542f17106b9bc04037dd5670832a8a4d24fa60d038ebcd2f06f7db0d71e0a937405552d941f89a1776a8dbf2f716","href":"https://static.observableusercontent.com/files/eefa372553b1e644c24eec35b0dff125a389542f17106b9bc04037dd5670832a8a4d24fa60d038ebcd2f06f7db0d71e0a937405552d941f89a1776a8dbf2f716","name":"troopsLines5.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1723196882548.304,"size":11284},{"id":"1c273f95d0b291b2d4b54e89f1f6b6bbecbddc1041f8d4582f4674e6cc179bea03b8ede2ad58987ea081d45c2eb769fc2be3803566552472b008d03dcebf16e3","href":"https://static.observableusercontent.com/files/1c273f95d0b291b2d4b54e89f1f6b6bbecbddc1041f8d4582f4674e6cc179bea03b8ede2ad58987ea081d45c2eb769fc2be3803566552472b008d03dcebf16e3","name":"cities.xlsx","type":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet","lastModified":1723196882548.304,"size":8914}] 2c:{"id":"cb809de6a2a0bb8e","slug":null,"title":"Napoleon's campaign in Russia - Remake of Minard's graph","thumbnail":"d44c4eb2e57a2b6928ba3ecd3f9546656386d85df6926ac66e02289fd3e52d7a","access_level":"public","create_time":"$D2024-08-09T09:48:02.548Z","update_time":"$D2024-08-09T09:48:02.548Z","view_time":null,"first_public_time":"$D2024-08-09T09:48:02.548Z","has_unpublished_edits":null,"fork":{"id":"a495f2b202c160e0","slug":"napoleons-campaign-in-russia-remake-of-minards-graph","title":"Napoleon's campaign in Russia - Remake of Minard's graph","owner":{"id":"1280d736486ab85b","login":"linetonthat","name":"Line Ton That"}},"stars":0,"starred":false,"owner":{"type":"team","id":"09f793ee0bf17017","login":"hurb","name":"jrhurb","avatar_url":"https://avatars-next.observableusercontent.com/c435a926fc07c5bed57cc1a702a4b2abcb1f5093ea99d307303c2f12f28d1675","tier":"starter_2024"},"version":2649,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fb55e01b401bd78d","login":"joaohurb","name":"João Ricardo Hurb Com","avatar_url":"https://avatars-next.observableusercontent.com/5a37070bf9e58604859ec9aa7033b0dcb40e61c4ff0aeaba33424ba04567b1fd","tier":null}],"members":[{"type":"team","id":"09f793ee0bf17017","login":"hurb","name":"jrhurb","avatar_url":"https://avatars-next.observableusercontent.com/c435a926fc07c5bed57cc1a702a4b2abcb1f5093ea99d307303c2f12f28d1675","tier":"starter_2024","role":"editor"},{"type":"individual","id":"fb55e01b401bd78d","login":"joaohurb","name":"João Ricardo Hurb Com","avatar_url":"https://avatars-next.observableusercontent.com/5a37070bf9e58604859ec9aa7033b0dcb40e61c4ff0aeaba33424ba04567b1fd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Napoleon's campaign in Russia - Remake of Minard's graph","cells":[{"id":0,"value":"# Napoleon's campaign in Russia - Remake of Minard's graph","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":165,"value":"As part of the __[Storytelling with data challenge from March 2023](https://community.storytellingwithdata.com/challenges/mar-2023-remake-a-famous-graph)__, here is a reimagining of Minard's graphic on the French invasion of Russia in 1812. This version uses interactivity to walk through the various events of the campaign, providing details about what happened on the ground, as well as an idea of survival rates and timelines. To learn more about the steps in the reimagining process, see [below](https://observablehq.com/d/a495f2b202c160e0#cell-2085).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":932,"value":"*Please use this slider to browse the main events of the campaign. *","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":926,"value":"viewof id = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1223,"value":"html`\n

Fate of the French soldiers during Napoleon's 1812 Russian campaign

${timelineBlock}

\n
\n

${eventBlock}

${unitBlock}

${flowmapBlock}

${sources}

${icons}

\n`;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2098,"value":"NB: In the unit chart above, the cross icon represents the French soldiers who did not return to France, either because they died in Russia, or because they deserted, or because they were made prisoners, or because they stayed in Russia.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2085,"value":"$2e","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1938,"value":"## Layout","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1521,"value":"padding = 7","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"squareSize = 13","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"heightFlowChart = 270\n//viewof heightFlowChart = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1836,"value":"heigthTimeline = 100\n//viewof heigthTimeline = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2015,"value":"### Colors","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2017,"value":"nBlue = \"#3b4b69\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2024,"value":"smalt = \"#003399\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2026,"value":"petrolBlue = \"#1d4851\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2042,"value":"lightGrey = \"#c9cdd5\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2039,"value":"inverted = \"#d0c3ab\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1940,"value":"## Define block contents","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1698,"value":"The selected ID is: ${id}.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":47,"value":"selectedEventTitle = events[id][\"title\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"selectedEventDetails = events[id][\"details\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1443,"value":"flowmapBlock = html`\n

Field movements

${flowchart}

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1794,"value":"survivorSummary = function(id) {\n if (id < 2) \n {return\"Most soldiers have survived.\";}\n else\n return `About 1 in ${events[id][\"oneIn\"]} soldiers have survived.`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1332,"value":"unitBlock = html`\n

Count of French troops

\n
\n

${survivorSummary(id)}

${unitChart}

Each figure represents 1,055 soldiers.

${formatTime(parseDate(events[id][\"date\"]))}

${timeline}

${selectedEventTitle}

${selectedEventDetails}

Data: 1812: Napoleon’s Fatal March on Moscow from Adam Zamoyski, Minard's Napoleon from Mike Bostock, Re-Visions of Minard from Michael Friendly

Icons: Man and Cross from Adrien Coquet from the Noun Project

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1936,"value":"## Timeline","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1120,"value":"formatTime = d3.timeFormat(\"%B %d, %Y\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1128,"value":"parseDate = d3.timeParse(\"%Y-%m-%d\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1811,"value":"timeline = drawTimeline(events)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1909,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${heigthTimeline - 25})`)\n .call(d3.axisBottom(x))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1807,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1802,"value":"x = d3.scaleTime()\n .domain([startDate, endDate])\n .range([15, width * 0.5]);//300])//width])//","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1821,"value":"startDate = parseDate(period[0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1823,"value":"endDate = parseDate(period[period.length-1])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"period = events.map(d=>d.date)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"## Unit chart\nThe layout is adapted from __[this grid](https://observablehq.com/@eesur/modulo-operation-to-create-a-grid-v2?collection=@eesur/data-visuals)__.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":138,"value":"The **number** of squares in the grid: ${numberOfSquares}.\n\nThe **share of survivors**: ${selectedSurvivorShare}.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":86,"value":"selectedSurvivorShare = events[id][\"total_survivors\"]/422000 ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"// draw the grid chart\nunitChart = gridModulo(gridItems, selectedSurvivorShare, {\n columnLength: numOfColumns,\n squareSize: squareSize\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"//viewof shapeScale = html``\nshapeScale = 0.022//0.05//","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"gridItems = d3.range(numberOfSquares)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"//viewof numberOfSquares = html``\nnumberOfSquares = 400\n//numberOfSquares = 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":616,"value":"## Flowchart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":132,"value":"//viewof numOfColumns = html``\nnumOfColumns = 20\n//numOfColumns = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":974,"value":"selectedStrokeWidth = 28\n//viewof selectedStrokeWidth = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1727,"value":"// the selected step is based on the id (row number) (/!\\ to review)\nstepSelection = id +1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":577,"value":"flowchart = drawMap(projectPoints(cities),projectedTroops.filter(d=>d.step<= stepSelection))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":790,"value":"//selectedTroops = troops//.filter(d => d.group ===1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":547,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":523,"value":"## Geoscales and projection","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":943,"value":"// used to distinguish the groups of tropps\ncolor = d3.scaleOrdinal([smalt, nBlue,petrolBlue])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":908,"value":"widthScale = d3.scaleLinear()\n .domain([0,340000])\n .range([1,selectedStrokeWidth])//30])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"// check if the parameters are correct: .center = ?\nprojection = d3.geoMercator().translate([width/2,heightFlowChart*(1/2)]).scale(4000).center([31,55])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":533,"value":"longs = d3.extent(cities.map(d=>d.long))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"projectedCities = projectPoints(cities)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":664,"value":"function projectPoints(data) {data.map(d=>{\n let point = projection([d.long, d.lat]);\n d.x = point[0];\n d.y = point[1];\n return d;\n })\n return data; \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":880,"value":"projectedTroops = project2Points(troopsLines)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":882,"value":"function project2Points(data) {data.map(d=>{\n let point1 = projection([d.long, d.lat]);\n let point2 = projection([d.long2, d.lat2]);\n d.x1 = point1[0];\n d.y1 = point1[1];\n d.x2 = point2[0];\n d.y2 = point2[1];\n return d;\n })\n return data; \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2632,"value":"## Helpers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1244,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"## File attachment","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2335,"value":"### Events","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1539,"value":"workbookEvents = FileAttachment(\"events3.xlsx\").xlsx()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1541,"value":"events = workbookEvents.sheet(0, { headers: true, range: \":F\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1544,"value":"events","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2337,"value":"### Movements of troops","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":873,"value":"workbookTroopsLines = FileAttachment(\"troopsLines5.xlsx\").xlsx()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":875,"value":"troopsLines = workbookTroopsLines.sheet(0, { headers: true, range: \":I\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":879,"value":"troopsLines","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2339,"value":"### Cities","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":516,"value":"workbookCities = FileAttachment(\"cities.xlsx\").xlsx()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":518,"value":"cities = workbookCities.sheet(0, { headers: true, range: \":C\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":520,"value":"cities","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W36","stdlib":"1"}} 2d:"$2c:body"