add a constant color to marseille

medialab · Aug 14, 2024 · 1a67b0c · 1a67b0c
1 parent 81c58e6
commit 1a67b0c
Show file tree

Hide file tree

Showing 11 changed files with 90 additions and 27 deletions.
diff --git a/src/components/TradeDynamicsChart/LongitudinalTradeChart.js b/src/components/TradeDynamicsChart/LongitudinalTradeChart.js
@@ -10,6 +10,8 @@ import ReactTooltip from "react-tooltip";
 import colorsPalettes from "../../utils/colorPalettes";
 import { fixSvgDimension } from "../../utils/misc";
 
+const {marseilleColor} = colorsPalettes;
+
 /**
  * Improve the display of numbers
  * @param {string|number} str - the number to prettify
@@ -92,6 +94,7 @@ const LongitudinalTradeChart = ({
       inputData.filter((d) => (+d.year >= startYear) & (+d.year <= endYear)),
     [startYear, endYear, inputData]
   );
+  const isMarseille = title.includes('Marseille');
   const headerRef = useRef(null);
   const footerRef = useRef(null);
   const [height, setHeight] = useState(wholeHeight);
@@ -162,7 +165,7 @@ const LongitudinalTradeChart = ({
             style={{
               background:
                 axisLeftTitle && axisLeftTitle.length
-                  ? colorsPalettes.generic.accent2
+                  ? isMarseille ? marseilleColor: colorsPalettes.generic.accent2
                   : undefined,
               marginLeft: margins.left,
             }}
@@ -225,21 +228,21 @@ const LongitudinalTradeChart = ({
                   x2={margins.left}
                   y1={yShareScale(value)}
                   y2={yShareScale(value)}
-                  stroke={colorsPalettes.generic.accent2}
+                  stroke={isMarseille ? marseilleColor : colorsPalettes.generic.accent2}
                 />
                 <line
                   x1={margins.left}
                   x2={width - margins.right}
                   y1={yShareScale(value)}
                   y2={yShareScale(value)}
-                  stroke={colorsPalettes.generic.accent2}
+                  stroke={isMarseille ? marseilleColor : colorsPalettes.generic.accent2}
                   strokeDasharray={"2, 2"}
                   opacity={0.2}
                 />
                 <text
                   x={margins.left * 0.7}
                   y={yShareScale(value) + height / 100}
-                  fill={colorsPalettes.generic.accent2}
+                  fill={isMarseille ? marseilleColor : colorsPalettes.generic.accent2}
                 >
                   {Math.round(+value * 100) + "%"}
                 </text>
@@ -378,7 +381,7 @@ const LongitudinalTradeChart = ({
                   fill={
                     herfindhalField && d[herfindhalField]
                       ? herfindhalColorScale(+d[herfindhalField])
-                      : colorsPalettes.generic.accent2
+                      : isMarseille ? marseilleColor : colorsPalettes.generic.accent2
                   }
                   // opacity={herfindhalField && d[herfindhalField]
                   //         ? herfindhalOpacityScale(+d[herfindhalField])

diff --git a/src/components/TradeDynamicsChart/TradeDynamicsChart.js b/src/components/TradeDynamicsChart/TradeDynamicsChart.js
@@ -9,6 +9,15 @@ import { useEffect, useState } from "react";
 import { omit } from "lodash";
 import ReactTooltip from "react-tooltip";
 
+const formatKind = (kind, lang) => {
+  if (lang === 'fr') {
+    if (kind === 'exports') {
+      return 'exportations';
+    } else return 'importations';
+  }
+  return kind;
+}
+
 /**
  * Configurable wrapper for main viz #1
  * @param {number} width
@@ -82,9 +91,9 @@ const TradeDynamicsChart = (props) => {
     //     start: start,
     //     end: end,
     //   }),
-    partInPct: (kind) => translate("viz-1-A", "partInPct", lang, { kind }),
+    partInPct: (kind) => translate("viz-1-A", "partInPct", lang, { kind: formatKind(kind, lang) }),
     absoluteValue: (kind) =>
-      translate("viz-1-A", "absoluteValue", lang, { kind }),
+      translate("viz-1-A", "absoluteValue", lang, { kind: formatKind(kind, lang) }),
     regressionTitle: (slope) =>
       translate("viz-1-A", "regressionTitle", lang, { slope }),
     // herfindalLegendTitle: () =>
@@ -163,7 +172,7 @@ const TradeDynamicsChart = (props) => {
             absoluteField="value"
             regressionField="reg"
             slopeField="slope"
-            title={messages.franceOverviewTitle(startYear, endYear, kind)}
+            title={messages.franceOverviewTitle(startYear, endYear, formatKind(kind, lang))}
             axisLeftTitle={""}
             axisRightTitle={messages.absoluteValue(kind)}
             regressionTitle={messages.regressionTitle(
@@ -195,7 +204,7 @@ const TradeDynamicsChart = (props) => {
             regressionField={`${kind}_${regression}`}
             slopeField={`${kind}_slope`}
             //herfindhalField="product_revolutionempire_exports_herfindahl"
-            title={messages.tradeEvolutionTitle(row, startYear, endYear, kind)}
+            title={messages.tradeEvolutionTitle(row, startYear, endYear, formatKind(kind, lang))}
             axisLeftTitle={
               kind.includes("colonial") ? undefined : messages.partInPct(kind)
             }

diff --git a/src/components/TradeDynamicsChart/TradeDynamicsChart.scss b/src/components/TradeDynamicsChart/TradeDynamicsChart.scss
@@ -17,6 +17,12 @@
     }
   }
 
+  .chart-header {
+    .visualization-title::first-letter {
+      text-transform: capitalize;
+    }
+  }
+
   h3 {
     margin-top: 0;
     margin-bottom: 0.5rem;

diff --git a/src/i18n/messages.yml b/src/i18n/messages.yml
@@ -54,10 +54,10 @@ vizContainer:
     en: Back to main visualization
 viz-1-A:
   franceOverviewTitle:
-    fr: France ${kind}, ${start}-${end}
+    fr: ${kind} de la France, ${start}-${end}
     en: France ${kind}, ${start}-${end}
   tradeEvolutionTitle:
-    fr: ${cityName} ${kind}, ${start}-${end}
+    fr: ${kind} de ${cityName}, ${start}-${end}
     en: ${cityName} ${kind}, ${start}-${end}
   partInPct:
     fr: part des ${kind} fr

diff --git a/src/utils/colorPalettes.js b/src/utils/colorPalettes.js
@@ -1,4 +1,6 @@
 const colorsPalettes = {
+  marseilleColor: '#0d94d6',
+  genericObjectColor: '#ec9712', // orange
   ui: {
     colorText: "#403d3d",
     colorAccent: "#34495e",

diff --git a/src/visualizations/Intro/Intro.js b/src/visualizations/Intro/Intro.js
@@ -2,6 +2,7 @@ import { useEffect, useState, useMemo } from 'react';
 import GeographicMapChart from '../../components/GeographicMapChart'
 import { extent, min, max } from "d3-array";
 import { scaleLinear } from "d3-scale";
+import palettes from '../../utils/colorPalettes';
 
 import './Intro.scss';
 import PartnersObjects from './PartnersObjects';
@@ -10,6 +11,8 @@ import SliderRange from '../../components/SliderRange/SliderRange';
 import ReactTooltip from 'react-tooltip';
 import translate from '../../utils/translate';
 
+const {marseilleColor} = palettes;
+
 const Intro = ({
   data,
   width,
@@ -137,6 +140,7 @@ const Intro = ({
     }
   }
 
+  const MARSEILLE_COORDS = [ 5.2158406, 43.280477 ];
 
   return (
     <>
@@ -176,6 +180,37 @@ const Intro = ({
                   }
                 />
             },
+            {
+              type: 'custom',
+              data: [],
+              renderObjects: ({projection}) => {
+                const [marseilleX, marseilleY] = projection(MARSEILLE_COORDS);
+                if (dataScope !== 'world') {
+                  return null;
+                }
+                return (
+                  <g className="marseille-marker" transform={`translate(${marseilleX}, ${marseilleY})`}>
+                      <rect
+                        width={width / 100}
+                        height={width / 100}
+                        x={-width / 200}
+                        y={-width / 200}
+                        transform={'rotate(45)'}
+                        fill={marseilleColor}
+                        stroke="white"
+                      />
+                      <text 
+                        fontSize={width / 75}
+                        // fontStyle="italic" 
+                        x={-width/100} 
+                        textAnchor="end" 
+                        y={width/200}>
+                        Marseille
+                      </text>
+                    </g>
+                )
+              }
+            }
 
           ]
         }}

diff --git a/src/visualizations/Intro/PartnersObjects.js b/src/visualizations/Intro/PartnersObjects.js
@@ -2,7 +2,9 @@ import { extent, max } from "d3-array";
 import { scaleLinear } from "d3-scale";
 import { formatNumber } from "../../utils/misc";
 import translate from "../../utils/translate";
+import colorsPalettes from "../../utils/colorPalettes";
 
+const {marseilleColor, genericObjectColor} = colorsPalettes;
 const PartnersObjects = ({
   // data,
   projection,
@@ -152,6 +154,9 @@ const PartnersObjects = ({
             });
           }
         }
+        if (partner === 'Marseille') {
+          console.log('ok marseille', [latitude, longitude])
+        }
         return (
           <g
             className="PartnersObject"
@@ -170,7 +175,7 @@ const PartnersObjects = ({
                     x2={-radius - arrowsMargin + 5}
                     y1={0}
                     y2={0}
-                    stroke="red"
+                    stroke={genericObjectColor}
                     markerEnd="url(#arrow-end)"
                   />
                 </g>
@@ -182,7 +187,7 @@ const PartnersObjects = ({
               cx={0}
               cy={0}
               r={dataType === 'toflit18' ? radius : max([triangleWidth, triangleHeight]) / 2 + 5}
-              fill={dataType === 'toflit18' ? "red" : "rgba(0,0,0,0.07)"}
+              fill={dataType === 'toflit18' ? partner === 'Marseille' ? marseilleColor : genericObjectColor : "rgba(0,0,0,0.07)"}
             />
             {
               dataType === 'navigo' &&
@@ -191,13 +196,14 @@ const PartnersObjects = ({
               >
                 <path
                   d={`M ${-triangleWidth / 2} ${-triangleHeight / 2} L ${triangleWidth / 2} ${-triangleHeight / 2} L 0 ${triangleHeight / 2} Z`}
-                  fill="red"
+                  fill={partner === 'Marseille' ? marseilleColor : genericObjectColor}
                 />
               </g>
             }
             <text
               x={labelPosition === 'right' ? labelMargin : -labelMargin}
               textAnchor={labelPosition === 'right' ? 'start' : 'end'}
+              fontSize={width / 75}
               y={5}
               className="label"
               // fill="red"
@@ -220,7 +226,7 @@ const PartnersObjects = ({
           markerHeight={arrowSide}
           orient="auto">
 
-          <path d={`M 0 0 L ${arrowSide} ${arrowSide / 2} L 0 ${arrowSide} z`} fill="red" />
+          <path d={`M 0 0 L ${arrowSide} ${arrowSide / 2} L 0 ${arrowSide} z`} fill={genericObjectColor} />
         </marker>
       </defs>
     </>

diff --git a/src/visualizations/LevantNavigation/LevantNavigation.js b/src/visualizations/LevantNavigation/LevantNavigation.js
@@ -6,7 +6,7 @@ import { useSpring, animated } from '@react-spring/web';
 import ReactTooltip from 'react-tooltip';
 import colorsPalettes from '../../utils/colorPalettes';
 
-const { provinces: provincesPalette } = colorsPalettes;
+const { provinces: provincesPalette, marseilleColor } = colorsPalettes;
 
 import './LevantNavigation.scss';
 import { extent } from 'd3-array';
@@ -250,7 +250,7 @@ export default function LevantNavigation({
                         x={-width / 100}
                         y={-width / 100}
                         transform={'rotate(45)'}
-                        fill="red"
+                        fill={marseilleColor}
                         stroke="white"
                       />
                       <text fontSize={width / 100} fontStyle="italic" x={0} textAnchor="middle" y={height / 50 + 20}>

diff --git a/src/visualizations/MarseillePortStructurant/MarseillePortStructurant.js b/src/visualizations/MarseillePortStructurant/MarseillePortStructurant.js
@@ -9,7 +9,7 @@ import GeographicMapChart from '../../components/GeographicMapChart';
 
 import colorsPalettes from '../../utils/colorPalettes';
 
-const { provinces: provincesPalette } = colorsPalettes;
+const { provinces: provincesPalette, marseilleColor } = colorsPalettes;
 
 import './MarseillePortStructurant.scss';
 import { min, max } from 'd3-array';
@@ -40,7 +40,6 @@ const labelsCoordinates = {
   "Bastia": [43, 9],
 }
 
-const MARSEILLE_COLOR = "red";
 const Provinces = ({
   data: inputData, 
   projection, 
@@ -216,7 +215,7 @@ const MapObjects = ({
                   y={objectY - objectWidth / 2 + 1}
                   width={objectWidth * ratio_to_marseille}
                   height={objectWidth - 2}
-                  fill={MARSEILLE_COLOR}
+                  fill={marseilleColor}
                 />
 
                 <text
@@ -234,22 +233,22 @@ const MapObjects = ({
       }
       <g className="marseille-group">
         <line
-          stroke={MARSEILLE_COLOR}
+          stroke={marseilleColor}
           x1={marseilleX}
           y1={marseilleY}
           x2={centerX}
           y2={centerY}
         />
         <circle
-          fill={MARSEILLE_COLOR}
+          fill={marseilleColor}
           cx={marseilleX}
           cy={marseilleY}
           r={2}
           stroke="white"
         />
         <g transform={`translate(${centerX}, ${centerY})rotate(45)`}>
           <rect
-            fill={MARSEILLE_COLOR}
+            fill={marseilleColor}
             stroke="white"
             x={-10}
             y={-10}

diff --git a/src/visualizations/PartDesEtrangersDansNavigation/PartDesEtrangersDansNavigation.js b/src/visualizations/PartDesEtrangersDansNavigation/PartDesEtrangersDansNavigation.js
@@ -6,6 +6,9 @@ import { scaleLinear } from 'd3-scale';
 import ReactTooltip from 'react-tooltip';
 import {formatNumber} from '../../utils/misc';
 import translate from '../../utils/translate';
+import colorsPalettes from '../../utils/colorPalettes';
+
+const {marseilleColor} = colorsPalettes;
 
 const italians = ['Genoese', 'Savoyard', 'Venitian', 'Tuscan', 'Neapolitan', 'Carrara', 'Roman'];
 
@@ -192,7 +195,7 @@ const flagToNationality = {
                         y={topBarHeight - secondBarHeight}
                         width={topBarWidth}
                         height={secondBarHeight}
-                        fill={port === 'Marseille' ? "red" : 'grey'}
+                        fill={port === 'Marseille' ? marseilleColor : 'grey'}
                       />
                       <g transform={`translate(${topBarWidth/2 - 10}, ${topBarHeight + 10})rotate(45)`}>
                         <text
@@ -259,7 +262,7 @@ const flagToNationality = {
                         width={width}
                         height={marseilleBandHeight}
                         stroke="white"
-                        fill="red"
+                        fill={marseilleColor}
                       />
                       <foreignObject
                         x={5}

diff --git a/src/visualizations/StylesNavigation/StylesNavigation.js b/src/visualizations/StylesNavigation/StylesNavigation.js
@@ -17,7 +17,7 @@ import { formatNumber } from '../../utils/misc';
 
 import colorsPalettes from '../../utils/colorPalettes';
 
-const {stylesOfNavigation: colors} = colorsPalettes;
+const {stylesOfNavigation: colors, marseilleColor} = colorsPalettes;
 
 
 const WIDTH_BREAKPOINT = 800;
@@ -323,7 +323,7 @@ export default function StylesNavigation({
                           x={-cellWidth / 100}
                           y={-cellWidth / 100}
                           transform={'rotate(45)'}
-                          fill="red"
+                          fill={marseilleColor}
                           stroke="white"
                         />
                         <text fontSize={cellWidth / 50} fontStyle="italic" x={0} textAnchor="middle" y={cellWidth / 50 + 5}>