I have a map of Africa which I loaded using D3 which features several columns including a column named ADMIN which features each country’s name. I’m trying to highlight the country on my map that is selected in my dropdown. For example if I select Algeria in my drop down, Algeria will highlight on my map. The map itself loads fine as well as the dropdown. I’m just having trouble coordinating the interaction between the dropdown function and the highlight function so that the selected country actually highlights.
//begin script when window loads
window.onload = setMap();
var attrArray = ["Algeria","Angola","Benin"];
var expressed = attrArray[0];
//set up map
function setMap(){
//map frame dimensions
var width = 1200,
height = 1000;
//create new svg container for the map
var map = d3.select("body")
.append("svg")
.attr("class", "map")
.attr("width", width)
.attr("height", height);
//create Albers equal area conic projection centered on France
var projection = d3.geoOrthographic()
.scale(600)
.translate([width / 2, height / 2.7])
.clipAngle(85)
.precision(.1);
var path = d3.geoPath()
.projection(projection)
var graticule = d3.geoGraticule()
.step([5, 5]); //place graticule lines every 5 degrees of longitude and latitude
//create graticule background
var gratBackground = map.append("path")
.datum(graticule.outline()) //bind graticule background
.attr("class", "gratBackground") //assign class for styling
.attr("d", path) //project graticule
var gratLines = map.selectAll(".gratLines")
.data(graticule.lines()) //bind graticule lines to each element to be created
.enter() //create an element for each datum
.append("path") //append each element to the svg as a path element
.attr("class", "gratLines") //assign class for styling
.attr("d", path); //project graticule lines
//use queue to parallelize asynchronous data loading
d3.queue()
.defer(d3.csv, "data/AfricaCountries.csv") //load attributes from csv
.defer(d3.json, "data/world.topojson") //load background spatial data
.defer(d3.json, "data/Africa.topojson")
.await(callback);
function callback(error, csvData, world, africa){
//translate europe TopoJSON
var basemapCountries = topojson.feature(world, world.objects.ne_10m_admin_0_countries),
africaCountries= topojson.feature(africa, africa.objects.ne_10m_admin_0_countries).features;
//select graticule elements that will be created
//add Europe countries to map
var countries = map.append("path")
.datum(basemapCountries)
.attr("class", "countries")
.attr("d", path);
//add Africa countries to map
var regions = map.selectAll(".regions")
.data(africaCountries)
.enter()
.append("path")
.attr("class", function(d){
return "regions " + d.properties.ADMIN;
})
.attr("d", path);
createDropdown(csvData);
};
function createDropdown(csvData){
//add select element
var dropdown = d3.select("body")
.append("select")
.attr("class", "dropdown")
.on("change", function(){
highlight(d.properties);
});
//add initial option
var titleOption = dropdown.append("option")
.attr("class", "titleOption")
.attr("disabled", "true")
.text("Select Country");
//add attribute name options
var attrOptions = dropdown.selectAll("attrOptions")
.data(attrArray)
.enter()
.append("option")
.attr("value", function(d){ return d })
.text(function(d){ return d });
};
//function to highlight enumeration units and bars
function highlight(props){
//change stroke
var selected = d3.selectAll("." + props.ADMIN)
.style("stroke", "blue")
.style("stroke-width", "2");
};
};