Issue on legend and event on climate change burden of disease visualization

let climate_daly_data = [
        {region: "Low-and-middle-income countries of the African Region", deaths: 57},
        {region: "Low-and-middle-income countries of the Americas", deaths: 2},
        {region: "Low-and-middle-income countries of the Eastern Mediterranean Region", deaths: 20},
         {region: "Low-and-middle-income countries of the European Region", deaths: 0.67},
         {region: "Low-and-middle-income countries of the South-East Asia Region", deaths: 58},
        {region: "Low-and-middle-income countries of the Western Pacific Region", deaths: 4},
        {region: "High income countries", deaths: 0.23}
 ];

let divSelection = d3.select("#viz").
selectAll("div");
divSelection.
data(climate_daly_data)
.enter()
.append("div")
  .text((d)=>{return d.region+": "+d.deaths})
  .attr("class","bar")
.style("width",(d)=>{ return deaths * 8 + "px"});
divSelection.on("mouseover",(d,i)=> {
  toggleClass(i+1,true);
}).on("mouseout",(d,i)=>{
  toggleClass(i+1,false)
});

let listSelection = d3.select("#legend").
selectAll("li");

listSelection.data('climate_daly_data')
.enter()
  .append("li")
.text(function(d){
      return d.region + ": " + d.deaths
      }
);

listSelection.on("mouseover",(d,i)=> {
  toggleClass(i+1,true);
}).on("mouseout",(d,i)=>{
  toggleClass(i+1,false)
});

let toggleClass = (i,toggle) => {
   d3.select("#viz div:nth-child("+ i +")").classed("highlightBar",toggle);
   d3.select("#legend li:nth-child("+ i +")").classed("highlightText",toggle);
};





  

I followed the course and steps but cannot be able to do event and legend functionality.
The project link : climate change burden of disease visualization
Help me…

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.