diff --git a/src/components/BarChart/HorizontalBarChart.js b/src/components/BarChart/HorizontalBarChart.js
index 43dd70a5..a02bcfdd 100644
--- a/src/components/BarChart/HorizontalBarChart.js
+++ b/src/components/BarChart/HorizontalBarChart.js
@@ -194,9 +194,6 @@ const HorizontalBarChart = ({
     const yScale = scaleLinear().domain(yDomain).range([height - margins.bottom, margins.top]).nice();
     const yStackScale = yScale.copy().range([0, height - margins.bottom - margins.top]);
 
-  
-
-  // let { values: xAxisValues } = axisPropsFromTickScale(xScale);
   const xAxisValues = xTickSpan ? range(xDomain[0], xDomain[xDomain.length - 1], xTickSpan) : xValues;
   let { values: yAxisValues } = axisPropsFromTickScale(yScale, 10);
 
diff --git a/src/components/BarChart/VerticalBarChart.js b/src/components/BarChart/VerticalBarChart.js
index a39ece07..79d58739 100644
--- a/src/components/BarChart/VerticalBarChart.js
+++ b/src/components/BarChart/VerticalBarChart.js
@@ -195,7 +195,7 @@ const VerticalBarChart = ({
         return 1 * multiplier;
       })
     ])
-  , [data, y.field, autoSort, sortYAscending, sortYField, sortYType, sortXAscending, sortXField, sortXType, color.field, colorModalities]);
+  , [data, y, autoSort, sortYAscending, sortYField, sortYType, sortXAscending, sortXField, sortXType, color, colorModalities]);
 
   const xDomain = initialXDomain || layout === 'stack' ?
     // stack -> max = max sum for a given x modality
diff --git a/src/components/BoatsIllustration/BoatsIllustration.js b/src/components/BoatsIllustration/BoatsIllustration.js
index a9a3955c..9d946c0a 100644
--- a/src/components/BoatsIllustration/BoatsIllustration.js
+++ b/src/components/BoatsIllustration/BoatsIllustration.js
@@ -10,6 +10,12 @@ import './BoatsIllustration.scss';
 const PASS_DURATION = 100000;
 const UPDATE_RATE = 4000;
 
+/**
+ * Returns a boat hull shape
+ * @param {number} width
+ * @param {number} height
+ * @returns  {React.ReactElement} - React component
+ */
 const Hull = ({
   width,
   height,
@@ -25,6 +31,14 @@ const Hull = ({
 
 }
 
+/**
+ * Returns a boat sail shape
+ * @param {number} width
+ * @param {number} height
+ * @param {number} sailSpeed - period in miliseconds
+ * @param {number} distance - factor in [0,1]
+ * @returns  {React.ReactElement} - React component
+ */
 const Sail = ({
   width,
   height,
@@ -62,6 +76,14 @@ const Sail = ({
   )
 }
 
+/**
+ * Returns a boat matt shape
+ * @param {number} width
+ * @param {number} height
+ * @param {number} sailSpeed - period in miliseconds
+ * @param {number} distance - factor in [0,1]
+ * @returns  {React.ReactElement} - React component
+ */
 const Matt = ({
   width,
   height,
@@ -87,6 +109,13 @@ const Matt = ({
   )
 }
 
+/**
+ * Returns a boat shape
+ * @param {number} x
+ * @param {number} height
+ * @param {number} distance - factor in [0,1]
+ * @returns  {React.ReactElement} - React component
+ */
 const Boat = ({
   x,
   height,
@@ -159,6 +188,13 @@ const Boat = ({
   )
 }
 
+/**
+ * Returns a bird shape
+ * @param {number} boatHeight
+ * @param {number} containerHeight
+ * @param {number} distance - factor in [0,1]
+ * @returns  {React.ReactElement} - React component
+ */
 const Bird = ({
   boatHeight,
   containerHeight,
@@ -207,6 +243,16 @@ const Bird = ({
   )
 }
 
+/**
+ * Returns a moving boat + optional birds
+ * @param {number} containerHeight
+ * @param {number} containerWidth
+ * @param {boolean} rightToLeft
+ * @param {number} startAt - starting point in pixels
+ * @param {number} size - factor for defining height relative to container height
+ * @param {number} distance - factor in [0,1]
+ * @returns  {React.ReactElement} - React component
+ */
 const MovingBoat = ({
   containerHeight,
   containerWidth,
@@ -274,6 +320,12 @@ const MovingBoat = ({
 }
 
 
+/**
+ * Returns moving boats
+ * @param {number} width
+ * @param {number} height
+ * @returns  {React.ReactElement} - React component
+ */
 const BoatsIllustration = ({
   width: inputWidth = 1200,
   height: inputHeight = 100,
diff --git a/src/components/BoatsIllustration/BoatsIllustration.scss b/src/components/BoatsIllustration/BoatsIllustration.scss
index a1c1045b..475db7d6 100644
--- a/src/components/BoatsIllustration/BoatsIllustration.scss
+++ b/src/components/BoatsIllustration/BoatsIllustration.scss
@@ -1,17 +1,15 @@
-
-
-
 .BoatsIllustration {
   .boat {
     line {
       stroke: grey;
     }
-    polygon, path {
+    polygon,
+    path {
       fill: lightgrey;
     }
 
     .sail {
-      opacity: .9;
+      opacity: 0.9;
     }
 
     .hull {
@@ -21,4 +19,4 @@
   .bird {
     fill: grey;
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/Caller/Caller.js b/src/components/Caller/Caller.js
index 508ea599..63ddc770 100644
--- a/src/components/Caller/Caller.js
+++ b/src/components/Caller/Caller.js
@@ -5,18 +5,28 @@ import {v4 as genId} from 'uuid';
 
 import {VisualizationControlContext} from '../../helpers/contexts';
 
+/**
+ * Visulization caller to place in contents
+ * @param {string} id - visualization id used by visualization context to map caller with a specific vis
+ * @param {object} props - visualization parameters passed as payload to visualization context
+ * @returns  {React.ReactElement} - React component
+ */
 const Caller = ({id: visualizationId, ...props}) => {
   const ref = useRef(null);
+  // we differentiate caller id and visualization id as their rel can theoretically be n-1
   const [id] = useState(genId());
   const {
+    // used to define whether caller is active
     activeVisualization,
     onBlockClick,
+    // callbacks used to register/unregister visualization data & HTML ref in upstream state
     onRegisterVisualization,
     onUnregisterVisualization,
   } = useContext(VisualizationControlContext);
 
+  // register vis on caller's mount, unregister it on unmount
   useEffect(() => {
-    // on wrappe dans un setTimeout pour avoir une ref non-nulle vers le composant
+    // we wrap callback in a setTimeout in order to have a non-null ref to the HTML element
     setTimeout(() => {
       let payload = {...props};
       payload = {
@@ -43,6 +53,7 @@ const Caller = ({id: visualizationId, ...props}) => {
       className={cx("Caller", {
         'is-active': activeVisualization && id === activeVisualization.id, 
         'is-clearfix': !visualizationId,
+        // currently is-hidden and is-devmode are logically symetrical, but this can be useful to differentiate the 2 in dev
         'is-hidden': process.env.NODE_ENV !== 'development',
         'is-devmode': process.env.NODE_ENV === 'development',
       })}
diff --git a/src/components/CircularAlluvialChart/CircularAlluvialChart.js b/src/components/CircularAlluvialChart/CircularAlluvialChart.js
index 56b85feb..16eeebd2 100644
--- a/src/components/CircularAlluvialChart/CircularAlluvialChart.js
+++ b/src/components/CircularAlluvialChart/CircularAlluvialChart.js
@@ -14,51 +14,29 @@ import { min } from 'd3-array';
 import { uniq } from 'lodash-es';
 import { cartesian2Polar, fixSvgDimension, trimText } from '../../helpers/misc';
 import ReactTooltip from 'react-tooltip';
-import { useSpring, animated } from 'react-spring'
 
-const colorSchemes = [colorScheme1, colorScheme2, colorScheme3];
+import {G, Text, Line, Circle, Rect, Path} from './animatedPrimities';
 
-const G =({children, className, onClick, ...inputProps})  => {
-  const props = useSpring(inputProps);
-  return (
-    <animated.g className={className} onClick={onClick} {...props}>
-      {children}
-    </animated.g>
-  )
-}
-const Text =({children, onClick, className, style, ...inputProps})  => {
-  const props = useSpring(inputProps);
-  return (
-    <animated.text className={className} onClick={onClick} style={style} {...props}>
-      {children}
-    </animated.text>
-  )
-}
-const Line = ({style, className, onClick, ...inputProps}) => {
-  const props = useSpring(inputProps);
-  return (
-    <animated.line className={className} onClick={onClick} style={style} {...props} />
-  )
-}
-const Circle = ({style, className, onClick, ...inputProps}) => {
-  const props = useSpring(inputProps);
-  return (
-    <animated.circle className={className} onClick={onClick} style={style} {...props} />
-  )
-}
-const Rect = ({style, className, onClick, ...inputProps}) => {
-  const props = useSpring(inputProps);
-  return (
-    <animated.rect className={className} onClick={onClick} style={style} {...props} />
-  )
-}
-const Path = ({style, className, onClick, ...inputProps}) => {
-  const props = useSpring(inputProps);
-  return (
-    <animated.path className={className} onClick={onClick} style={style} {...props} />
-  )
-}
+const colorSchemes = [colorScheme1, colorScheme2, colorScheme3];
 
+/**
+ * Renders a circular alluvial diagram (duh)
+ * @param {array} data
+ * @param {string} sumBy - field in data to use to quantify flows
+ * @param {array} steps - arrow of steps in the form: {field: [string], labels: {fr: [string], en: [string]}, filters: [{key: [string], value: [string]}]}
+ * @param {number} width
+ * @param {number} height
+ * @param {array} filters - objects in the form {key, value} to highlight some flows in the vis
+ * @param {boolean} debug
+ * @param {string} title
+ * @param {object} colorsPalettes
+ * @param {boolean} centerHorizontalLabels
+ * @param {boolean} displaceHorizontalLabels - avoid labels overlap (at the cost of invadint the center of the vis)
+ * @param {object} tooltips - tooltips of nested functions in the form {node: {fr: [fn], en: [fn]}, flow: {fr: [fn], en: [fn]}}
+ * @param {string} lang - enum ['fr', 'en']
+ * @param {string} align - enum ['left', 'center']
+ * @returns {React.ReactElement} - React component
+ */
 const CircularAlluvialChart = ({
   data: inputData = [],
   sumBy,
@@ -403,17 +381,6 @@ const CircularAlluvialChart = ({
                                         data-for="alluvial-tooltip"
                                         data-tip={tContent}
                                       >
-                                        {/* <Path 
-                                    d={`
-                                    M ${x1} ${y1} 
-                                    Q ${controlPoint1AX} ${controlPoint1AY}, ${x2} ${y2} 
-                                    L ${x3} ${y3}
-                                    Q ${controlPoint2AX} ${controlPoint2AY}, ${x4} ${y4} 
-                                    Z
-                                    `.trim().replace(/\n/g, ' ')}
-                                    title={'Valeur : ' + flow.valueAbs}
-                                    style={{fill: colorScales[step.field][node.id]}}
-                                  /> */}
                                         <Path
                                           d={`
                                     M ${x1} ${y1} 
@@ -555,7 +522,6 @@ const CircularAlluvialChart = ({
                             labelX = displaceLabels + minTextWidth;
                           }
                           displaceLabels = labelX;
-                          // console.groupEnd('test');
                         }
                         const labelY = orientation === 'vertical' ? y + actualHeight / 2 : y + displaceText;
                         const [labelMain, labelSecondary] = trimText(node.id, 20);
diff --git a/src/components/CircularAlluvialChart/CircularAlluvialChart.scss b/src/components/CircularAlluvialChart/CircularAlluvialChart.scss
index 14cda418..31119ac5 100644
--- a/src/components/CircularAlluvialChart/CircularAlluvialChart.scss
+++ b/src/components/CircularAlluvialChart/CircularAlluvialChart.scss
@@ -142,4 +142,4 @@
       opacity: 1;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/CircularAlluvialChart/LinearAlluvialChart.js b/src/components/CircularAlluvialChart/LinearAlluvialChart.js
index 5154b032..fb5053c8 100644
--- a/src/components/CircularAlluvialChart/LinearAlluvialChart.js
+++ b/src/components/CircularAlluvialChart/LinearAlluvialChart.js
@@ -6,6 +6,16 @@ import {prepareAlluvialData} from './utils';
 
 import './CircularAlluvialChart.scss';
 
+/**
+ * Returns a linear alluvial chart component
+ * @param {array<object>} data
+ * @param {string} sumBy
+ * @param {array} steps
+ * @param {number} width
+ * @param {number} height
+ * @param {array<object>} filters
+ * @returns {React.ReactElement} - React component
+ */
 const LinearAlluvialChart = ({
   data : inputData = [],
   sumBy,
diff --git a/src/components/CircularAlluvialChart/animatedPrimities.js b/src/components/CircularAlluvialChart/animatedPrimities.js
new file mode 100644
index 00000000..8968edd9
--- /dev/null
+++ b/src/components/CircularAlluvialChart/animatedPrimities.js
@@ -0,0 +1,43 @@
+import { useSpring, animated } from 'react-spring'
+
+
+export const G =({children, className, onClick, ...inputProps})  => {
+  const props = useSpring(inputProps);
+  return (
+    <animated.g className={className} onClick={onClick} {...props}>
+      {children}
+    </animated.g>
+  )
+}
+export const Text =({children, onClick, className, style, ...inputProps})  => {
+  const props = useSpring(inputProps);
+  return (
+    <animated.text className={className} onClick={onClick} style={style} {...props}>
+      {children}
+    </animated.text>
+  )
+}
+export const Line = ({style, className, onClick, ...inputProps}) => {
+  const props = useSpring(inputProps);
+  return (
+    <animated.line className={className} onClick={onClick} style={style} {...props} />
+  )
+}
+export const Circle = ({style, className, onClick, ...inputProps}) => {
+  const props = useSpring(inputProps);
+  return (
+    <animated.circle className={className} onClick={onClick} style={style} {...props} />
+  )
+}
+export const Rect = ({style, className, onClick, ...inputProps}) => {
+  const props = useSpring(inputProps);
+  return (
+    <animated.rect className={className} onClick={onClick} style={style} {...props} />
+  )
+}
+export const Path = ({style, className, onClick, ...inputProps}) => {
+  const props = useSpring(inputProps);
+  return (
+    <animated.path className={className} onClick={onClick} style={style} {...props} />
+  )
+}
\ No newline at end of file
diff --git a/src/components/CitationWidget/CitationWidget.js b/src/components/CitationWidget/CitationWidget.js
index 03e86be1..a77fde18 100644
--- a/src/components/CitationWidget/CitationWidget.js
+++ b/src/components/CitationWidget/CitationWidget.js
@@ -21,6 +21,12 @@ const CONTENTS = {
   }
 }
 
+
+/**
+ * Description
+ * @param {string} lang
+ * @returns {React.ReactElement} - React component
+ */
 const CitationWidget = ({
   lang = 'fr',
 }) => {
@@ -93,6 +99,7 @@ const CitationWidget = ({
               </ul>
               : null
           }
+          {/* disabled: copy on click (gadget) */}
           {/* <div className="copy-link-container">
             <span onClick={handleCopyClick}>{copyClicked ? messages.citationCopied[lang] : messages.copyCitation[lang]}</span>
           </div> */}
diff --git a/src/components/DataProvider/DataProvider.js b/src/components/DataProvider/DataProvider.js
index 05e9ac8a..6491f4df 100644
--- a/src/components/DataProvider/DataProvider.js
+++ b/src/components/DataProvider/DataProvider.js
@@ -2,6 +2,12 @@ import { useEffect, useState } from "react";
 import { csvParse } from 'd3-dsv';
 import get from 'axios';
 
+/**
+ * Fetches data and provides it to children (used for tests)
+ * @param {string} data
+ * @param {function} children
+ * @returns {React.ReactElement} - React component
+ */
 const DataProvider = ({
   data: dataFilename,
   children
diff --git a/src/components/DeclineChart/DeclineChart.js b/src/components/DeclineChart/DeclineChart.js
index e098dda2..c396305f 100644
--- a/src/components/DeclineChart/DeclineChart.js
+++ b/src/components/DeclineChart/DeclineChart.js
@@ -5,6 +5,20 @@ import ProductsDistributionChart from './ProductsDistributionChart';
 import './DeclineChart.scss';
 import { fixSvgDimension } from '../../helpers/misc';
 
+
+/**
+ * Configurable wrapper for main viz #1
+ * @param {number} width
+ * @param {number} height
+ * @param {string} lang
+ * @param {number} startYear
+ * @param {number} endYear
+ * @param {number} productTradePartThreshold
+ * @param {array<string>} rows - list of visualization rows to display at a certain time
+ * @param {datasets} object
+ * @param {boolean} atlasMode
+ * @returns {React.ReactElement} - React component
+ */
 const DeclineChart = (props) => {
   const {
     width: inputWidth, 
diff --git a/src/components/DeclineChart/DeclineChart.scss b/src/components/DeclineChart/DeclineChart.scss
index 9ba02dcf..58f7132b 100644
--- a/src/components/DeclineChart/DeclineChart.scss
+++ b/src/components/DeclineChart/DeclineChart.scss
@@ -1,10 +1,10 @@
 
-
+@import '../../variables.scss';
 
 .DeclineChart {
   position: relative;
   // @todo externalize scss variables
-  font-family: "IBM Plex Sans", sans-serif;
+  font-family: $font-family-1;
   max-height:100%;
 
   .row {
@@ -22,8 +22,6 @@
   h3 {
     margin-top: 0;
     margin-bottom: .5rem;
-    // color: grey;
-    // font-weight: 500;
     font-size: 1rem;
   }
   
@@ -229,4 +227,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/DeclineChart/LongitudinalTradeChart.js b/src/components/DeclineChart/LongitudinalTradeChart.js
index 069b73b6..c230ebc3 100644
--- a/src/components/DeclineChart/LongitudinalTradeChart.js
+++ b/src/components/DeclineChart/LongitudinalTradeChart.js
@@ -10,7 +10,11 @@ import ReactTooltip from 'react-tooltip';
 import colorsPalettes from "../../colorPalettes";
 import { fixSvgDimension } from "../../helpers/misc";
 
-
+/**
+ * Improve the display of numbers
+ * @param {string|number} str - the number to prettify
+ * @returns {string}
+ */
 const prettifyValue = str => {
   const inted = Math.round(+str) + '';
   let finalStr = '';
@@ -22,7 +26,7 @@ const prettifyValue = str => {
     finalStr = char + finalStr;
     if (count === 3) {
       count = 0;
-      finalStr = ',' + finalStr;
+      finalStr = ' ' + finalStr;
     }
   }
   if (finalStr[0] === ',') {
@@ -32,6 +36,28 @@ const prettifyValue = str => {
   return finalStr;
 }
 
+/**
+ * Displays a double diagram displaying a histogram and a linechart, with optional additional annotations
+ * @param {array} data
+ * @param {string} absoluteField
+ * @param {string} shareField
+ * @param {string} herfindhalField
+ * @param {number} width
+ * @param {number} height
+ * @param {string} axisLeftTitle
+ * @param {string} axisRightTitle
+ * @param {number} startYear
+ * @param {number} endYear
+ * @param {boolean} fillGaps - whether to display a line between two datapoints distant by more than one year
+ * @param {function} barTooltipFn
+ * @param {string} cityName
+ * @param {array<number>} highlightYears
+ * @param {string} title
+ * @param {object} colorScaleMessages
+ * @param {array<object>} annotations - in the form of {startYear: [int], endYear: [int], label: [string], row: [int], labelPosition: [string in ['left', 'right']]}
+ * @param {object} margins - in the form {'left': [number],'right': [number],'top': [number],'bottom': [number]}
+ * @returns {React.ReactElement} - React component
+ */
 const LongitudinalTradeChart = ({
   data: inputData,
   // fields: if null, viz will not show the corresponding data
@@ -380,14 +406,6 @@ const LongitudinalTradeChart = ({
                 }
                 return -1;
               })
-              // .filter((d, index) => {
-              //   const next = data[index + 1];
-              //   if (+d.year === 1787 && !barTooltipFn) {
-              //     console.log('2 next for 1787', d.year, +next.year, next)
-              //   }
-              //   return index < data.length - 1
-              //     && (fillGaps ? true : +next.year === +d.year + 1)
-              // })
               .map((datum, index) => {
                 const next = data[index + 1];
                 if (index === data.length - 1 || fillGaps ? false : +next.year !== +datum.year + 1) {
diff --git a/src/components/DeclineChart/ProductsDistributionChart.js b/src/components/DeclineChart/ProductsDistributionChart.js
index 7e2ff9ae..4f220adf 100644
--- a/src/components/DeclineChart/ProductsDistributionChart.js
+++ b/src/components/DeclineChart/ProductsDistributionChart.js
@@ -12,6 +12,24 @@ import { fixSvgDimension } from '../../helpers/misc';
 // - click on products highlight same product on all years ?
 // - click on products make label bigger for small ones ?
 
+
+/**
+ * Displays a comparison of exported products totalizing n% of total shares of exports
+ * @param {array} data
+ * @param {array} tradeData
+ * @param {string} field
+ * @param {number} partTreshold - limit of the total cumulated share of exports from which to display products - in [0,1]
+ * @param {number} height
+ * @param {number} barWidth
+ * @param {string} herfindhalField
+ * @param {array} years - two years to compare
+ * @param {number} width
+ * @param {string} title
+ * @param {object} margins
+ * @param {function} productTooltipFn
+ * @param {boolean} compareFrom
+ * @returns {React.ReactElement} - React component
+ */
 const ProductsDistributionChart = ({
   data: allData,
   tradeData = [],
diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js
index 0bd93c30..590b86c2 100644
--- a/src/components/Footer/Footer.js
+++ b/src/components/Footer/Footer.js
@@ -2,6 +2,11 @@
 import FooterFr from '!babel-loader!mdx-loader!../../contents/fr/footer.mdx';
 import FooterEn from '!babel-loader!mdx-loader!../../contents/fr/footer.mdx';
 
+/**
+ * Displays the footer from attached mdx contents
+ * @param {string} lang
+ * @returns {React.ReactElement} - React component
+ */
 const Footer = ({lang}) => {
   return (
     <footer className="Footer">
diff --git a/src/components/GeographicMapChart/ChoroplethLayer.js b/src/components/GeographicMapChart/ChoroplethLayer.js
index 91ebeeea..54b4368b 100644
--- a/src/components/GeographicMapChart/ChoroplethLayer.js
+++ b/src/components/GeographicMapChart/ChoroplethLayer.js
@@ -6,7 +6,26 @@ import { useSpring, animated } from 'react-spring'
 import { useEffect, useState } from "react";
 import ReactTooltip from "react-tooltip";
 
-const GeoPart = ({ d: initialD, projection, project, palette, layer, width, height}) => {
+/**
+ * Description
+ * @param {string} d
+ * @param {function} projection
+ * @param {function} project
+ * @param {object} palette
+ * @param {object} layer
+ * @param {number} width
+ * @param {number} height
+ * @returns {React.ReactElement} - React component
+ */
+const GeoPart = ({ 
+  d: initialD, 
+  projection, 
+  project, 
+  palette, 
+  layer, 
+  width, 
+  height
+}) => {
 
   const [isInited, setIsInited] = useState(false);
   useEffect(() => {
diff --git a/src/components/GeographicMapChart/CustomObjectLayer.js b/src/components/GeographicMapChart/CustomObjectLayer.js
index 811f8dfe..8f77013c 100644
--- a/src/components/GeographicMapChart/CustomObjectLayer.js
+++ b/src/components/GeographicMapChart/CustomObjectLayer.js
@@ -1,7 +1,22 @@
 
 
 
-const CustomObjectLayer = ({ layer, projection, width, height, projectionTemplate }) => {
+/**
+ * Allows to display custom objects on the map
+ * @param {object} layer
+ * @param {function} projection
+ * @param {number} width
+ * @param {number} height
+ * @param {string} projectionTemplate
+ * @returns {React.ReactElement} - React component
+ */
+const CustomObjectLayer = ({ 
+  layer, 
+  projection, 
+  width, 
+  height, 
+  projectionTemplate 
+}) => {
     return (
         <g className="CustomObjectsLayer">
           {
@@ -9,10 +24,7 @@ const CustomObjectLayer = ({ layer, projection, width, height, projectionTemplat
                 layer.renderObjects({data: layer.data, projection, width, height, projectionTemplate})
             :
             layer.data
-              // .filter(({ latitude, longitude }) => latitude && longitude && !isNaN(latitude) && !isNaN(longitude))
               .map((datum, index) => {
-                // const { latitude, longitude, size, color, label } = datum;
-                // const [x, y] = projection([+longitude, +latitude]);
                 return layer.renderObject({ datum, projection, width, height, projectionTemplate })
               })
           }
diff --git a/src/components/GeographicMapChart/FlowsLayer.js b/src/components/GeographicMapChart/FlowsLayer.js
index 735dfe61..da19bd6a 100644
--- a/src/components/GeographicMapChart/FlowsLayer.js
+++ b/src/components/GeographicMapChart/FlowsLayer.js
@@ -24,10 +24,28 @@ Exemple :
 "nb_flows": 22, 
 "tonnages_cumulés": 730}
 
-@TODO : régler le fait que la pointe des flèches ne soit pas à l'arrivée (en l'état c'est la base du triangle qui est sur les coords d'arrivée) => se règle en reculant le triangle :   viewBox="-10 0 10 10" &  <path d="M -10 0 L 0 5 L -10 10 Z" fill="black" /> (à ce moment il fut rétrécir la longueur du path qui fait la barre de la flèche)
-@TODO : mettre un point au départ de mes flows ? (pas adapté quand on a des points de départ et d'arrivée qui se recoupent)
 */
 
+/**
+ * Displays a particular flow
+ * @param {string} id
+ * @param {boolean} hovered
+ * @param {number} xDep
+ * @param {number} yDep
+ * @param {number} xDest
+ * @param {number} yDest
+ * @param {number} strokeWidth
+ * @param {string} color
+ * @param {string} path
+ * @param {number} actualXDep
+ * @param {number} actualYDep
+ * @param {number} actualXDest
+ * @param {number} actualYDest
+ * @param {number} arrowLength
+ * @param {function} onMouseEnter
+ * @param {function} onMouseLeave
+ * @returns {React.ReactElement} - React component 
+ */
 const FlowGroup = ({
   id,
   hovered,
@@ -36,8 +54,6 @@ const FlowGroup = ({
   xDest: inputXDest,
   yDest: inputYDest,
   strokeWidth: inputStrokeWidth,
-  datum,
-  layer,
   color = 'black',
 
   path,
@@ -46,15 +62,17 @@ const FlowGroup = ({
   actualXDest,
   actualYDest,
   arrowLength,
-  depLabelTextAnchor,
-  depLabelX,
-  depLabelY,
-  destLabelTextAnchor,
-  destLabelX,
-  destLabelY,
-  fontSize,
   onMouseEnter,
   onMouseLeave,
+  // datum,
+  // layer,
+  // depLabelTextAnchor,
+  // depLabelX,
+  // depLabelY,
+  // destLabelTextAnchor,
+  // destLabelX,
+  // destLabelY,
+  // fontSize,
 }) => {
   const [isInited, setIsInited] = useState(false);
   useEffect(() => {
@@ -106,6 +124,15 @@ const FlowGroup = ({
   )
 }
 
+/**
+ * Displays a series of flow and their labels
+ * @param {array} layer
+ * @param {function} projection
+ * @param {number} width
+ * @param {number} height
+ * @param {string} projectionTemplate
+ * @returns {React.ReactElement} - React component
+ */
 const FlowsLayer = ({
   layer,
   projection,
diff --git a/src/components/GeographicMapChart/GeographicMapChart.js b/src/components/GeographicMapChart/GeographicMapChart.js
index 704a3715..b9303c5f 100644
--- a/src/components/GeographicMapChart/GeographicMapChart.js
+++ b/src/components/GeographicMapChart/GeographicMapChart.js
@@ -39,14 +39,27 @@ import './GeographicMapChart.scss'
 import { fixSvgDimension } from '../../helpers/misc';
 
 
+/**
+ * Displays a multi-layers map
+ * @param {number} width
+ * @param {number} height
+ * @param {string} title
+ * @param {array} layers
+ * @param {string} projectionTemplate
+ * @param {object} projectionConfig
+ * @param {boolean} debug
+ * @param {string} withLegend - can directly take legend position
+ * @param {function} legendLayerFilter
+ * @returns {React.ReactElement} - React component 
+ */
 const GeographicMapChart = ({
   width: inputWidth = 1500,
   height: inputHeight = 1500,
   title,
   layers = [],
   projectionTemplate: initialProjectionTemplate,
-  projectionConfig: inputProjectionConfig, // customed config that will overwrite a template (optional argument) 
-  debug = false, // @TODO : à réparer
+  projectionConfig: inputProjectionConfig, // customeconfig that will overwrite a template (optional argument) 
+  debug = false, // @todo : à réparer
   withLegend,
   legendLayerFilter
 }) => {
diff --git a/src/components/GeographicMapChart/GeographicMapChart.scss b/src/components/GeographicMapChart/GeographicMapChart.scss
index 3ef39af3..14da72e1 100644
--- a/src/components/GeographicMapChart/GeographicMapChart.scss
+++ b/src/components/GeographicMapChart/GeographicMapChart.scss
@@ -1,31 +1,29 @@
-
-
 .GeographicMapChart {
-	.PointsLayer {
-		.point-group {
-			circle {
-				fill : grey;
-        opacity: .9;
-			}
-		}
-	}
+  .PointsLayer {
+    .point-group {
+      circle {
+        fill: grey;
+        opacity: 0.9;
+      }
+    }
+  }
 
   .FlowsLayer {
     .label {
-      text-shadow: -1px -1px 0 #FFF, 1px -1px 0 #FFF, -1px 1px 0 #FFF, 1px 1px 0 #FFF;
+      text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
       opacity: 0;
-      transition: .5s ease all;
+      transition: 0.5s ease all;
       &.is-visible {
         opacity: 1;
       }
     }
     .flow-group {
-      opacity: .8;
-      transition: .5s ease all;
-      
+      opacity: 0.8;
+      transition: 0.5s ease all;
+
       .label:not(.is-always-visible) {
         opacity: 0;
-        transition: .5s ease all;
+        transition: 0.5s ease all;
       }
     }
     &:hover {
@@ -40,27 +38,25 @@
       }
     }
   }
-	.ChoroplethLayer {
-		.geopart {
-			fill: WhiteSmoke;
-			stroke: black;
-			stroke-width: 1;
-      transition: .5s all ease;
-		}
+  .ChoroplethLayer {
+    .geopart {
+      fill: WhiteSmoke;
+      stroke: black;
+      stroke-width: 1;
+      transition: 0.5s all ease;
+    }
     &.reverse-colors {
       .geopart {
         fill: transparent;
         stroke: white;
       }
-      
     }
-		.legend {
-			.color-legend {
-				fill: transparent;
-			}
-		}
-
-	}
+    .legend {
+      .color-legend {
+        fill: transparent;
+      }
+    }
+  }
 }
 
 .GeographicMapChartWrapper {
@@ -69,14 +65,14 @@
     position: absolute;
     left: 1rem;
     top: 1rem;
-    margin-left: 0!important;
+    margin-left: 0 !important;
   }
   .Legend {
     position: absolute;
     bottom: 1rem;
     right: 1rem;
-    font-family: 'IBM Plex Sans', sans-serif;
-    font-size: .8rem;
+    font-family: "IBM Plex Sans", sans-serif;
+    font-size: 0.8rem;
     &.left {
       right: unset;
       left: 1rem;
@@ -86,25 +82,25 @@
       top: 0;
     }
     .legend-main-title {
-      margin-left: 0!important;
-      margin-top: 1.5rem!important;
+      margin-left: 0 !important;
+      margin-top: 1.5rem !important;
       margin-bottom: 1rem;
       font-weight: 400;
-      font-size: 1rem!important;
+      font-size: 1rem !important;
     }
     .legend-title {
-      font-size: .8rem;
+      font-size: 0.8rem;
       font-weight: 400;
       margin: 0;
       margin-top: 1rem;
-      margin-left: 0!important;
-      margin-bottom: .5rem;
+      margin-left: 0 !important;
+      margin-bottom: 0.5rem;
     }
 
     .size-legend-container {
       .size-legend-item {
         display: flex;
-        flex-flow: row  nowrap;
+        flex-flow: row nowrap;
         align-items: center;
         max-width: 10rem;
         .label {
@@ -113,7 +109,7 @@
         .size-icon-container {
           width: 2rem;
           height: 2rem;
-          margin-right: .5rem;
+          margin-right: 0.5rem;
           position: relative;
           span:first-of-type {
             border: 1px dashed black;
@@ -139,10 +135,10 @@
   }
   .color-legend-container {
     .modalities-list {
-      margin: 0!important;
+      margin: 0 !important;
       padding: 0;
       list-style: none;
-      font-size: .8rem!important;
+      font-size: 0.8rem !important;
       li {
         display: flex;
         flex-flow: row nowrap;
@@ -150,7 +146,7 @@
         .color-marker {
           width: 1em;
           height: 1em;
-          margin-right: .5rem;
+          margin-right: 0.5rem;
         }
         .label {
           flex: 1;
@@ -162,13 +158,13 @@
   .stacked-labels-container {
     line {
       stroke: black;
-      stroke-dasharray: 2,2;
-      stroke-width: .5px;
-      opacity: .7;
+      stroke-dasharray: 2, 2;
+      stroke-width: 0.5px;
+      opacity: 0.7;
     }
   }
 }
 
 #choro-layer-tooltip {
   z-index: 2000;
-}
\ No newline at end of file
+}
diff --git a/src/components/GeographicMapChart/Input.js b/src/components/GeographicMapChart/Input.js
index 23c32330..df7a1eb8 100644
--- a/src/components/GeographicMapChart/Input.js
+++ b/src/components/GeographicMapChart/Input.js
@@ -1,24 +1,32 @@
-import { useState, useEffect } from "react" ;
+import { useState, useEffect } from "react";
 
+
+/**
+ * A plain input for debug mode
+ * @param {string} value
+ * @param {function} onBlur
+ * @param {object} props
+ * @returns {React.ReactElement} - React component 
+ */
 const Input = ({
-    value: inputValue,
-    onBlur,
-    ...props
-  }) => {
-    const [value, setValue] = useState(inputValue)
-    useEffect(() => {
-      setValue(inputValue)
-    }, [inputValue])
-  
-    return <input
-      value={value}
-      onChange={(e) => {
-        setValue(e.target.value)
-      }}
-      onBlur={(e) => {
-        onBlur(e.target.value)
-      }}
-    />
-  }
-  
-export default Input ;  
\ No newline at end of file
+  value: inputValue,
+  onBlur,
+  ...props
+}) => {
+  const [value, setValue] = useState(inputValue)
+  useEffect(() => {
+    setValue(inputValue)
+  }, [inputValue])
+
+  return <input
+    value={value}
+    onChange={(e) => {
+      setValue(e.target.value)
+    }}
+    onBlur={(e) => {
+      onBlur(e.target.value)
+    }}
+  />
+}
+
+export default Input;
\ No newline at end of file
diff --git a/src/components/GeographicMapChart/Legend.js b/src/components/GeographicMapChart/Legend.js
index e3dff1ef..ec70c63c 100644
--- a/src/components/GeographicMapChart/Legend.js
+++ b/src/components/GeographicMapChart/Legend.js
@@ -2,6 +2,13 @@ import { uniq } from "lodash-es";
 import { generatePalette } from '../../helpers/misc';
 
 
+/**
+ * Centralized map legend
+ * @param {array<object>} layers
+ * @param {string} position - used as css suffix ('bottom', 'bottom left', ...)
+ * @param {function} layerFilter - allows to hide some layers from legend
+ * @returns {React.ReactElement} - React component 
+ */
 const Legend = ({
   layers,
   position,
diff --git a/src/components/GeographicMapChart/PointsLayer.js b/src/components/GeographicMapChart/PointsLayer.js
index a083b627..ad1f41e7 100644
--- a/src/components/GeographicMapChart/PointsLayer.js
+++ b/src/components/GeographicMapChart/PointsLayer.js
@@ -10,6 +10,17 @@ import { useEffect, useState } from 'react';
 import ReactTooltip from 'react-tooltip';
 
 
+/**
+ * Returns a point and its label
+ * @param {function} projection
+ * @param {object} datum
+ * @param {object} layer
+ * @param {number} opacity
+ * @param {function} onGroupMouseEnter
+ * @param {function} onGroupMouseLeave
+ * @param {boolean} displayLabel
+ * @returns {React.ReactElement} - React component 
+ */
 const PointGroup = ({
   projection,
   datum,
@@ -90,6 +101,19 @@ const PointGroup = ({
   );
 }
 
+/**
+ * Returns label group in a stacked layout
+ * @param {object} layer
+ * @param {object} datum
+ * @param {number} thatIndex
+ * @param {number} opacity
+ * @param {number} stackedRowHeight
+ * @param {function} onGroupMouseEnter
+ * @param {function} onGroupMouseLeave
+ * @param {number} labelFontSize
+ * @param {function} projection
+ * @returns {React.ReactElement} - React component 
+ */
 const StackedLabelGroup = ({
   layer,
   datum,
@@ -183,8 +207,6 @@ const PointsLayer = ({ layer, projection, width, height }) => {
       })
 
       let grouped = Object.entries(coordsMap).map(([_mark, datum]) => datum);
-      // console.log("grouped : ", grouped)
-
 
       let palette;
       if (layer.color !== undefined) {
@@ -222,8 +244,6 @@ const PointsLayer = ({ layer, projection, width, height }) => {
         rawSize: datum.size,
         labelSize: layer.size !== undefined ? labelSizeScale(datum.size) : width * height / 30000
       }))
-
-      // console.log("grouped (PointsLayer): ", grouped)
       return grouped;
     }
   }, [projection, width, layer])/* eslint react-hooks/exhaustive-deps : 0 */
diff --git a/src/components/HeaderNav/HeaderNav.js b/src/components/HeaderNav/HeaderNav.js
index 47abf2c1..c6f4b7ae 100644
--- a/src/components/HeaderNav/HeaderNav.js
+++ b/src/components/HeaderNav/HeaderNav.js
@@ -27,6 +27,12 @@ const {
   }
 } = colorPalettes;
 
+/**
+ * Displays header nav handling active link and background color change
+ * @param {array<object>} routes
+ * @param {function} onLangChange
+ * @returns {React.ReactElement} - React component 
+ */
 const HeaderNav = ({
   routes,
   onLangChange,
diff --git a/src/components/LineChart/LineChart.js b/src/components/LineChart/LineChart.js
index 07950aa2..12b8d119 100644
--- a/src/components/LineChart/LineChart.js
+++ b/src/components/LineChart/LineChart.js
@@ -56,7 +56,7 @@ const { generic } = colorsPalettes;
  * 
  * @param {function} tooltip
  * 
- * @returns {react}
+ * @returns {React.ReactElement} - React component 
  */
 const LineChart = ({
   data,
diff --git a/src/components/LinearAlluvialChart/LinearAlluvialChart.js b/src/components/LinearAlluvialChart/LinearAlluvialChart.js
index 9f05b068..31e84c29 100644
--- a/src/components/LinearAlluvialChart/LinearAlluvialChart.js
+++ b/src/components/LinearAlluvialChart/LinearAlluvialChart.js
@@ -6,6 +6,17 @@ import {prepareAlluvialData} from './utils';
 
 import './LinearAlluvialChart.scss';
 
+/**
+ * A classical alluvial chart component
+ * @param {array<object>} data
+ * @param {string} sumBy
+ * @param {array} steps
+ * @param {number} width
+ * @param {number} height
+ * @param {array<object>} filters - filters in the form {key: [string], value: [string]}
+ * @param {object} colorsPalettes - map of key-values
+ * @returns {React.ReactElement} - React component 
+ */
 const LinearAlluvialChart = ({
   data : inputData = [],
   sumBy,
diff --git a/src/components/Loader/Loader.js b/src/components/Loader/Loader.js
index 40f2f8d6..4eef7b65 100644
--- a/src/components/Loader/Loader.js
+++ b/src/components/Loader/Loader.js
@@ -2,6 +2,11 @@ import cx from 'classnames';
 
 import './Loader.scss';
 
+/**
+ * A basic full-size loader with loading bar
+ * @param {number} percentsLoaded
+ * @returns {React.ReactElement} - React component 
+ */
 const Loader = ({ percentsLoaded = 0 }) => {
   return (
     <div className={cx("Loader", {'is-complete': percentsLoaded === 100})}>
diff --git a/src/components/NetworkGraphChart/GraphContainer.js b/src/components/NetworkGraphChart/GraphContainer.js
index a264eece..287a5029 100644
--- a/src/components/NetworkGraphChart/GraphContainer.js
+++ b/src/components/NetworkGraphChart/GraphContainer.js
@@ -36,6 +36,22 @@ const CELL_WIDTH_SCALE = scaleLinear().domain([0, 1]).range(CELL_WIDTH_RANGE);
 //   camera.animatedUnzoom(renderer);
 // }
 
+/**
+ * Network graph wrapper
+ * @todo this should be enterely refactored using https://github.com/sim51/react-sigma-v2
+ * @param {object} graph
+ * @param {string} nodeColor -  field name
+ * @param {string} nodeSize -  field name
+ * @param {number} labelDensity
+ * @param {string} nodeLabel - fieldName
+ * @param {function} onCameraUpdate
+ * @param {object} cameraPosition
+ * @param {number} updateTimestamp
+ * @param {number} width
+ * @param {number} height
+ * @param {number} ratio - camera ratio/zoom level
+ * @returns {React.ReactElement} - React component 
+ */
 function GraphContainer({
   graph,
   nodeColor: nodeColorVariable,
diff --git a/src/components/RadarPlot/RadarPlot.js b/src/components/RadarPlot/RadarPlot.js
index 414e5913..d5608726 100644
--- a/src/components/RadarPlot/RadarPlot.js
+++ b/src/components/RadarPlot/RadarPlot.js
@@ -8,6 +8,14 @@ import VisObject from './VisObject';
 
 import './RadarPlot.scss';
 
+/**
+ * Displays a radar plot
+ * @todo this component should be genericized at some point, it was done in haste
+ * @param {array} data
+ * @param {number} size
+ * @param {array<string>} axis - list of columns names to use as axis
+ * @returns {React.ReactElement} - React component
+ */
 const RadarPlot= ({
   data,
   size : wholeSize = 100,
diff --git a/src/components/RadarPlot/RadarPlot.scss b/src/components/RadarPlot/RadarPlot.scss
index 7ef12741..5987d249 100644
--- a/src/components/RadarPlot/RadarPlot.scss
+++ b/src/components/RadarPlot/RadarPlot.scss
@@ -1,7 +1,6 @@
 @import "../../variables.scss";
 
-
- .RadarPlot {
+.RadarPlot {
   .AxisObject {
     font-size: 0.7rem;
     .label {
@@ -31,4 +30,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/RadarPlot/VisObject.js b/src/components/RadarPlot/VisObject.js
index a9929e36..f7a9f55d 100644
--- a/src/components/RadarPlot/VisObject.js
+++ b/src/components/RadarPlot/VisObject.js
@@ -4,6 +4,14 @@ import { useSpring, animated } from 'react-spring'
 
 import { fixSvgDimension, polarToCartesian } from '../../helpers/misc';
 
+/**
+ * A plain animated circle
+ * @param {number} cx 
+ * @param {number}  cy 
+ * @param {number} r 
+ * @param {object} props
+ * @returns {React.ReactElement} - React component 
+ */
 const Circle = ({
   cx: inputX,
   cy: inputY,
@@ -29,6 +37,18 @@ const Circle = ({
   )
 }
 
+
+/**
+ * Displays a radarplot object
+ * @param {string} color
+ * @param {object} data - single data object
+ * @param {object} axisIndexMap
+ * @param {function} axisRankScale
+ * @param {array<number>} center - 2D coordinates of center in pixels
+ * @param {string} name
+ * @param {function} radiusScale
+ * @returns {React.ReactElement} - React component 
+ */
 const VisObject = ({
   color,
   data,
diff --git a/src/components/RadioButton/RadioButton.js b/src/components/RadioButton/RadioButton.js
index fedd3535..5eac027b 100644
--- a/src/components/RadioButton/RadioButton.js
+++ b/src/components/RadioButton/RadioButton.js
@@ -1,6 +1,23 @@
 import React from "react";
 
-const RadioButton = ({ type, id, name, label, checked, onChange }) => {
+/**
+ * Displays a plain radio button
+ * @param {string} type
+ * @param {string} id
+ * @param {string} name
+ * @param {string} label
+ * @param {boolean} checked
+ * @param {function} onChange
+ * @returns {React.ReactElement} - React component
+ */
+const RadioButton = ({ 
+  type = 'radio',
+  id, 
+  name, 
+  label, 
+  checked, 
+  onChange 
+}) => {
   return (
     <>
       <input
diff --git a/src/components/SliderRange/SliderRange.js b/src/components/SliderRange/SliderRange.js
index 25f0197b..11724ff1 100644
--- a/src/components/SliderRange/SliderRange.js
+++ b/src/components/SliderRange/SliderRange.js
@@ -5,21 +5,36 @@ import 'rc-slider/assets/index.css';
 const { createSliderWithTooltip } = Slider;
 const Range = createSliderWithTooltip(Slider.Range);
 
-const SliderRange = ({ title, min, max, value, onChange }) => {
-    const style = { width: 300, margin: 50 };
+/**
+ * Displays an interactive slider
+ * @param {string} title
+ * @param {number} min
+ * @param {number} max
+ * @param {number} value
+ * @param {function} onChange
+ * @returns {React.ReactElement} - React component
+ */
+const SliderRange = ({ 
+  title, 
+  min, 
+  max, 
+  value, 
+  onChange 
+}) => {
+  const style = { width: 300, margin: 50 };
+
+  return (
+    <div style={style}>
+      <p>{title}</p>
+      <Range
+        allowCross={false}
+        min={min}
+        max={max}
+        value={value}
+        onChange={onChange}
+      />
+    </div>
+  )
+}
 
-    return (
-        <div style={style}>
-            <p>{title}</p>
-           <Range 
-            allowCross={false} 
-            min={min} 
-            max={max} 
-            value={value} 
-            onChange={onChange} 
-          />
-        </div>
-    )
-    }
-    
 export default SliderRange;
\ No newline at end of file
diff --git a/src/components/SvgChart/SvgChart.js b/src/components/SvgChart/SvgChart.js
index b543d2f6..f639d2fa 100644
--- a/src/components/SvgChart/SvgChart.js
+++ b/src/components/SvgChart/SvgChart.js
@@ -1,5 +1,10 @@
 
 
+/**
+ * Displays an svg image
+ * @param {string} {path}
+ * @returns {React.ReactElement} - React component
+ */
 function SvgChart ({path}) {
     return <img alt={path} src={`${process.env.PUBLIC_URL}${path}`} />
 } 
diff --git a/src/components/TreemapChart/TreemapChart.js b/src/components/TreemapChart/TreemapChart.js
index 74732588..412f1b68 100644
--- a/src/components/TreemapChart/TreemapChart.js
+++ b/src/components/TreemapChart/TreemapChart.js
@@ -26,34 +26,20 @@ const formatNestResults = (input) => {
   } else return input;
 }
 
+
+
 /**
- * LineChart component - returns a <figure> containing a svg linechart
- * 
- * @param {array} data
- * @param {string} title 
- * @param {width} number 
- * @param {height} number 
- * 
+ * Returns a treemap visualization
+ * @param {array<object>} data - tabular data
+ * @param {array} fieldsHierarchy - array of fieldnames to use to build the nested hierarchy from tabular data
+ * @param {string} title
+ * @param {number} width
+ * @param {number} height
+ * @param {object} leaf - parameters for computing leafs in the form {labelField: [string], countField: [string]}
  * @param {object} color
- * @param {string} color.field
- * @param {string} color.title
- * @param {object} color.palette
- * 
- * @param {array} fieldsHierarchy
- * @param {object} leaf
- * @param {string} leaf.labelField
- * @param {number} leaf.countField
-
- * 
- * @param {object} margins
- * @param {number} margins.left
- * @param {number} margins.top
- * @param {number} margins.right
- * @param {number} margins.bottom
- * 
  * @param {function} tooltip
- * 
- * @returns {react}
+ * @param {object} margins
+ * @returns {React.ReactElement} - React component
  */
 const TreemapChart = ({
   data,
diff --git a/src/components/TriangleChart/PortGroup.js b/src/components/TriangleChart/PortGroup.js
index e23d9a26..09141b78 100644
--- a/src/components/TriangleChart/PortGroup.js
+++ b/src/components/TriangleChart/PortGroup.js
@@ -4,7 +4,24 @@ import { animated, useSpring } from 'react-spring';
 
 import colorsPalettes from '../../colorPalettes';
 
-
+/**
+ * Returns a given port visual elements in triangles comparison visualization (for viz 3.1)
+ * @param {number} numberOfColumns
+ * @param {object} port
+ * @param {function} scaleX
+ * @param {function} scaleY
+ * @param {number} legendWidth
+ * @param {number} columnWidth
+ * @param {umber} totalHeight
+ * @param {number} totalWidth
+ * @param {function} projection
+ * @param {number} index
+ * @param {object} margins
+ * @param {number} rowHeight
+ * @param {number} fontSize
+ * @param {string} projectionTemplate
+ * @returns {React.ReactElement} - React component
+ */
 const PortGroup = ({
   numberOfColumns,
   port,
diff --git a/src/components/TriangleChart/TriangleChart.js b/src/components/TriangleChart/TriangleChart.js
index c7292260..8fca8bff 100644
--- a/src/components/TriangleChart/TriangleChart.js
+++ b/src/components/TriangleChart/TriangleChart.js
@@ -29,6 +29,18 @@ import colorsPalettes from '../../colorPalettes';
 import PortGroup from './PortGroup';
 
 
+/**
+ * Returns triangles comparison visualization (for viz 3.1)
+ * @param {array} data
+ * @param {number} totalWidth
+ * @param {number} legendWidth - portion in [0,1]
+ * @param {object} margins
+ * @param {number} rowHeight
+ * @param {function} projection
+ * @param {string} projectionTemplate
+ * @param {boolean} atlasMode
+ * @returns {React.ReactElement} - React component
+ */
 const TriangleChart = ({
   data,
   totalWidth = 1200,
diff --git a/src/components/TriangleChart/TriangleChart.scss b/src/components/TriangleChart/TriangleChart.scss
index 749ffa4f..efc28e88 100644
--- a/src/components/TriangleChart/TriangleChart.scss
+++ b/src/components/TriangleChart/TriangleChart.scss
@@ -1,96 +1,91 @@
 .TriangleChart {
-
-    .TriangleLegend{
-        .textLegend{
-            .legendContent{
-            transform : rotate(-90deg);
-            // transform-origin : bottom left;
-            }
-            
-        }
+  .TriangleLegend {
+    .textLegend {
+      .legendContent {
+        transform: rotate(-90deg);
+      }
     }
+  }
 
-    rect {
-        fill : transparent;
-        stroke : transparent;
-    }
+  rect {
+    fill: transparent;
+    stroke: transparent;
+  }
 
-    .triangles{
-        .port-point-and-triangle{
-            transition : .5s ease all;
-            opacity : 1;
-            .label,
-            .vertical-line
-            {
-              transition: .5s ease all;
-            }
-            .local-legend {
-              font-family: "IBM Plex Sans", sans-serif;
-              font-size: .8rem;
-              transition: .5s all ease;
-              // text-align: right;
-              opacity: 1;
-              transition: .5s ease all;
-              color: darkgrey;
-              pointer-events: none;
-              span {
-                background: #ebebeb;
-              }
-              line,path {
-                stroke: darkgrey;
-                fill: transparent;
-              }
-            }
-            &:not(:first-of-type) {
-              .local-legend {
-                opacity: 0;
-                
-              }
-            }
-          &.is-minified {
-            .local-legend,
-            .label,
-            .vertical-line
-            {
-              opacity: 0;
-            }
-            &:first-of-type {
-              .local-legend {
-                opacity: 0;
-              }
-            }
-          }       
-        } 
-        &:hover{
-            .port-point-and-triangle{
-                &:first-of-type {
-                  .local-legend {
-                    opacity: 0;
-                  }
-                }
-                opacity : .1;
-                &:hover{
-                    opacity: 1;
-                    .local-legend {
-                      opacity: 1;
-                    }
-                }
-            } 
+  .triangles {
+    .port-point-and-triangle {
+      transition: 0.5s ease all;
+      opacity: 1;
+      .label,
+      .vertical-line {
+        transition: 0.5s ease all;
+      }
+      .local-legend {
+        font-family: "IBM Plex Sans", sans-serif;
+        font-size: 0.8rem;
+        transition: 0.5s all ease;
+        // text-align: right;
+        opacity: 1;
+        transition: 0.5s ease all;
+        color: darkgrey;
+        pointer-events: none;
+        span {
+          background: #ebebeb;
         }
+        line,
+        path {
+          stroke: darkgrey;
+          fill: transparent;
+        }
+      }
+      &:not(:first-of-type) {
+        .local-legend {
+          opacity: 0;
+        }
+      }
+      &.is-minified {
+        .local-legend,
+        .label,
+        .vertical-line {
+          opacity: 0;
+        }
+        &:first-of-type {
+          .local-legend {
+            opacity: 0;
+          }
+        }
+      }
     }
-
-    path.vertical-line {
-        stroke : darkgrey;
-    }
-    &.is-atlas-mode {
-      .triangles {
-        .port-point-and-triangle {
+    &:hover {
+      .port-point-and-triangle {
+        &:first-of-type {
+          .local-legend {
+            opacity: 0;
+          }
+        }
+        opacity: 0.1;
+        &:hover {
+          opacity: 1;
           .local-legend {
-            span {
-              background : white;
-            }
+            opacity: 1;
+          }
+        }
+      }
+    }
+  }
+
+  path.vertical-line {
+    stroke: darkgrey;
+  }
+  &.is-atlas-mode {
+    .triangles {
+      .port-point-and-triangle {
+        .local-legend {
+          span {
+            background: white;
           }
         }
       }
     }
-}
\ No newline at end of file
+  }
+}
diff --git a/src/components/VegaChart/VegaChart.js b/src/components/VegaChart/VegaChart.js
index 3ad2729d..b2df62f7 100644
--- a/src/components/VegaChart/VegaChart.js
+++ b/src/components/VegaChart/VegaChart.js
@@ -3,6 +3,12 @@ import {VegaLite} from 'react-vega';
 import {csvParse} from 'd3-dsv';
 import get from 'axios';
 
+/**
+ * Wrapper for vega visualization
+ * @param {data} string - data url
+ * @param {object} spec
+ * @returns {React.ReactElement} - React component
+ */
 const VegaChart = ({
   data: filename,
   spec
diff --git a/src/components/VisualizationController/VisualizationController.js b/src/components/VisualizationController/VisualizationController.js
index f1f33b5c..7c951f94 100644
--- a/src/components/VisualizationController/VisualizationController.js
+++ b/src/components/VisualizationController/VisualizationController.js
@@ -5,9 +5,17 @@ import Measure from 'react-measure'
 
 import VisualizationContainer from '../../visualizations/index.js';
 
+/**
+ * Controller preparing a given visualization for rendering (cleaning props, providing dimensions)
+ * @param {object} activeVisualization - JSON data about the visualization to display
+ * @param {string} lang
+ * @param {boolean} atlasMode
+ * @param {boolean} screenshotMode
+ * @returns {React.ReactElement} - React component
+ */
 const VisualizationController = ({
-  lang,
   activeVisualization,
+  lang,
   atlasMode,
   screenshotMode
 }) => {
diff --git a/src/components/VisualizationFocus/VisualizationFocus.js b/src/components/VisualizationFocus/VisualizationFocus.js
index 0bf98b40..5ab4b29c 100644
--- a/src/components/VisualizationFocus/VisualizationFocus.js
+++ b/src/components/VisualizationFocus/VisualizationFocus.js
@@ -7,7 +7,18 @@ import Md from 'react-markdown';
 import './VisualizationFocus.scss';
 
 
-const VisualizationFocus = ({ visualization, lang, onClose }) => {
+/**
+ * Displays an overlay with a visualization and its meta and descriptions in a 2-to-1 columns layout
+ * @param {object} visualization - JSON data about the visualization to display
+ * @param {string} lang
+ * @param {function} onClose
+ * @returns {React.ReactElement} - React component
+ */
+const VisualizationFocus = ({ 
+  visualization, 
+  lang, 
+  onClose 
+}) => {
 
   const [copyClicked, setCopyClicked] = useState(false);
   const inputRef = useRef(null);
diff --git a/src/visualizations/HomeportFlows/HomeportFlows.js b/src/visualizations/HomeportFlows/HomeportFlows.js
index ca17d6f6..4af17809 100644
--- a/src/visualizations/HomeportFlows/HomeportFlows.js
+++ b/src/visualizations/HomeportFlows/HomeportFlows.js
@@ -3,6 +3,13 @@ import { fixSvgDimension } from "../../helpers/misc";
 
 import './HomeportFlows.scss';
 
+/**
+ * Displays the homport flows vis (multiple flow maps)
+ * @param {object} datasets
+ * @param {boolean} atlasMode
+ * @param {object} dimensions
+ * @returns {React.ReactElement} - React component
+ */
 const HomeportFlows = ({
   datasets,
   atlasMode,
diff --git a/src/visualizations/IntroBureaux/IntroBureaux.js b/src/visualizations/IntroBureaux/IntroBureaux.js
index 1168d03f..1a571fb1 100644
--- a/src/visualizations/IntroBureaux/IntroBureaux.js
+++ b/src/visualizations/IntroBureaux/IntroBureaux.js
@@ -148,6 +148,13 @@ const renderBureaux = ({ data, projection, width, height, atlasMode }) => {
   )
 }
 
+/**
+ * Displays a basic visualization of bureaux des fermes with fancy blurry gradient backgrounds on points
+ * @param {object} datasets
+ * @param {boolean} atlasMode
+ * @param {object} dimensions
+ * @returns {React.ReactElement} - React component
+ */
 const IntroBureaux = ({
   datasets,
   atlasMode,
diff --git a/src/visualizations/PrincipalVisualizationPart1.js b/src/visualizations/PrincipalVisualizationPart1.js
index 1a533db3..f31adf42 100644
--- a/src/visualizations/PrincipalVisualizationPart1.js
+++ b/src/visualizations/PrincipalVisualizationPart1.js
@@ -1,6 +1,19 @@
 import Decline from '../components/DeclineChart';
 
-const PrincipalVisualizationPart1 = ({width, height, step, ...props}) => {
+/**
+ * Renders main visualization #1
+ * @param {number} width
+ * @param {number} height
+ * @param {string} step - in [1, 2, 3] - defines the step of storytelling
+ * @param {objects} props - additional params to be passed to visualization components
+ * @returns {React.ReactElement} - React component
+ */
+const PrincipalVisualizationPart1 = ({
+  width, 
+  height, 
+  step, 
+  ...props
+}) => {
   if (props.atlasMode) {
     return (
       <Decline 
diff --git a/src/visualizations/PrincipalVisualizationPart2/PrincipalVisualizationPart2.js b/src/visualizations/PrincipalVisualizationPart2/PrincipalVisualizationPart2.js
index 3f3bf6dd..d950db84 100644
--- a/src/visualizations/PrincipalVisualizationPart2/PrincipalVisualizationPart2.js
+++ b/src/visualizations/PrincipalVisualizationPart2/PrincipalVisualizationPart2.js
@@ -8,6 +8,23 @@ import {fixSvgDimension} from '../../helpers/misc';
 
 import './PrincipalVisualizationPart2.scss';
 
+/**
+ * Composes the principal visualization for part 2
+ * @param {number} width
+ * @param {number} height
+ * @param {object} datasets
+ * @param {boolean} showOnlyToflit
+ * @param {boolean} atlasMode
+ * @param {boolean} screenshotMode
+ * @param {string} highlight - enum ['navigo', 'toflit18']
+ * @param {string} lang
+ * @param {string} filter - custom filters enum ['aucun', 'colonial', 'eau-de-vie', 'sel']
+ * @param {string} bureaux - bureaux to highlight enum ['tous', <bureaux names separated by comas>']
+ * @param {string} navigoAgregation - enum["tonnage", ...]
+ * @param {number} minTonnage
+ * @param {number} maxTonnage
+ * @returns {React.ReactElement} - React component
+ */
 const PrincipalVisualizationPart2 = ({
   width: inputWidth, 
   height: containerHeight, 
@@ -22,7 +39,6 @@ const PrincipalVisualizationPart2 = ({
   navigoAgregation="tonnage",
   minTonnage,
   maxTonnage,
-  ...props
 }) => {
   const width = fixSvgDimension(inputWidth);
   const height = atlasMode ? 1200 : fixSvgDimension(containerHeight);
diff --git a/src/visualizations/PrincipalVisualizationPart2/PrincipalVisualizationPart2.scss b/src/visualizations/PrincipalVisualizationPart2/PrincipalVisualizationPart2.scss
index d91baa73..68ed1002 100644
--- a/src/visualizations/PrincipalVisualizationPart2/PrincipalVisualizationPart2.scss
+++ b/src/visualizations/PrincipalVisualizationPart2/PrincipalVisualizationPart2.scss
@@ -106,9 +106,6 @@
             margin-right: 0.5rem;
             box-sizing: border-box;
           }
-          .bureau-label {
-            // flex: 1;
-          }
           &.is-active {
             opacity: 1;
             .color-marker {
@@ -174,4 +171,4 @@
     }
   }
   
-}
\ No newline at end of file
+}
diff --git a/src/visualizations/PrincipalVisualizationPart2/RadarWrapper.js b/src/visualizations/PrincipalVisualizationPart2/RadarWrapper.js
index a5155f32..0963f17f 100644
--- a/src/visualizations/PrincipalVisualizationPart2/RadarWrapper.js
+++ b/src/visualizations/PrincipalVisualizationPart2/RadarWrapper.js
@@ -7,7 +7,12 @@ import cx from 'classnames';
 import SliderRange from '../../components/SliderRange';
 import RadarPlot from '../../components/RadarPlot';
 
-
+/**
+ * Prepares radar data
+ * @author Géraldine Geoffroy
+ * @param {array} datas 
+ * @returns {array}
+ */
 const prepareTravelData = datas => {
   return _(datas)
     .groupBy('destination_radar')
@@ -19,6 +24,12 @@ const prepareTravelData = datas => {
     .value();
 };
 
+/**
+ * Prepares radar data
+ * @author Géraldine Geoffroy
+ * @param {array} datas 
+ * @returns {array}
+ */
 const prepareTonnageData = (datas) => {
   return _(datas)
     .groupBy("destination_radar")
@@ -31,12 +42,19 @@ const prepareTonnageData = (datas) => {
 };
 
 
+/**
+ * Normalizes radar values so that they get comparable
+ * @author Géraldine Geoffroy
+ * @param {array} datas 
+ * @param {object} destCaptions 
+ * @returns {array}
+ */
 const normalizeRadarValues = (datas, destCaptions) => {
   // mapping on max value
   const maxValue = maxBy(values(datas), function (o) {
     return o;
   });
-  // mapping on sum
+  // if mapping on sum rather than max
   // const maxValue = sum(values(datas))
   var x = scaleLinear()
     .domain([0, maxValue])
@@ -55,6 +73,20 @@ const normalizeRadarValues = (datas, destCaptions) => {
   return datas;
 };
 
+/**
+ * Wraps radar vis by controlling interactions and interpreting writers-level instructions
+ * @param {array} data
+ * @param {number} globalWidth
+ * @param {boolean} minified
+ * @param {string} title
+ * @param {string} bureaux
+ * @param {string} navigoAgregation
+ * @param {number} minTonnage
+ * @param {number} maxTonnage
+ * @param {array} axis
+ * @param {object} colorPalette
+ * @returns {React.ReactElement} - React component
+ */
 const RadarWrapper = ({
   data: inputData,
   globalWidth = 500,
diff --git a/src/visualizations/PrincipalVisualizationPart3/ExtraversionObject.js b/src/visualizations/PrincipalVisualizationPart3/ExtraversionObject.js
index b7b8e198..f23ea788 100644
--- a/src/visualizations/PrincipalVisualizationPart3/ExtraversionObject.js
+++ b/src/visualizations/PrincipalVisualizationPart3/ExtraversionObject.js
@@ -9,6 +9,21 @@ import ReactTooltip from 'react-tooltip';
 import { fixSvgDimension } from '../../helpers/misc';
 
 
+/**
+ * Renders custom viz object (triangles + donuts)
+ * @param {array<number>} navigoValues
+ * @param {number} toflitPct - pct of exports of locally produced products
+ * @param {string} transformGroup - css transform
+ * @param {number} circleRadius
+ * @param {number} width
+ * @param {number} height
+ * @param {string} name
+ * @param {boolean} legendMode
+ * @param {boolean} isActive
+ * @param {boolean} isMinified
+ * @param {function} onClick
+ * @returns {React.ReactElement} - React component
+ */
 const ExtraversionObject = ({
   navigoValues: [metric1, metric2],
   toflitPct,
diff --git a/src/visualizations/PrincipalVisualizationPart3/PrincipalVisualizationPart3.js b/src/visualizations/PrincipalVisualizationPart3/PrincipalVisualizationPart3.js
index 43ebe9ec..a6911dfc 100644
--- a/src/visualizations/PrincipalVisualizationPart3/PrincipalVisualizationPart3.js
+++ b/src/visualizations/PrincipalVisualizationPart3/PrincipalVisualizationPart3.js
@@ -11,6 +11,15 @@ import Step2 from './Step2';
 import { fixSvgDimension } from '../../helpers/misc';
 
 
+/**
+ * Renders main viz #3
+ * @param {object} datasets
+ * @param {number} step - scrollytelling step
+ * @param {number} width
+ * @param {number} height
+ * @param {boolean} atlasMode
+ * @returns {React.ReactElement} - React component
+ */
 const PrincipalVisualizationPart3 = ({ 
   datasets, 
   step, 
diff --git a/src/visualizations/PrincipalVisualizationPart3/PrincipalVisualizationPart3.scss b/src/visualizations/PrincipalVisualizationPart3/PrincipalVisualizationPart3.scss
index 0d2cd080..42f0d581 100644
--- a/src/visualizations/PrincipalVisualizationPart3/PrincipalVisualizationPart3.scss
+++ b/src/visualizations/PrincipalVisualizationPart3/PrincipalVisualizationPart3.scss
@@ -102,4 +102,4 @@
       text-align: right;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/visualizations/PrincipalVisualizationPart3/Step2.js b/src/visualizations/PrincipalVisualizationPart3/Step2.js
index 90301cdc..46fa11b1 100644
--- a/src/visualizations/PrincipalVisualizationPart3/Step2.js
+++ b/src/visualizations/PrincipalVisualizationPart3/Step2.js
@@ -4,6 +4,13 @@ import BarChart from "../../components/BarChart";
 import colorPalettes from "../../colorPalettes";
 import { fixSvgDimension } from "../../helpers/misc";
 
+/**
+ * Viz 3.2 wrapper
+ * @param {number} width
+ * @param {number} height
+ * @param {object} datasets
+ * @returns {React.ReactElement} - React component
+ */
 const Step2 = ({
   width: inputWidth,
   height: inputHeight,
diff --git a/src/visualizations/PrincipalVisualizationPart3/renderObjectsFunctions.js b/src/visualizations/PrincipalVisualizationPart3/renderObjectsFunctions.js
index 8410ba8f..04aff782 100644
--- a/src/visualizations/PrincipalVisualizationPart3/renderObjectsFunctions.js
+++ b/src/visualizations/PrincipalVisualizationPart3/renderObjectsFunctions.js
@@ -40,6 +40,18 @@ export function Label(datum, projection, { width }) { // à terme on pourrait me
     </g>);
 }
 
+/**
+ * Render an object in viz 3.3
+ * @param {object} datum
+ * @param {function} projection
+ * @param {number} width
+ * @param {number} height
+ * @param {string} projectionTemplate
+ * @param {boolean} isActive
+ * @param {boolean} isMinified
+ * @param {function} onClick
+ * @returns {React.ReactElement} - React component
+ */
 function Step3Object({
   datum,
   projection,
@@ -124,6 +136,15 @@ function Step3Object({
   )
 }
 
+/**
+ * Renders objects for step 3.3
+ * @param {array} data
+ * @param {function} projection
+ * @param {number} width
+ * @param {number} height
+ * @param {string} projectionTemplate
+ * @returns {React.ReactElement} - React component
+ */
 export function Step3Objects({
   data: { customsOffices = [], ports = [] },
   projection,
@@ -270,11 +291,17 @@ export function Step3Objects({
   )
 }
 
+/**
+ * Renders small multiples for 3.3
+ * @param {array} data
+ * @param {number} width
+ * @param {number} height
+ * @returns {React.ReactElement} - React component
+ */
 export function SmallMultiples({ 
   data, 
   width: inputWidth, 
-  height: inputHeight, 
-  projection 
+  height: inputHeight
 }) {
   const width = fixSvgDimension(inputWidth);
   const height = fixSvgDimension(inputHeight);
@@ -308,17 +335,6 @@ export function SmallMultiples({
 
   return (
     <g className="small-multiples-and-legend-and-title">
-      {/* <foreignObject
-        x={margin * 4}
-        y={multiplesY - circleRadius * 4}
-        width={circleRadius * 7}
-        height={height}
-        className="interaction-cta"
-      >
-        <div>
-          cliquer sur un bureau des fermes pour voir le détail de ses ports
-        </div>
-      </foreignObject> */}
       <rect
         x={xObjectsStart + margin * 2}
         y={multiplesY - circleRadius * 3}
@@ -403,12 +419,23 @@ export function SmallMultiples({
 
 }
 
+/**
+ * Renders a row of triangles
+ * @param {array} data
+ * @param {number} width
+ * @param {number} height
+ * @param {function} projection
+ * @param {string} projectionTemplate
+ * @param {boolean} atlasMode
+ * @returns {React.ReactElement} - React component
+ */
 export function renderTriangles({ 
   data, 
   width: inputWidth, 
   height: inputHeight, 
   projection, 
-  projectionTemplate, atlasMode 
+  projectionTemplate, 
+  atlasMode 
 }) {
   const width = fixSvgDimension(inputWidth);
   const height = fixSvgDimension(inputHeight);
diff --git a/src/visualizations/index.js b/src/visualizations/index.js
index 894dcd1c..cada0749 100644
--- a/src/visualizations/index.js
+++ b/src/visualizations/index.js
@@ -21,7 +21,19 @@ import HomeportFlows from './HomeportFlows/HomeportFlows';
 import TreemapChart from '../components/TreemapChart/TreemapChart';
 import { omit } from 'lodash';
 
-const VisualizationContainer = ({ id, dimensions: inputDimensions, ...props }) => {
+/**
+ * This script is the bridge between visualization code, visualizations list, and visualization callers in contents.
+ * It returns a visualization component depending on the provided id
+ * @param {string} id
+ * @param {object} dimensions
+ * @param {object} - additional props
+ * @returns {React.ReactElement} - React component
+ */
+const VisualizationContainer = ({ 
+  id, 
+  dimensions: inputDimensions, 
+  ...props 
+}) => {
   const dimensions = {
     ...inputDimensions,
     // height: inputDimensions.height - inputDimensions.top / 2