migrate EUR demo to gridviz V3

.prettierrc

@@ -3,7 +3,7 @@
     "tabWidth": 4,
     "semi": false,
     "singleQuote": true,
-    "printWidth": 110,
+    "printWidth": 120,
     "bracketSpacing": true,
     "bracketSameLine": false
 }

examples/demos/demos.css

@@ -0,0 +1,67 @@
+html,
+body {
+    height: 100%; /* Ensure the parent elements have a height so that the map can take up 100% correctly */
+    margin: 0; /* Remove default margins to prevent scrolling */
+    overflow: hidden; /* Prevent potential scrollbars */
+    font-family: Arial, sans-serif; /* Consistent, clean font */
+}
+
+#viz-container {
+    height: 100%;
+    width: 100%;
+}
+
+h2 {
+    font-size: 21px;
+    margin-bottom: 10px;
+    color: #222; /* Slightly darker color for better readability */
+}
+
+.panel {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    padding: 15px; /* More comfortable spacing */
+    background-color: #fff;
+    font-size: 0.9em;
+    color: #333;
+    z-index: 1000;
+    overflow: auto;
+    border: solid 1px rgba(0, 0, 0, 0.2); /* Subtle darker border for better definition */
+    border-radius: 8px; /* Rounded corners for a modern look */
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* Cleaner shadow for depth */
+}
+
+.first-title {
+    margin-top: 0;
+}
+
+.radio-group input,
+.checkbox-group input {
+    margin-right: 5px;
+}
+
+.radio-group,
+.checkbox-group {
+    margin-bottom: 10px; /* Separation between groups */
+}
+
+hr {
+    border: none;
+    border-top: 1px solid rgba(0, 0, 0, 0.1); /* Light divider line */
+    margin: 10px 0;
+}
+
+.source {
+    font-size: 0.8em;
+    color: #555;
+}
+
+.source a {
+    color: #007bff;
+    text-decoration: none;
+}
+
+.source a:hover {
+    text-decoration: underline;
+}

package.json

@@ -1,6 +1,6 @@
 {
     "name": "gridviz",
-    "version": "3.0.15",
+    "version": "3.0.16",
     "description": "Visualization tool for gridded statistics",
     "keywords": [
         "statistics",

src/core/Map.js

@@ -98,7 +98,7 @@ export class Map {
          * @type {HTMLCanvasElement|null} */
         this.canvasSave = null
 
-        this.selectionRectangleColor = opts.selectionRectangleColor || 'red'
+        this.selectionRectangleColor = opts.selectionRectangleColor || '#FF6347'
         this.selectionRectangleWidthPix = opts.selectionRectangleWidthPix || (() => 4) //(r,z) => {}
 
         // transparent background (e.g. leaflet) 'red painting' fix

src/utils/utils.js

@@ -7,7 +7,7 @@
  * @param {number} v the value
  * @param {Array.<number>} breaks the breaks
  * @returns The class id, from 0 to breaks.length
- * @deprecated use getClassifier instead
+ * @deprecated use getClassifier instead.
  */
 export function getClass(v, breaks) {
     if (!breaks) return