flow map documentation colors and overlays. Spike map legend placement.

eurostat · Jan 27, 2025 · dd6e24f · dd6e24f
1 parent 62314bc
commit dd6e24f
Show file tree

Hide file tree

Showing 11 changed files with 67 additions and 50 deletions.
diff --git a/build/eurostatmap.js b/build/eurostatmap.js
diff --git a/build/eurostatmap.min.js b/build/eurostatmap.min.js
diff --git a/docs/css.md b/docs/css.md
@@ -33,6 +33,9 @@ Here you can find the CSS classes used to style the map and its components, in c
 .em-bn-1 //NUTS1
 .em-bn-2 //NUTS2
 .em-bn-3 //NUTS3
+.em-flow-link
+.em-flow-link-outline
+
 ```
 
 ## Legends

diff --git a/docs/reference.md b/docs/reference.md
@@ -264,7 +264,7 @@ Please be aware that by using this method you will essentially be turning the ma
 
 | Method                                      | Type             | Default value        | Description                                                                                                                                                                              |
 | ------------------------------------------- | ---------------- | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| _map_.**psShape**([*value*])                | string           | _circle_             | The shape of the symbol. Accepted values: circle, spike, bar, square, star, cross, diamond, triangle, wye or custom                                                                             |
+| _map_.**psShape**([*value*])                | string           | _circle_             | The shape of the symbol. Accepted values: circle, spike, bar, square, star, cross, diamond, triangle, wye or custom                                                                      |
 | _map_.**psCustomShape**([*value*])          | Object           | null                 | A custom symbol to be used with d3.symbol when psShape is set to "custom". See http://using-d3js.com/05_10_symbols.html#h_66iIQ5sJIT                                                     |
 | _map_.**psCustomSVG**([*value*])            | Template Literal | null                 | Use this method for defining a custom SVG, which will be used as the proportional symbol. E.g. map.psCustomSVG(`<svg width="100" height="100"><rect width="100" height="100" /></svg>`). |
 | _map_.**psOffset**([*value*])               | Object           | {x:0,y:0}            | Defines the offsets to apply to the symbols on the map. Only applicable to symbols where custom svgs are specified ( through psCustomSVG)                                                |
@@ -277,7 +277,7 @@ Please be aware that by using this method you will essentially be turning the ma
 | _map_.**psStrokeWidth**([*value*])          | number           | _0.3_                | The width of the stroke.                                                                                                                                                                 |
 | _map_.**psClasses**([*value*])              | number           | _5_                  | The number of classes to use when applying data-driven colour for the symbols. Similar to numberOfClasses() for choropleth maps.                                                         |
 | _map_.**psColorFun**([*value*])             | function         | _d3.interpolateOrRd_ | The color function, as defined in [d3-scale-chromatic](https://github.com/d3/d3-scale-chromatic/)                                                                                        |
-| _map_.**psSizeScale**([*value*])              | string         | 'sqrt' or 'linear'       | The D3 scale function used to define the sizes of the symbols. The following methods are then called internally: psSizeScale().domain(sizeDomain).range([psMinSize, psMaxSize])            |
+| _map_.**psSizeScale**([*value*])            | string           | 'sqrt' or 'linear'   | The D3 scale function used to define the sizes of the symbols. The following methods are then called internally: psSizeScale().domain(sizeDomain).range([psMinSize, psMaxSize])          |
 | _map_.**psClassificationMethod**([*value*]) | String           | _"quantile"_         | The classification method. Possible values are _"quantile"_, _"equinter"_ for equal intervals, and _"threshold"_ for user defined threshold (see threshold method).                      |
 | _map_.**psThreshold**([*value*])            | Array            | _[0]_                | If _psClassificationMethod = "threshold"_, the breaks of the classification.                                                                                                             |
 | _map_.**psColours**([*value*])              | Array            | null                 | The colours to be using data-driven colour. The number of colours specified in the array should match the number of classes (specified using psClasses())                                |
@@ -679,7 +679,13 @@ const exampleGraph = {
     ],
 }
 
-const map = eurostatmap.map('flow').flowGraph(exampleGraph).nutsLevel(0).build()
+const map = eurostatmap
+    .map('flow')
+    .flowGraph(exampleGraph)
+    .nutsLevel(0)
+    .flowColor('#72bb6f')
+    .overlayColors(['#bbd7ee', '#c7e3c6']) // exporter, importers
+    .build()
 ```
 
 | Method                         | Type   | Default   | Description                                                                                                                |

diff --git a/examples/flowmap.html b/examples/flowmap.html
@@ -24,16 +24,16 @@
                     { id: 'CZ' },
                 ],
                 links: [
-                    { source: 'FR', target: 'DE', value: 82018369.72 },
-                    { source: 'FR', target: 'IT', value: 49697198.92 },
-                    { source: 'FR', target: 'ES', value: 45422327.56 },
-                    { source: 'FR', target: 'BE', value: 43038180.93 },
-                    { source: 'FR', target: 'NL', value: 34453478.99 },
-                    { source: 'FR', target: 'CH', value: 16164188.98 },
-                    { source: 'FR', target: 'PL', value: 12673336.04 },
-                    { source: 'FR', target: 'PT', value: 7178656.08 },
-                    { source: 'FR', target: 'AT', value: 6305366.1 },
-                    { source: 'FR', target: 'CZ', value: 5883790.49 },
+                    { source: 'FR', target: 'DE', value: 82018369 },
+                    { source: 'FR', target: 'IT', value: 49697198 },
+                    { source: 'FR', target: 'ES', value: 45422327 },
+                    { source: 'FR', target: 'BE', value: 43038180 },
+                    { source: 'FR', target: 'NL', value: 34453478 },
+                    { source: 'FR', target: 'CH', value: 16164188 },
+                    { source: 'FR', target: 'PL', value: 12673336 },
+                    { source: 'FR', target: 'PT', value: 7178656 },
+                    { source: 'FR', target: 'AT', value: 6305366 },
+                    { source: 'FR', target: 'CZ', value: 5883790 },
                 ],
             }
 

diff --git a/examples/prop-circles.html b/examples/prop-circles.html
@@ -22,10 +22,10 @@
                     filters: { unit: 'MIO_EUR', time: '2018' },
                 })
                 .legend({ title: 'Million EUR', x: 500, y: 130, boxOpacity: 0 })
-                .psShape('circle')
+                .psShape('circle') // try: cross, diamond, star, square, wye, circle, triangle, rectangle https://github.com/d3/d3-shape#symbols
                 .dorling(true)
                 .insets(false)
-                .psMaxSize(40) // try: cross, diamond, star, square, wye, circle, triangle, rectangle https://github.com/d3/d3-shape#symbols
+                .psMaxSize(40)
 
             map.build()
         </script>

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

diff --git a/src/legend/legend-proportional-symbols.js b/src/legend/legend-proportional-symbols.js
@@ -213,16 +213,17 @@ export const legend = function (map, config) {
 
     function buildSpikeLegend(map, sizeLegendConfig) {
         const spike = (length, width = map.psSpikeWidth_) => `M${-width / 2},0L0,${-length}L${width / 2},0`
+        let maxSize = map.classifierSize_(map.classifierSize_.domain()[1])
         const legend = out._sizeLegendNode
             .append('g')
-            .attr('id','em-spike-legend')
+            .attr('id', 'em-spike-legend')
             .attr('fill', 'black')
             .attr('text-anchor', 'middle')
             .style('font-size', '11px')
             .selectAll()
             .data(map.classifierSize_.ticks(4).slice(1))
             .join('g')
-            .attr('transform', (d, i) => `translate(${25 * i},0)`)
+            .attr('transform', (d, i) => `translate(${25 * i},${maxSize + 15} )`)
 
         legend
             .append('path')

diff --git a/src/maptypes/map-flow.js b/src/maptypes/map-flow.js
@@ -21,11 +21,13 @@ export const map = function (config) {
     out.labelOffsetY = 5
     out.labelFormatter = (d) => format('.2s')(d)
     out.tooltip_.textFunction = flowMapTooltipFunction
+    out.flowColor_ = '#72bb6f'
+    out.overlayColors_ = ['#bbd7ee', '#c7e3c6'] // exporter, importers
 
     /**
      * flowmap-specific setters/getters
      */
-    ;['flowGraph_'].forEach(function (att) {
+    ;['flowGraph_', 'flowColor_', 'overlayColors_'].forEach(function (att) {
         out[att.substring(0, att.length - 1)] = function (v) {
             if (!arguments.length) return out[att]
             out[att] = v
@@ -79,8 +81,8 @@ export const map = function (config) {
         addCoordinatesToGraph(graph)
 
         var { nodes, links } = sankey(graph)
-        console.log('Processed Nodes:', nodes) // Array of processed nodes
-        console.log('Processed Links:', links) // Array of processed links
+        // console.log('Processed Nodes:', nodes) // Array of processed nodes
+        // console.log('Processed Links:', links) // Array of processed links
 
         // Define marker and gradient IDs
         const defs = svg.append('defs')
@@ -89,7 +91,7 @@ export const map = function (config) {
         const gradientIds = links.map(() => generateUniqueId('gradient'))
 
         // Add arrow markers
-        addArrowMarker(defs, arrowId, '#72bb6f')
+        addArrowMarker(defs, arrowId, out.flowColor_)
         addArrowMarker(defs, arrowOutlineId, '#ffffff')
 
         // Add flow gradients
@@ -148,8 +150,8 @@ export const map = function (config) {
 
             allRegions.each(function () {
                 select(this).style('fill', (region) => {
-                    if (importerIds.includes(region.properties.id)) return '#bbd7ee'
-                    if (exporterIds.includes(region.properties.id)) return '#c7e3c6'
+                    if (importerIds.includes(region.properties.id)) return out.overlayColors_[0]
+                    if (exporterIds.includes(region.properties.id)) return out.overlayColors_[1]
                 })
             })
         }
@@ -230,8 +232,8 @@ 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', '#c7e3c6'))
-            .call((g) => g.append('stop').attr('offset', '50%').attr('stop-color', '#72bb6f'))
+            .call((g) => g.append('stop').attr('offset', '5%').attr('stop-color', out.overlayColors_[0]))
+            .call((g) => g.append('stop').attr('offset', '50%').attr('stop-color', out.flowColor_))
     }
 
     /**
@@ -301,7 +303,7 @@ export const map = function (config) {
      */
     function addFillGaps(svg, nodes) {
         svg.append('g')
-            .attr('class', 'em-fill-in-gaps')
+            .attr('class', 'em-flow-fill-in-gaps')
             .selectAll('rect')
             .data(nodes)
             .join('rect')
@@ -310,7 +312,7 @@ export const map = function (config) {
             .attr('y', (d) => d.y0)
             .attr('width', 1)
             .attr('height', (d) => d.y1 - d.y0)
-            .attr('fill', '#72bb6f')
+            .attr('fill', out.flowColor_)
     }
 
     /**

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

diff --git a/test/map-types/proportional-symbols/test_spikes.html b/test/map-types/proportional-symbols/test_spikes.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
     <head>
         <meta charset="UTF-8" />
@@ -23,14 +23,14 @@
                     unitText: 'Million EUR',
                     filters: { unit: 'MIO_EUR', time: '2018' },
                 })
-                .legend({ title: 'Million EUR', x: 550, y: 190, boxOpacity: 0 })
-                
+                .legend({ title: 'Million EUR', x: 550, y: 90, boxOpacity: 0 })
+
                 .insets(false)
                 .psStroke('white')
                 .psStrokeWidth(0.5)
                 .psSizeScale('linear')
                 .psMinSize(1)
-                .psMaxSize(60) // try: cross, diamond, star, square, wye, circle, triangle, rectangle https://github.com/d3/d3-shape#symbols      
+                .psMaxSize(60) // try: cross, diamond, star, square, wye, circle, triangle, rectangle https://github.com/d3/d3-shape#symbols
 
             map.build()
         </script>