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)
+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
-    .domain([0, 1]); // Domain matches the output of logColor
+
-
+    const worldSvg = d3.select("#world-map")
-const worldLogColor = d3.scaleLog()
+        .attr("width", worldWidth)
-    .domain([1, 41227]) // Adjust this domain to fit your data range
+        .attr("height", worldHeight);
-    .range([0, 1]);
+
-
+    // Calculate the scale and translation dynamically based on width and height
-const worldSvg = d3.select("#world-map")
+    const scale = Math.min(worldWidth / 6.28, worldHeight / 3.14);
-    .attr("width", worldWidth)
+    const translate = [worldWidth / 2, worldHeight / 2];
-    .attr("height", worldHeight);
+
-
+    const worldProjection = d3.geoMercator()
-const worldProjection = d3.geoMercator()
+        .scale(scale)
-    .scale(100)
+        .translate(translate);
-    .translate([worldWidth / 2, worldHeight / 1.5]);
+
-
+    const worldPath = d3.geoPath().projection(worldProjection);
-const worldPath = d3.geoPath().projection(worldProjection);
+
-var d=getWorldMapData(data);
+    var d = getWorldMapData(data);
-// Load the world data files
+
-Promise.all([
+    // Load the world data files
-    d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson"),
+    Promise.all([
-    /*d3.csv("/superx/viz_worldmap/data.csv", d => ({
+        d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson"),
-        iso3: d.iso3,
+        /*d3.csv("/superx/viz_worldmap/data.csv", d => ({
-        value: +d.value
+            iso3: d.iso3,
-    }))*/
+            value: +d.value
-    d
+        }))*/
-]).then(([worldGeojson, worldData]) => {
+        d
-    const worldDataMap = new Map(worldData.map(d => [d.iso3, d.value]));
+    ]).then(([worldGeojson, worldData]) => {
-
+        const worldDataMap = new Map(worldData.map(d => [d.iso3, d.value]));
-    mySvg.append("g")
+
-        .selectAll("path")
+        // Find the maximum value in the data
-        .data(worldGeojson.features)
+        const maxValue = d3.max(worldData, d => d.value);
-        .enter().append("path")
+
-        .attr("d", worldPath)
+        // Update the worldLogColor domain based on the maximum value
-        .attr("fill", d => {
+        const worldLogColor = d3.scaleLog()
-            const value = worldDataMap.get(d.id); // Use `d.id` to access ISO 3 codes
+            .domain([1, maxValue]) // Use the maximum value from the data
-            if (value === 0) return "#ccc"; // Handle zero values separately
+            .range([0, 1]);
-            return value ? worldColor(worldLogColor(value)) : "#ccc";
+
-        })
+        mySvg.append("g")
-        .on("mouseover", function (event, d) {
+            .selectAll("path")
-            const value = worldDataMap.get(d.id);
+            .data(worldGeojson.features)
-            worldTooltip.transition()
+            .enter().append("path")
-                .duration(200)
+            .attr("d", worldPath)
-                .style("opacity", .9);
+            .attr("fill", d => {
-            worldTooltip.html(d.properties.name + "<br>" + (value ? value : "No data"))
+                const value = worldDataMap.get(d.id); // Use `d.id` to access ISO 3 codes
-                .style("left", (event.pageX) + "px")
+                if (value === 0) return "#ccc"; // Handle zero values separately
-                .style("top", (event.pageY - 28) + "px");
+                return value ? worldColor(worldLogColor(value)) : "#ccc";
-        })
+            })
-        .on("mouseout", function () {
+            .on("mouseover", function (event, d) {
-            worldTooltip.transition()
+                const value = worldDataMap.get(d.id);
-                .duration(500)
+                worldTooltip.transition()
-                .style("opacity", 0);
+                    .duration(200)
-        });
+                    .style("opacity", .9);
-}).catch(error => {
+                worldTooltip.html(d.properties.name + "<br>" + (value ? value : "No data"))
-    console.error('Error loading or parsing data:', error);
+                    .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