world map parameterisiert

superx/xml/js/viz/viz_functions.js

@@ -2406,69 +2406,78 @@ var captionEmptyTarget=getCommonChartPropertyFromModel(myCommonChartProperties,"
 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 renderWorldMap(myCommonChartProperties, mySvg, data) {
+    const worldWidth = getCommonChartPropertyFromModel(myCommonChartProperties, "width");
+    const worldHeight = getCommonChartPropertyFromModel(myCommonChartProperties, "height");
+
+    const worldTooltip = d3.select(".vizTooltip");
+
+    const worldColor = d3.scaleSequential(d3.interpolateBlues)
+        .domain([0, 1]); // Domain matches the output of logColor
+
+    const worldSvg = d3.select("#world-map")
+        .attr("width", worldWidth)
+        .attr("height", worldHeight);
+
+    // Calculate the scale and translation dynamically based on width and height
+    const scale = Math.min(worldWidth / 6.28, worldHeight / 3.14);
+    const translate = [worldWidth / 2, worldHeight / 2];
+
+    const worldProjection = d3.geoMercator()
+        .scale(scale)
+        .translate(translate);
+
+    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]));
+
+        // Find the maximum value in the data
+        const maxValue = d3.max(worldData, d => d.value);
+
+        // Update the worldLogColor domain based on the maximum value
+        const worldLogColor = d3.scaleLog()
+            .domain([1, maxValue]) // Use the maximum value from the data
+            .range([0, 1]);
+
+        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=[];
@@ -2480,7 +2489,7 @@ for (var i = 0; i < data.length; i++)
 	}
 return myData;
 }
-    }
+    
 function makeSankeyD3(myCommonChartProperties,mySvg,data,metaData,chartElem)
 {
 // load the data