assets/js/app.js
// function to update circles group with new tooltip
function to update circles group with new tooltip
function to update circles group with new tooltip
function updateToolTip(xaxis,yaxis, circlesGroup) {
  var xlabel;
  var ylabel;
  var toolTip = d3.tip()
    .attr("class", "tooltip")
    .offset([80, -60])
    .html(function(d) {
      if (xaxis === "poverty") {
        xlabel = "Poverty:";
        if (yaxis === "healthcare"){
          ylabel = "healthcare"
          return (`${d.abbr}<br>${xlabel} ${d[xaxis]}%<br>${ylabel} ${d[yaxis]}%`);
        }
        if (yaxis === "obesity"){
          ylabel = "Obesity"
          return (`${d.abbr}<br>${xlabel} ${d[xaxis]}%<br>${ylabel} ${d[yaxis]}%`);
        }
        if (yaxis === "smokes"){
          ylabel = "Smokers"
          return (`${d.abbr}<br>${xlabel} ${d[xaxis]}%<br>${ylabel} ${d[yaxis]}%`);
        }
      }
      if (xaxis === "income") {
        xlabel = "Income:";
          if (yaxis === "healthcare"){
            ylabel = "healthcare"
            return (`${d.abbr}<br>${xlabel} ${d[xaxis]}<br>${ylabel} ${d[yaxis]}%`);
          }
          if (yaxis === "obesity"){
            ylabel = "Obesity"
            return (`${d.abbr}<br>${xlabel} ${d[xaxis]}<br>${ylabel} ${d[yaxis]}%`);
          }
          if (yaxis === "smokes"){
            ylabel = "Smokers"
            return (`${d.abbr}<br>${xlabel} ${d[xaxis]}<br>${ylabel} ${d[yaxis]}%`);
          }
      }
      if (xaxis === "age") {
        xlabel = "Age:";
          if (yaxis === "healthcare"){
            ylabel = "healthcare"
            return (`${d.abbr}<br>${xlabel} ${d[xaxis]}%<br>${ylabel} ${d[yaxis]}%`);
          }
          if (yaxis === "obesity"){
            ylabel = "Obesity"
            return (`${d.abbr}<br>${xlabel} ${d[xaxis]}%<br>${ylabel} ${d[yaxis]}%`);
          }
          if (yaxis === "smokes"){
            ylabel = "Smokers"
            return (`${d.abbr}<br>${xlabel} ${d[xaxis]}%<br>${ylabel} ${d[yaxis]}%`);
          }
      }
    });
  circlesGroup.call(toolTip);
  circlesGroup.on("mouseover", function(data) {
    toolTip.show(data);
  })
    .on("mouseout", function(data, index) {
      toolTip.hide(data);
    });
  return circlesGroup;
}
function updateToolTip ( xaxis , yaxis , circlesGroup ) { var xlabel ; var ylabel ; var toolTip = d3 . tip ( ) . attr ( "class" , "tooltip" ) . offset ( [ 80 , - 60 ] ) . html ( function ( d ) { if ( xaxis === "poverty" ) { xlabel = "Poverty:" ; if ( yaxis === "healthcare" ) { ylabel = "healthcare" return ( ` ${ d . abbr } ${ xlabel } ${ d [ xaxis ] } ${ ylabel } ${ d [ yaxis ] } ` ) ; } if ( yaxis === "obesity" ) { ylabel = "Obesity" return ( ` ${ d . abbr } ${ xlabel } ${ d [ xaxis ] } ${ ylabel } ${ d [ yaxis ] } ` ) ; } if ( yaxis === "smokes" ) { ylabel = "Smokers" return ( ` ${ d . abbr } ${ xlabel } ${ d [ xaxis ] } ${ ylabel } ${ d [ yaxis ] } ` ) ; } } if ( xaxis === "income" ) { xlabel = "Income:" ; if ( yaxis === "healthcare" ) { ylabel = "healthcare" return ( ` ${ d . abbr } ${ xlabel } ${ d [ xaxis ] } ${ ylabel } ${ d [ yaxis ] } ` ) ; } if ( yaxis === "obesity" ) { ylabel = "Obesity" return ( ` ${ d . abbr } ${ xlabel } ${ d [ xaxis ] } ${ ylabel } ${ d [ yaxis ] } ` ) ; } if ( yaxis === "smokes" ) { ylabel = "Smokers" return ( ` ${ d . abbr } ${ xlabel } ${ d [ xaxis ] } ${ ylabel } ${ d [ yaxis ] } ` ) ; } } if ( xaxis === "age" ) { xlabel = "Age:" ; if ( yaxis === "healthcare" ) { ylabel = "healthcare" return ( ` ${ d . abbr } ${ xlabel } ${ d [ xaxis ] } ${ ylabel } ${ d [ yaxis ] } ` ) ; } if ( yaxis === "obesity" ) { ylabel = "Obesity" return ( ` ${ d . abbr } ${ xlabel } ${ d [ xaxis ] } ${ ylabel } ${ d [ yaxis ] } ` ) ; } if ( yaxis === "smokes" ) { ylabel = "Smokers" return ( ` ${ d . abbr } ${ xlabel } ${ d [ xaxis ] } ${ ylabel } ${ d [ yaxis ] } ` ) ; } } } ) ; circlesGroup . call ( toolTip ) ; circlesGroup . on ( "mouseover" , function ( data ) { toolTip . show ( data ) ; } ) . on ( "mouseout" , function ( data , index ) { toolTip . hide ( data ) ; } ) ; return circlesGroup ; }
function to update circles group with new tooltip
function to update circles group with new tooltip
// onmouseout event