Indeed, there exists a method in your code that actively re-renders when the selected value from a radio button list is changed. The issue with your current implementation does not pertain to bubbles or radius; instead, it revolves around a simple data referencing problem - specifically, how to merge arrays of data from multiple sources in Javascript.
NOTE: A post structured this way may not be effective on SO. While providing a link to a fiddle or observable as a secondary resource is beneficial, your focus on SO should concentrate on addressing the specific problem at hand. Putting in this effort typically aids in pinpointing the solution during the troubleshooting process. In this resolution, I will guide you through my debugging steps.
To begin, let's examine your initial attempt, showcasing the value of the currently selected property from the radio buttons. This starting point demonstrates your comprehension of the code and how the data loads into memory. Prioritize tackling the data issue before delving into the rendering of bubbles, which you have already shown how to accomplish.
Your current tooltip content fails to exhibit the value for the selected property (in yellow); instead, it displays the label of the chosen option (blue underline). Let's delve deeper into this by analyzing the current content logic:
<div>
<h3>${hover.NAME}</h3>
<div style="margin: 10px">
<h4>CountryCode : ${hover.ISO_A2} </h4>
<h4> ContinentCode : ${hover.CONTINENT} </h>
<h4>${parameter } : ${d3.format(",")(hover[p])}</h4>
</div>
</div>
In this instance, 'hover' is an object containing properties 'ISO_A2' and 'CONTINENT,' which are not sourced from the referenced CSV file. These properties stem from the 'countries.json' file.
To verify this and explore available properties swiftly, we can adjust the tooltip content by adding the following lines:
<div>
<h3>${hover.NAME}</h3>
<div style="margin: 10px">
<h4>CountryCode : ${hover.ISO_A2} </h4>
<h4> ContinentCode : ${hover.CONTINENT} </h>
<h4>${parameter } : ${d3.format(",")(hover[p])}</h4>
<h4>Expected Property: ${p}</h4>
<smaller>${JSON.stringify(hover)}</smaller>
</div>
</div>
If data capture is required rather than mere visual inspection, consider using 'console.log()' over dumping data onto the screen.
The original intention was evidently to make the data accessible as part of the data feed at that juncture. However, no action has been taken to integrate these two datasets until now. Let's rectify that promptly.
I suggest utilizing 'forEach' to iterate over 'countries' and amend each entry to incorporate the corresponding record from the CSV file entirely. By injecting the CSV data into the array of countries, we eliminate lookup overhead when accessing the information, ensuring a more deterministic approach.
An example snippet illustrating this integration follows:
// Convert the TopoJSON to GeoJSON
countries = {
const geo = topojson.feature(map_layer, map_layer.objects.countries);
geo.features.forEach(feature => {
if(feature.geometry) {
feature.centroid = centroid(feature);
}
let code = feature.properties.ISO_A2;
let cData = country_data.find(x => x.CountryCode === code);
feature.properties.csv = cData ?? {
areasqkm: "",
population: "",
airports: "",
gdpgrowthrate: "",
inflationrate: "",
unemploymentrate: "",
popnbelowpoverty: "",
medianage: ""
};
return feature;
});
return geo;
}
Now that the data is incorporated, including a null record for streamlined error handling, cross-check its functionality by updating the tooltip content as follows:
<div>
<h3>${hover.NAME}</h3>
<div style="margin: 10px">
<h4>CountryCode : ${hover.ISO_A2} </h4>
<h4> ContinentCode : ${hover.CONTINENT} </h>
<h4>${parameter } : ${d3.format(",")(hover.csv[p])}</h4>
<hr style="padding:0px"/>
<smaller>
Area Sqkm: ${d3.format(",")(hover.csv['areasqkm'])}<br/>
Population: ${d3.format(",")(hover.csv['population'])}<br/>
Airports: ${hover.csv['airports']}<br/>
GDP Growth Rate: ${d3.format(",")(hover.csv['gdpgrowthrate'])}<br/>
Inflation Rate: ${d3.format(",")(hover.csv['inflationrate'])}<br/>
Unemployment Rate: ${d3.format(",")(hover.csv['unemploymentrate'])}<br/>
Pop. Below Poverty: ${d3.format(",")(hover.csv['popnbelowpoverty'])}<br/>
Median Age: ${hover.csv['medianage']}<br/>
<smaller>
</div>
</div>
Lastly, adapt property mapping paths in your bubble logic based on this modified setup. Mapping values to specific size domains often proves more practical than direct proportional shaping due to potential visibility issues with excessively small or large elements on the map.
For further insights into executing this methodology effectively, feel free to explore additional resources beyond the scope of this discussion space.