|
|
@ -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
|
|
|
|