update flow docs

eurostat · Jan 30, 2025 · a482555 · a482555
1 parent fae1ab2
commit a482555
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 14 deletions.
diff --git a/build/eurostatmap.min.js b/build/eurostatmap.min.js
diff --git a/docs/reference.md b/docs/reference.md
@@ -669,7 +669,15 @@ Here is [an example](https://eurostat.github.io/eurostat-map/examples/flowmap.ht
 
 ```javascript
 const exampleGraph = {
-    nodes: [{ id: 'FR' }, { id: 'DE' }, { id: 'IT' }, { id: 'ES' }, { id: 'BE' }, { id: 'Custom', x: 420000, y: 320000 }],
+    nodes: [
+        // the ids of the nodes and links correspond with the ids of the map's regions (e.g. NUTS id)
+        { id: 'FR' },
+        { id: 'DE' },
+        { id: 'IT' },
+        { id: 'ES' },
+        { id: 'BE' },
+        { id: 'Custom', x: 420000, y: 320000 },
+    ],
     links: [
         { source: 'FR', target: 'DE', value: 8201 },
         { source: 'FR', target: 'IT', value: 4969 },
@@ -684,13 +692,15 @@ const map = eurostatmap
     .flowGraph(exampleGraph)
     .nutsLevel(0)
     .flowColor('#72bb6f')
-    .overlayColors(['#bbd7ee', '#c7e3c6']) // exporter, importers
+    .flowOverlayColors(['#bbd7ee', '#c7e3c6']) // exporter, importers
     .build()
 ```
 
-| Method                         | Type   | Default   | Description                                                                                                                |
-| ------------------------------ | ------ | --------- | -------------------------------------------------------------------------------------------------------------------------- |
-| _map_.**flowGraph**([*value*]) | Object | undefined | The graph object with the links and nodes to be used to define the flow map's data. Same format that is used by d3 sankey. |
+| Method                                 | Type   | Default                | Description                                                                                                                |
+| -------------------------------------- | ------ | ---------------------- | -------------------------------------------------------------------------------------------------------------------------- |
+| _map_.**flowGraph**([*value*])         | Object | undefined              | The graph object with the links and nodes to be used to define the flow map's data. Same format that is used by d3 sankey. |
+| _map_.**flowColor**([*value*])         | String | '#72bb6f'              | The color of the flows and arrows.                                                                                         |
+| _map_.**flowOverlayColors**([*value*]) | array  | ['#bbd7ee', '#c7e3c6'] | The colors of the 'exporters' and 'importers' polygons (the colours of the region of origin and region of destination).    |
 
 ## Map texts
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "eurostat-map",
-    "version": "4.0.18",
+    "version": "4.1.0",
     "description": "Reusable library to quickly create and customise web maps showing Eurostat data directly retrieved from Eurostat database.",
     "keywords": [
         "eurostat",

diff --git a/src/maptypes/map-flow.js b/src/maptypes/map-flow.js
@@ -23,12 +23,12 @@ export const map = function (config) {
     out.labelFormatter = (d) => format('.2s')(d)
     out.tooltip_.textFunction = flowMapTooltipFunction
     out.flowColor_ = '#72bb6f'
-    out.overlayColors_ = ['#bbd7ee', '#c7e3c6'] // exporter, importers
+    out.flowOverlayColors_ = ['#bbd7ee', '#c7e3c6'] // exporter, importers
 
     /**
      * flowmap-specific setters/getters
      */
-    ;['flowGraph_', 'flowColor_', 'overlayColors_'].forEach(function (att) {
+    ;['flowGraph_', 'flowColor_', 'flowOverlayColors_'].forEach(function (att) {
         out[att.substring(0, att.length - 1)] = function (v) {
             if (!arguments.length) return out[att]
             out[att] = v
@@ -150,8 +150,8 @@ export const map = function (config) {
 
             allRegions.each(function () {
                 select(this).style('fill', (region) => {
-                    if (importerIds.includes(region.properties.id)) return out.overlayColors_[0]
-                    if (exporterIds.includes(region.properties.id)) return out.overlayColors_[1]
+                    if (importerIds.includes(region.properties.id)) return out.flowOverlayColors_[0]
+                    if (exporterIds.includes(region.properties.id)) return out.flowOverlayColors_[1]
                 })
             })
         }
@@ -232,7 +232,7 @@ export const map = function (config) {
             .attr('x2', (d) => d.target.x0)
             .attr('y1', (d) => d.y0)
             .attr('y2', (d) => d.y1)
-            .call((g) => g.append('stop').attr('offset', '5%').attr('stop-color', out.overlayColors_[0]))
+            .call((g) => g.append('stop').attr('offset', '5%').attr('stop-color', out.flowOverlayColors_[0]))
             .call((g) => g.append('stop').attr('offset', '50%').attr('stop-color', out.flowColor_))
     }
 

diff --git a/test/map-types/flow-map/test_flow.html b/test/map-types/flow-map/test_flow.html
@@ -47,7 +47,7 @@
                 .subtitle('test')
                 .flowGraph(exampleGraph)
                 .flowColor('#72bb6f')
-                .overlayColors(['#bbd7ee', '#c7e3c6']) // exporter, importers
+                .flowOverlayColors(['#bbd7ee', '#c7e3c6']) // exporter, importers
                 .nutsLevel(0)
                 .legend({ x: 10, y: 120, title: 'Test', boxOpacity: 0, barChart: false })
                 .drawCoastalMargin(false)