isofence style

eurostat · Oct 26, 2023 · bc43e69 · bc43e69
1 parent 42b11f1
commit bc43e69
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 7 deletions.
diff --git a/dist/gridviz.js b/dist/gridviz.js
diff --git a/examples/styles/isofence.html b/examples/styles/isofence.html
@@ -35,13 +35,13 @@
                             men_2_4ind: '#1b9e77', //green
                             men_5ind: '#d95f02', //orange*/
                         },
-                        angle: 50,
+                        angle: -50,
                         heightCol: 'ind',
                         height: (v, r, s, zf) => 0.99 * r * gviz.sExpRev(v / s.max, -7, 0),
                     }),
                 ],
                 {
-                    pixNb: 20,
+                    pixNb: 25,
                     preprocess: (c) => {
                         c.ind_0_17 = +c.ind_0_3 + +c.ind_4_5 + +c.ind_6_10 + +c.ind_11_17
                         c.ind_18_64 = +c.ind_18_24 + +c.ind_25_39 + +c.ind_40_54 + +c.ind_55_64

diff --git a/src/style/IsoFenceStyle.js b/src/style/IsoFenceStyle.js
@@ -131,8 +131,16 @@ export class IsoFenceStyle extends Style {
         //draw in geo coordinates
         cg.setCanvasTransform()
 
-        //sort sides so that the north east ones are drown first
-        sides.sort((s1, s2) => (Math.hypot(s2.x, s2.y) - Math.hypot(s1.x, s1.y)))
+        //sort sides so that the back ones are drawn first. This depends on the angle
+        if (Math.abs(this.angle) <= 90)
+            //north east ones are drown first
+            sides.sort((s1, s2) => (Math.hypot(s2.x, s2.y) - Math.hypot(s1.x, s1.y)))
+        else if (this.angle > 90)
+            //north west ones are drown first
+            sides.sort((s1, s2) => (Math.hypot(s2.x - cg.extGeo.xMax, s2.y) - Math.hypot(s1.x - cg.extGeo.xMax, s1.y)))
+        else if (this.angle < 90)
+            //south west ones are drown first
+            sides.sort((s1, s2) => (Math.hypot(s2.x - cg.extGeo.xMax, s2.y - cg.extGeo.yMax) - Math.hypot(s1.x - cg.extGeo.xMax, s1.y - cg.extGeo.yMax)))
 
         //draw sides
         for (let s of sides) {