Worldmap erster Entwurf im Diagrammassistent #8

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^

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^

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;
+        }
+  

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

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-->