Browse Source

world map parameterisiert

viz_worldmap
Alexander Bien 5 months ago
parent
commit
45cc4d7d9e
  1. 33
      superx/xml/js/viz/viz_functions.js

33
superx/xml/js/viz/viz_functions.js

@ -2406,30 +2406,31 @@ var captionEmptyTarget=getCommonChartPropertyFromModel(myCommonChartProperties,"
renderWorldMap(myCommonChartProperties,mySvg,data); 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 worldLogColor = d3.scaleLog()
.domain([1, 41227]) // Adjust this domain to fit your data range
.range([0, 1]);
const worldSvg = d3.select("#world-map") const worldSvg = d3.select("#world-map")
.attr("width", worldWidth) .attr("width", worldWidth)
.attr("height", worldHeight); .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() const worldProjection = d3.geoMercator()
.scale(100) .scale(scale)
.translate([worldWidth / 2, worldHeight / 1.5]); .translate(translate);
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 // Load the world data files
Promise.all([ Promise.all([
d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson"), d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson"),
@ -2441,6 +2442,14 @@ Promise.all([
]).then(([worldGeojson, worldData]) => { ]).then(([worldGeojson, worldData]) => {
const worldDataMap = new Map(worldData.map(d => [d.iso3, d.value])); 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") mySvg.append("g")
.selectAll("path") .selectAll("path")
.data(worldGeojson.features) .data(worldGeojson.features)
@ -2468,7 +2477,7 @@ Promise.all([
}).catch(error => { }).catch(error => {
console.error('Error loading or parsing data:', error); console.error('Error loading or parsing data:', error);
}); });
}
function getWorldMapData(data) function getWorldMapData(data)
{ {
var myData=[]; var myData=[];
@ -2480,7 +2489,7 @@ for (var i = 0; i < data.length; i++)
} }
return myData; return myData;
} }
}
function makeSankeyD3(myCommonChartProperties,mySvg,data,metaData,chartElem) function makeSankeyD3(myCommonChartProperties,mySvg,data,metaData,chartElem)
{ {
// load the data // load the data

Loading…
Cancel
Save