From 8812dc9ce5e68c10c97fd311aaf1c6173be3eb7b Mon Sep 17 00:00:00 2001
From: Daniel Quathamer <danielq@memtext.de>
Date: Thu, 20 Jun 2024 08:23:32 +0200
Subject: [PATCH] Worldmap erster Entwurf im Diagrammassistent #8

---
 .../viz/schluesseltabellen/viz_type.unl       |  1 +
 .../schluesseltabellen/viz_type_property.unl  |  1 -
 superx/style/sx_viz_muster.css                | 14 +++-
 superx/xml/js/viz/viz_functions.js            | 84 +++++++++++++++++++
 superx/xml/viz_html_chart.xsl                 |  1 +
 5 files changed, 99 insertions(+), 2 deletions(-)

diff --git a/src-modules/module/viz/schluesseltabellen/viz_type.unl b/src-modules/module/viz/schluesseltabellen/viz_type.unl
index 4422046..26cde59 100644
--- a/src-modules/module/viz/schluesseltabellen/viz_type.unl
+++ b/src-modules/module/viz/schluesseltabellen/viz_type.unl
@@ -9,3 +9,4 @@
 10^text^Wertelabel^2^ ^ ^^
 11^bar_x_d3^Balken (horizontal)^1^^^H^
 12^sankey^Sankey^1^ ^^H^
+13^worldmap^Weltkarte^1^ ^^H^
diff --git a/src-modules/module/viz/schluesseltabellen/viz_type_property.unl b/src-modules/module/viz/schluesseltabellen/viz_type_property.unl
index aac9ad9..44720e6 100644
--- a/src-modules/module/viz/schluesseltabellen/viz_type_property.unl
+++ b/src-modules/module/viz/schluesseltabellen/viz_type_property.unl
@@ -386,4 +386,3 @@
 406^12^5^20^0^
 407^13^73^1^10^
 408^13^95^1^1^
-409^13^96^0^5^
diff --git a/superx/style/sx_viz_muster.css b/superx/style/sx_viz_muster.css
index 449263e..5ba6b8e 100644
--- a/superx/style/sx_viz_muster.css
+++ b/superx/style/sx_viz_muster.css
@@ -54,4 +54,16 @@
     font-size: 0.8rem;
     color: hsl(0, 0%, 29%); }
 
-	    
+.vizTooltip {
+            position: absolute;
+            text-align: center;
+            width: 60px;
+            height: 28px;
+            padding: 2px;
+            font: 12px sans-serif;
+            background: lightsteelblue;
+            border: 0px;
+            border-radius: 8px;
+            pointer-events: none;
+        }
+  
diff --git a/superx/xml/js/viz/viz_functions.js b/superx/xml/js/viz/viz_functions.js
index cf6d667..de5621c 100644
--- a/superx/xml/js/viz/viz_functions.js
+++ b/superx/xml/js/viz/viz_functions.js
@@ -1714,6 +1714,9 @@ switch (chartType)
 	case "sankey":
 		mySvg=makeSankeyD3(currentChartModel.chartPropertiesUsed,mySvg,data,rsColumnMetaData[chartElem.datasource],chartElem);
 	    break;
+	case "worldmap":
+		mySvg=makeWorldmapD3(currentChartModel.chartPropertiesUsed,mySvg,data,rsColumnMetaData[chartElem.datasource],chartElem);
+	    break;
 	default:
 		alert("Unknown chart type");
 	break;
@@ -2396,7 +2399,88 @@ for (let i = 1; i < 4; i++) {
 }
 }
 
+function makeWorldmapD3(myCommonChartProperties,mySvg,data,metaData,chartElem)
+{
+// load the data
+var captionEmptyTarget=getCommonChartPropertyFromModel(myCommonChartProperties,"null_value_mask");
+renderWorldMap(myCommonChartProperties,mySvg,data);
+	
+}
+function renderWorldMap(myCommonChartProperties,mySvg,data)
+{
+const worldWidth = 960;
+const worldHeight = 600;
+
+const worldTooltip = d3.select(".vizTooltip");
+
+const worldColor = d3.scaleSequential(d3.interpolateBlues)
+    .domain([0, 1]); // Domain matches the output of logColor
+
+const worldLogColor = d3.scaleLog()
+    .domain([1, 41227]) // Adjust this domain to fit your data range
+    .range([0, 1]);
+
+const worldSvg = d3.select("#world-map")
+    .attr("width", worldWidth)
+    .attr("height", worldHeight);
+
+const worldProjection = d3.geoMercator()
+    .scale(100)
+    .translate([worldWidth / 2, worldHeight / 1.5]);
+
+const worldPath = d3.geoPath().projection(worldProjection);
+var d=getWorldMapData(data);
+// Load the world data files
+Promise.all([
+    d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson"),
+    /*d3.csv("/superx/viz_worldmap/data.csv", d => ({
+        iso3: d.iso3,
+        value: +d.value
+    }))*/
+    d
+]).then(([worldGeojson, worldData]) => {
+    const worldDataMap = new Map(worldData.map(d => [d.iso3, d.value]));
 
+    mySvg.append("g")
+        .selectAll("path")
+        .data(worldGeojson.features)
+        .enter().append("path")
+        .attr("d", worldPath)
+        .attr("fill", d => {
+            const value = worldDataMap.get(d.id); // Use `d.id` to access ISO 3 codes
+            if (value === 0) return "#ccc"; // Handle zero values separately
+            return value ? worldColor(worldLogColor(value)) : "#ccc";
+        })
+        .on("mouseover", function (event, d) {
+            const value = worldDataMap.get(d.id);
+            worldTooltip.transition()
+                .duration(200)
+                .style("opacity", .9);
+            worldTooltip.html(d.properties.name + "<br>" + (value ? value : "No data"))
+                .style("left", (event.pageX) + "px")
+                .style("top", (event.pageY - 28) + "px");
+        })
+        .on("mouseout", function () {
+            worldTooltip.transition()
+                .duration(500)
+                .style("opacity", 0);
+        });
+}).catch(error => {
+    console.error('Error loading or parsing data:', error);
+});
+
+function getWorldMapData(data)
+{
+var myData=[];
+
+var zs="";
+for (var i = 0; i < data.length; i++)
+	{
+	myData[i] = { "iso3": data[i].dimension1, "value": data[i].measure1 };
+	}
+return myData;
+}
+    }
 function makeSankeyD3(myCommonChartProperties,mySvg,data,metaData,chartElem)
 {
 // load the data
diff --git a/superx/xml/viz_html_chart.xsl b/superx/xml/viz_html_chart.xsl
index d227548..358e250 100644
--- a/superx/xml/viz_html_chart.xsl
+++ b/superx/xml/viz_html_chart.xsl
@@ -81,6 +81,7 @@ xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:HtmlUtils="de.superx.util
 <h1><xsl:value-of select="/ergebnisse/makro/name" /></h1>
 </xsl:if>
 <p></p>
+<div class="vizTooltip" style="opacity:0;"></div>
 <xsl:call-template name="buildVizMetadata" />
 
 <!-- end Kopf-->