diff --git a/superx/xml/js/viz/viz_functions.js b/superx/xml/js/viz/viz_functions.js index de5621c..c6b60cd 100644 --- a/superx/xml/js/viz/viz_functions.js +++ b/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 + "
" + (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 + "
" + (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