fix thresholds for choropleths and fix geoCenter deprecation where z …

…is undefined
eurostat · Dec 18, 2024 · 15e627a · 15e627a
1 parent 9617470
commit 15e627a
Show file tree

Hide file tree

Showing 12 changed files with 44 additions and 52 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/reference.md b/docs/reference.md
@@ -11,6 +11,9 @@
 **Map elements and methods**<br>
 [Title](#map-title-&-subtitle) - [Frame](#map-frame) - [Legend](#map-legend) - [Scalebar](#scalebar) - [Tooltip](#tooltip) - [Styling](#styling) - [Insets](#insets) - [Bottom text & link to source data](#bottom-text-&-link-to-source-data) - [Export](#export) - [Miscellaneous](#miscellaneous) - [Build & update](#build-and-update)
 
+**Version migration**
+See https://github.com/eurostat/eurostat-map/blob/master/docs/release-notes.md for any major changes.
+
 Anything unclear or missing? Feel free to [ask](https://github.com/eurostat/eurostat.js/issues/new) !
 
 ## Map creation

diff --git a/examples/pop-unemploy-bivariate.html b/examples/pop-unemploy-bivariate.html
@@ -8,34 +8,26 @@
     <body>
         <svg id="map"></svg>
         <script src="https://unpkg.com/eurostat-map"></script>
+        <!-- <script src="../build/eurostatmap.js"></script> -->
         <script>
             let height = window.innerHeight
             const bivariateMap = eurostatmap
-                .map('chbi')
+                .map('bivariateChoropleth')
                 .width(1000)
                 .height(800)
                 .titleFontSize(25)
                 .subtitleFontSize(16)
                 .title('Unemployment and population density, 2021')
                 .subtitle('% unemployed persons aged 20-64 years & inhabitants per km²')
-                .nutsLevel(2)
+                .nutsLevel('mixed')
                 .nutsYear(2016)
                 .stat('v1', { eurostatDatasetCode: 'demo_r_d3dens', unitText: 'inh./km²' })
                 .stat('v2', {
                     eurostatDatasetCode: 'lfst_r_lfu3rt',
                     filters: { age: 'Y20-64', sex: 'T', unit: 'PC', time: 2021 },
                     unitText: '% unemployed',
                 })
-                .clnb(4)
-                .nutsbnStroke({
-                    0: 'white',
-                    1: 'white',
-                    2: 'white',
-                    co: 'none',
-                    oth: 'white',
-                })
-                .cntbnStroke('white')
-                .nutsbnStrokeWidth({ 0: 1, 1: 0.1, 2: 0.1, 3: 0.1, co: 0 })
+                .numberOfClasses(4)
                 .startColor('#f3f3f3')
                 .color1('#00CBC9')
                 .color2('#cc5cb0')
@@ -49,21 +41,12 @@
                     label2: 'Unemployment',
                     x: 20,
                     y: 170,
-                    // axisPadding: { x: 0, y: 0 },
-                    //arrowPadding: 2,
                 })
                 .labelling(true)
-                .labelsToShow(['cc'])
-                .labelShadow(['cc'])
-                .drawGraticule(false)
-                .seaFillStyle('white')
-                .cntrgFillStyle('#f2f2f2')
-                .noDataFillStyle('#bfbfbf')
-                .drawCoastalMargin(false)
                 .zoomExtent([1, 2])
                 .frameStrokeWidth(0)
                 .geoCenter([4900000, 3500000])
-                .nutsrgSelFillSty('red')
+                .hoverColor('red')
                 .build()
         </script>
     </body>

diff --git a/examples/population-change.html b/examples/population-change.html
@@ -9,6 +9,7 @@
     <body>
         <svg id="map"></svg>
         <script src="https://unpkg.com/eurostat-map"></script>
+        <!-- <script src="../build/eurostatmap.js"></script> -->
         <!-- for eurostatmap.colorFun() -->
         <script src="https://d3js.org/d3-color.v2.min.js"></script>
         <script src="https://d3js.org/d3-interpolate.v2.min.js"></script>

diff --git a/examples/small_multiple.html b/examples/small_multiple.html
@@ -13,7 +13,8 @@ <h1 style="font-family: sans-serif">20 years of GDP change in Europe</h1>
             <a href="https://ec.europa.eu/eurostat/databrowser/view/namq_10_gdp/">Eurostat</a>
         </p>
 
-        <script src="https://unpkg.com/eurostat-map"></script>
+        <!-- <script src="https://unpkg.com/eurostat-map"></script> -->
+        <script src="../build/eurostatmap.js"></script>
 
         <!-- for eurostatmap.colorFun() -->
         <script src="https://d3js.org/d3-color.v2.min.js"></script>
@@ -43,9 +44,9 @@ <h1 style="font-family: sans-serif">20 years of GDP change in Europe</h1>
                             unitText: '%',
                         })
 
-                        .colorFun(d3.interpolateRdYlBu)
-                        .classifMethod('threshold')
-                        .threshold([-15, -10, -8, -6, -4, -2, -1, -0.5, 0, 0.5, , 1, 2, 4, 6, 7, 10, 15])
+                        .colorFunction(d3.interpolateRdYlBu)
+                        .classificationMethod('threshold')
+                        .thresholds([-15, -10, -8, -6, -4, -2, -1, -0.5, 0, 0.5, , 1, 2, 4, 6, 7, 10, 15])
 
                         .seaFillStyle('#fff')
                         .drawCoastalMargin(false)

diff --git a/examples/world.html b/examples/world.html
@@ -7,8 +7,8 @@
 
     <body style="margin: 0">
         <svg id="map"></svg>
-        <script src="../build/eurostatmap.js"></script>
-        <!-- <script src="https://unpkg.com/eurostat-map"></script> -->
+        <!-- <script src="../build/eurostatmap.js"></script> -->
+        <script src="https://unpkg.com/eurostat-map"></script>
         <script>
             let data = {
                 JM: 70,

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

diff --git a/src/core/deprecated.js b/src/core/deprecated.js
@@ -119,7 +119,7 @@ export const defineDeprecatedFunctions = (out) => {
     out.botTxtPadding = (v) => (console.warn('botTxtPadding is now DEPRECATED. Please use the em-footnote CSS class instead.'),out);
     out.botTxtTooltipTxt = (v) => (console.warn('botTxtTooltipTxt is now DEPRECATED. Please use footnoteTooltipText() instead.'),out);
     out.tooltipShowFlags = (v) =>(console.warn('tooltipShowFlags is now DEPRECATED. Please use out.tooltip({showFlags}) instead.'),out.tooltip_.showFlags = v,out);
-    out.colorFun = (v) =>(console.warn('colorFun is now DEPRECATED. Please use out.colorFunction() instead.'),out.colorFun_ = v,out);
+    out.colorFun = (v) =>(console.warn('colorFun is now DEPRECATED. Please use out.colorFunction() instead.'),out.colorFunction_ = v,out);
 
     //labelling
     out.labelling = (v) =>(console.warn('labelling is now DEPRECATED. Please use out.labels({}) configuration object instead. See documentation for details.'),out);

diff --git a/src/core/map-template.js b/src/core/map-template.js
@@ -558,9 +558,12 @@ export const mapTemplate = function (config, withCenterPoints) {
         if (!out.position_.x || !out.position_.y) {
             defineDefaultPosition()
         }
+        out.position_.z = out.position_.z || getDefaultZ()
 
+        // d3 projection functions
         defineProjection()
         definePathFunction()
+        // d3 zoom
         if (out.zoomExtent()) {
             defineMapZoom()
         }
@@ -725,7 +728,6 @@ export const mapTemplate = function (config, withCenterPoints) {
             // out.position_.x = Geometries.userGeometries
             // out.position_.y = Geometries.userGeometries
         }
-        out.position_.z = out.position_.z || getDefaultZ()
 
         // optional: set from URL
         setViewFromURL()

diff --git a/src/legend/legend-choropleth.js b/src/legend/legend-choropleth.js
@@ -72,8 +72,8 @@ export const legend = function (map, config) {
 
         if (out.barChart) {
             let thresholds =
-                m.threshold_.length > 1
-                    ? m.threshold_
+                m.thresholds_.length > 1
+                    ? m.thresholds_
                     : Array.from({ length: m.numberOfClasses_ })
                           .map((_, index) => {
                               return m.classifier().invertExtent(index)[out.ascending ? 0 : 1]

diff --git a/src/maptypes/map-choropleth.js b/src/maptypes/map-choropleth.js
@@ -23,7 +23,7 @@ export const map = function (config) {
     //the classification method
     out.classificationMethod_ = 'quantile' // or: equinter, threshold
     //the threshold, when the classification method is 'threshold'
-    out.threshold_ = [0]
+    out.thresholds_ = [0]
     //colors to use for classes
     out.colors_ = null
     //when computed automatically, ensure the threshold are nice rounded values
@@ -50,7 +50,7 @@ export const map = function (config) {
     ;[
         'numberOfClasses_',
         'classificationMethod_',
-        'threshold_',
+        'thresholds_',
         'makeClassifNice_',
         'colorFunction_',
         'classToFillStyle_',
@@ -81,8 +81,8 @@ export const map = function (config) {
         return out
     }
     out.threshold = function (v) {
-        if (!arguments.length) return out.threshold_
-        out.threshold_ = v
+        if (!arguments.length) return out.thresholds_
+        out.thresholds_ = v
         out.numberOfClasses(v.length + 1)
         return out
     }
@@ -146,8 +146,8 @@ export const map = function (config) {
                     break
                 }
                 case 'threshold': {
-                    out.numberOfClasses(out.threshold_.length + 1)
-                    out.classifier(scaleThreshold().domain(out.threshold_).range(generateRange(out.numberOfClasses_)))
+                    out.numberOfClasses(out.thresholds_.length + 1)
+                    out.classifier(scaleThreshold().domain(out.thresholds_).range(generateRange(out.numberOfClasses_)))
                     break
                 }
                 case 'jenks': {