assets/js/app.js
// function used for updating circles group with new tooltip for xAxis change
function used for updating circles group with new tooltip for xAxis change
function used for updating circles group with new tooltip for xAxis change
function updateXToolTip(chosenXAxis, circlesGroup, abbrGroup) {
  var xlabel;
  var ylabel = chosenYAxis;
  if (chosenXAxis === "poverty") {
    xlabel = "Poverty:";
  }
  else if (chosenXAxis === "age") {
    xlabel = "Age:";
  }
  else {
    xlabel = "Income:"; 
  }
  var toolTip = d3.tip()
    .attr("class", "d3-tip")
    .offset([50, -80])
    .html(function(d) {
      return (`${d.state}<br>${xlabel} ${d[chosenXAxis]}<br>${ylabel} ${d[chosenYAxis]}`);
    });
  circlesGroup.call(toolTip);
  abbrGroup.call(toolTip);
  circlesGroup.on("mouseover", function(data) {
    toolTip.show(data);
  })
    .on("mouseout", function(data, index) {
      toolTip.hide(data);
    });
  abbrGroup.on("mouseover", function(data) {
    toolTip.show(data);
  })
    .on("mouseout", function(data, index) {
        toolTip.hide(data);
    });
  return circlesGroup;
}
function updateXToolTip ( chosenXAxis , circlesGroup , abbrGroup ) { var xlabel ; var ylabel = chosenYAxis ; if ( chosenXAxis === "poverty" ) { xlabel = "Poverty:" ; } else if ( chosenXAxis === "age" ) { xlabel = "Age:" ; } else { xlabel = "Income:" ; } var toolTip = d3 . tip ( ) . attr ( "class" , "d3-tip" ) . offset ( [ 50 , - 80 ] ) . html ( function ( d ) { return ( ` ${ d . state } ${ xlabel } ${ d [ chosenXAxis ] } ${ ylabel } ${ d [ chosenYAxis ] } ` ) ; } ) ; circlesGroup . call ( toolTip ) ; abbrGroup . call ( toolTip ) ; circlesGroup . on ( "mouseover" , function ( data ) { toolTip . show ( data ) ; } ) . on ( "mouseout" , function ( data , index ) { toolTip . hide ( data ) ; } ) ; abbrGroup . on ( "mouseover" , function ( data ) { toolTip . show ( data ) ; } ) . on ( "mouseout" , function ( data , index ) { toolTip . hide ( data ) ; } ) ; return circlesGroup ; }
function used for updating circles group with new tooltip for xAxis change
function used for updating circles group with new tooltip for xAxis change
// onmouseout event // onmouseout event