world map parameterisiert

superx/xml/js/viz/viz_functions.js

@@ -2406,41 +2406,50 @@ var captionEmptyTarget=getCommonChartPropertyFromModel(myCommonChartProperties,"
 renderWorldMap(myCommonChartProperties,mySvg,data);
 	
 }
-function renderWorldMap(myCommonChartProperties,mySvg,data)
+function renderWorldMap(myCommonChartProperties, mySvg, data) {
-{
+    const worldWidth = getCommonChartPropertyFromModel(myCommonChartProperties, "width");
-const worldWidth = 960;
+    const worldHeight = getCommonChartPropertyFromModel(myCommonChartProperties, "height");
-const worldHeight = 600;
 
-const worldTooltip = d3.select(".vizTooltip");
+    const worldTooltip = d3.select(".vizTooltip");
 
-const worldColor = d3.scaleSequential(d3.interpolateBlues)
+    const worldColor = d3.scaleSequential(d3.interpolateBlues)
         .domain([0, 1]); // Domain matches the output of logColor
 
-const worldLogColor = d3.scaleLog()
+    const worldSvg = d3.select("#world-map")
-    .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()
+    // Calculate the scale and translation dynamically based on width and height
-    .scale(100)
+    const scale = Math.min(worldWidth / 6.28, worldHeight / 3.14);
-    .translate([worldWidth / 2, worldHeight / 1.5]);
+    const translate = [worldWidth / 2, worldHeight / 2];
+
+    const worldProjection = d3.geoMercator()
+        .scale(scale)
+        .translate(translate);
 
-const worldPath = d3.geoPath().projection(worldProjection);
+    const worldPath = d3.geoPath().projection(worldProjection);
-var d=getWorldMapData(data);
+
-// Load the world data files
+    var d = getWorldMapData(data);
-Promise.all([
+
+    // 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]) => {
+    ]).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)
@@ -2465,10 +2474,10 @@ Promise.all([
                     .duration(500)
                     .style("opacity", 0);
             });
-}).catch(error => {
+    }).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