• [refactoring] use es6 key-value shortcut ({start: start} -> {start})
• translation regex: dash/underdash-proof ?
• translation regex: handle if args[key] undefined
• src/visualizations/PrincipalVisualizationPart2/PrincipalVisualizationPart2.js l92 -> some parts not translated in english ?
• PrincipalVisualizationPart2.js -> issue at line 127 (double function), issue with value at line 138-139 (always undefined)

Visualizations and data preparation

• workflow script for retrieving the contents of the intro
• boats animation
• map 1 province highlights
• map 2 centered on region and showing ports
• map 3 centered on region and showing bureau de fermes

Integration

• color ports, customs offices, ... according to colorpalette
• header with centered title and boat animation
• two column intro
• full width nav menu at the bottom

... in order to be able to read the howto

It would require to:

• update scrollypage by adding an optional lightbox
• update routes map for chapters routes to be able to add an optional :visualizationId param to them
• update all visualizations components to be able to optionnally add a callback for this, and then update the design to display it (a "?" button ?)

Right now when scrolling on a page then navigating to another one, the scroll remains the same as for the previous one. It should be reset to zero each time page is changed.

Data preparation and visualizations

State 1 of the viz

• script => write csv like so:

• rotate and center
• position ports
• render triangle objects and labels (rotated)
• make the full svg fit into the viz column
• develop custom GeoComponent => merge geo and triangle components into 1 SVG
• introduce a threshold => not to represent all ports ? (will require o change nbOfCols based on data.length)
• color ports ?
• display lines between objects and map (then turn those into curves)

State 2 of the viz

• write gexf for the region @robindemourat
• write centrality comparison @robindemourat (parameterizable histogram component)
• how to handle scroll ? (have to click ? limit the scroll ?)
• use color variables for nodes' colors

State 3 of the viz

• script => write 1 csv like so: (if too complicated I produce 3 csvs)

• reusable double triangle and circle component (beziers)
• integrate component in viz
• what do we do with Oléron as ferme_bureau ?? + Navigo data taken in 87 or 89 ??
• gestion of the comparison with other regions
• bonus : add animations (could be starting animation with the map turning)

Integration

• legend, captions, labelling ...

Visualization and data preparation

• set up principal viz
• timeframe prop + enter/exit transitions
• tooltips

Integration

• move ProductsDistributionChart call to main component

• include colors

• handle different container heights

• allow to switch between timespans

• improve lisibility : colors and labels

• improve understandability (captions)

• see if customed width size for text column is needed

Guillaume:

Souci avec ce graphique : l’importance de la Traite est minimisée, car les deux flèches vers la côte de l’Or et la côte de l’Angola sont superposées. Suggestion : pointer la flèche vers le golfe de Guinée plus à l’Ouest, du côté du Ghana.
En plus, la Côte de l’Or, c’est effectivement le Ghana......

Guillaume:

En fait, je ne comprends pas ce graphique...

1. Quelle règle détermine la couleur des flux si ni le port de départ ni celui d’arrivée sont La Rochelle ?
2. Quel est l’univers des relevés de Navigo 1787 ? Que les congés français je suppose ?
3. Lorsque je passe le curseur sur les flux jaunes vers Saint-Pierre et Miquelon, j’obtiens les ports de Saint-Martin-de-Ré ou les Sables-d’Olonnes.

Réponse Silvia:

1. le port d'attache = La Rochelle (j'ai reformulé pour que ce soit plus explicite)
2. j'ai précisé
3. oui car tu as des navires appartenant à des négociants de La Rochelle qui partent de ces autres ports (on ne représente que les navires dont le port d'attache est = La Rochelle

Réponse Guillaume:

1. et 2) c’est clair maintenant..
2. ce n’est pas clair. Voir email avec capture d’écran.

Réponse Silvia:

Je pense que le toponyme St Martin est juste à la gauche du point concerné et donc à sa place et pas à Terre-Neuve. Ou alors je n'ai pas compris? Le souci de cette carte est qu'il est difficile de distingue rou se termine une carte et où commence l'autre. Au pire on regarde ça tous devant un écran le 14?

Réponse Guillaume:

Oui, mais le problème vient de la position de la souris à ce moment-là. Si on passe la souris sur la flèche trajet Saint-Pierre et Miquelon — New York dans la carte du bas à droite, c’est « Les Sables d’Olonne—Rochefort » qui apparaît. Pour avoir Saint-Pierre et Miquelon — New York, il faut avoir la souris sur les Grands Lacs (ou l’Ohio… ces coins-là).

• integrate introduction
• integrate about
• integrate references
• normalize document's hyperlinks

Props synopsis:

• x: {field, title, tickInterval?, tickFormat?} : settings for x variable

• y: {field, title, tickInterval?, tickFormat?} : settings for y variable

• color: {field, title, tickFormat?} : settings for color variable

• fillGaps: whether to fill gaps for missing data

• animated : whether to animate

• tooltip : function with datum as parameter to display the tooltips

• highlights

• annotations

• improve networks size
• "pourquoi est-ce que Les Sables-d’Olonnes sont tellement au sud ? "

At some point we should clean text typography (french quotation marks, ...). We could integrate that in the automated workflow or do it at the level of the doc. To keep in mind for the end of the project !

Visualization and data preparation circular alluvial diagram (@robindemourat @c-assl)

• prepare data and basic layout
• aggregate flows better (currently several flows for the same modalities)
• stabilize labels
• improve understandability (arrows, explanations, ...)
• improve interaction (highlight on click instead of hover ?)

Visualization and data preparation radar plot (@gegedenice @cplumejeaud)

Data preparation

• adding a script in datascripts folder writing a csv in public/data (aggregated by ports), like so:

Visualization

• build radar visualisation component in src/components folder
• integrate the component in visualizations/principalVisualizationPart2

Radar component features wishlist:

• highlight object: prop to be able to highlight a particular spider net (by cutom office or by port --> example: highlight object = Marennes)
• add a way to toggle aggregation value (--> example: aggregate by nb_outs, or by tonnage_cumule)
• bonus: animate shape change with react-spring

API GeoComponent : change design

to let : width, height

MVP

• projection : { object }
• projection.template { string } [ 'Poitou', 'France', 'World']
• layers { array }
• layers[n].data (on donne data à chaque layer)
• layers[n].type { string } [ 'flow', 'choroplète (zones)', 'point', (customs)]
• color (field, title, label)

API par type

• points et flows : gérer size
• choroplète : 2 data (backgound et data ? ou alors jointer en amont)

bonus

• projection.rotation, .centerX, .centerY, .scale, ...

For Introduction / Atlas

renderObject function

• object that handle their position themselves (projection function in parameters)
• create renderFlow function : being able to give multiple object as param (to represent a flow for instance, and construct this map : https://kepler.gl/demo/map?mapUrl=https://dl.dropboxusercontent.com/s/nncyyk8e3op7b0c/keplergl_gj3hx1b.json a secondary viz)
• position geographically small multiples ?? (maybe more intelligent to align it to baseline)
• objects that can separate (reduce size or move centers)
• handle colors (introduce a loop to determine if colorpalette should be chosen, or other computation) : should be a param of GeoComponent ??
• implement layers ? to handle choroplète with other objects (such as circles for ports)

Specific GeoComponent for part 3

• delete useless parts for this component ??

Props:

• data -> data to display
• layout ?-> ['stack', 'groups'] -> if color is defined, sets the bars agregation layout
• orientation -> vertical or horizontal
• x -> x variable (field, title, tickFormat, fillGaps, domain)
• y -> y variable (field, title, tickFormat, fillGaps, domain)
• color -> {field, title, palette}
• highlights
• annotations

TODO:

• show numbers on bars when not too small

When directly opening the website on a webpage which is not the home, the scss is not loaded:

https://medialab.github.io/portic-storymaps-2021/#/fr/page/partie-2

It may be caused by react-snap hydratation. If so, a possible solution is to switch routing system from HashRouter to BrowserRouter

• add an option to provide a preprocessed svg file ?
• do not render objects outside of the svg viewbox ?

https://medialab.github.io/portic-storymaps-2021/fr/atlas/intro-ports

A remainder for later investigation:

Navigo ports alignments with customs office is done at the DB level and corrected in some of our scripts. Tonnay-Charentes seems to be attached to Marennes, when it should be attached to Tonnay-Charente.

The problem was solved for viz 3, but we just discovered it was not for viz 2.

Two things to do:

• short-term: understand the displacement, find if other visualizations should be changed
• long-term/optional: have a discussion with relevant parties to fix these alignment issues once and for all in the data

• make arrows end at the end of line
• allow for controlled hover when displaying multiple linked maps
• add a "hide out of bounds flows" option
• when arrows overflow, shorten them so that they end at the limit of the visualization box

How to shorten the arrows - scans from brainstorming:

Or with trig:

Silvia 2021-07-19:

Il y a un souci quelque part sur la manip d'extraction des données de Navigo (la visu avec les triangles dans la partie 3 et la nouvelle carte de l'intro de la partie 1 (et peut-être ailleurs aussi): je pense que vous avez pris le pointcall_rank = 1 (ou le pointcall_action = OUT?) comme équivalent du port de départ, alors qu'il faudrait prendre le pointcall du datablock leader marker = A car dans certains ports on nous dit aussi que le navire qui sort du port (IN-OUT) vient de la mer des pertuis (OUT) et va à XXX (IN), ce qui fait 3 pointcall pour le même enregistrement, et dans ce cas le port de départ qui nous intéresse sort du pointcall n° 2 IN-OUT

Christine 2021-08-19:

Silvia, depuis Juillet, je prend les valeurs in-out en départ aussi donc ce souci va être réglé

• margin-top
• gradient background

Should we, at some point in the future, refactor datascripts scripts to have one folder per datafile, and a possibly readme describing the data?

This question depends on the number of "secondary" visualizations we will have, because if we have a lot of them it could quickly become a mess !

• manage contents in bilingual mdx content
• integrate component

Silvia:

je suis en train de regarder l'Atlas, je te signale à toute fin utile un petit bug (chrome et EDGE): l'ascenseur gris sur la barre latérale droite ne marche pas (il bouge bien, mais la page ne descend pas, du coup pour lire la suite il faut se positionner sur le texte blanc sur noir et descendre. Pas mortel mais je te signale quand même)

Normal:

With highlight:

1

• Dans la première rubrique "Le déclin de la région de la Rochelle", la cinquième visualisation, celle qui commence avec le paragraphe suivant : "La direction des Fermes de La Rochelle s’est donc [...]", se met à "sauter" lorsqu'on descend ou remonte la page. Je précise que je suis sur un mac avec le navigateur google chrome.

2

• Lors que le navigateur n’est pas en plein écran (ex : écran scindé), seul Edge affiche les onglets, qui disparaissent sur les autres navigateurs (il faut remettre en plein écran ou cliquer sur la boussole pour y avoir accès à nouveau)

Partie 1:

• Pour la visualisation intitulée « Comparaison des parts des produits exportés par la direction des fermes de La Rochelle totalisant plus de 90% du commerce en 1750 et en 1789 (ports francs non pris en compte) », majorité des produits illisibles (peut-être est-ce le zoom ?)

• Pour la visualisation intitulée « Produits dont les valeurs d'exports sont les plus importantes en 1789 : comparaison de La Rochelle à la moyenne française », le graphique en barres s’inverse lorsque l’on scrolle vers le bas (Données pour la France d’abord en vert, puis passent en orange)

Partie 2:

• Pour la visualisation intitulée « Part de la navigation française dans la région », majorité des pourcentages en camembert illisibles (peut-être est-ce le zoom ?)

Partie 3:

• Latence relativement importante sur tous les navigateurs pour l’affichage des visualisations (peut-être sont-elles plus « lourdes » que les autres ?)

3

Partie deux une forte spécialisation portuaire

Par ailleurs vous verrez sur les deux photos que je joins ( en fin de message) qu il y a un problème d’apparition ou pas des intitulés au-dessus des deux graphiques ; quand on arrive sur la page on ne voit pas les intitulés mais on voit les graphiques ; il faut descendre dans la page pour que les intitulés apparaissent au dessus des graphiques

4

• dans la partie 1 le repère 1790 sur l’axe du bas ne s'affiche pas bien . Il est sur un iPad, en dernière version

https://medialab.github.io/portic-storymaps-2021/fr/atlas/origines-exports-eau-de-vie-1789-la-rochelle

Integration

List view

• display grid ou flex
• vignettes à génerer pour chaque visualisation

Lightbox @c-assl

• reorder python scripts
• attach readme files to CSV #17
• radarplot: genericize API
• improve README's technical presentation
• delete unused modules, components and dependencies
• comment utils
• comment components
• centralize scss and clean file