D3_data_journalism/assets/js/app.js
// Function to call tool tip based on selected axes
Function to call tool tip based on selected axes
Function to call tool tip based on selected axes
function updateToolTip(chosenXAxis, chosenYAxis, circlesGroup, textGroup) {
  if (chosenXAxis === "poverty") {
    var xLabel = "Poverty";
  }
  else if (chosenXAxis === "age") {
    var xLabel = "Median Age";
  }
  else if (chosenXAxis === "income") {
    var xLabel = "Median Income";
  }
  if (chosenYAxis === "healthcare") {
    var yLabel = "No Healthcare";
  }
  else if (chosenYAxis === "smokes") {
    var yLabel = "Smokers";
  }
  else if (chosenYAxis === "obesity") {
    var yLabel = "Obesity";
  }
  var toolTip = d3.tip()
    .attr("class", "d3-tip")
    .offset([-10, 0])
    .html(function(d) {
      return (`<strong>${d.state}</strong><br>
              ${xLabel}: ${formatXTip(d[chosenXAxis], chosenXAxis)}<br>
              ${yLabel}: ${d[chosenYAxis]}%`)
    });
  circlesGroup.call(toolTip);
  circlesGroup
    .on("mouseover", toolTip.show)
    .on("mouseout", toolTip.hide);
  textGroup
    .on("mouseover", toolTip.show)
    .on("mouseout", toolTip.hide);
  return circlesGroup;
}
function updateToolTip ( chosenXAxis , chosenYAxis , circlesGroup , textGroup ) { if ( chosenXAxis === "poverty" ) { var xLabel = "Poverty" ; } else if ( chosenXAxis === "age" ) { var xLabel = "Median Age" ; } else if ( chosenXAxis === "income" ) { var xLabel = "Median Income" ; } if ( chosenYAxis === "healthcare" ) { var yLabel = "No Healthcare" ; } else if ( chosenYAxis === "smokes" ) { var yLabel = "Smokers" ; } else if ( chosenYAxis === "obesity" ) { var yLabel = "Obesity" ; } var toolTip = d3 . tip ( ) . attr ( "class" , "d3-tip" ) . offset ( [ - 10 , 0 ] ) . html ( function ( d ) { return ( ` ${ d . state } ${ xLabel } ${ formatXTip ( d [ chosenXAxis ] , chosenXAxis ) } ${ yLabel } ${ d [ chosenYAxis ] } ` ) } ) ; circlesGroup . call ( toolTip ) ; circlesGroup . on ( "mouseover" , toolTip . show ) . on ( "mouseout" , toolTip . hide ) ; textGroup . on ( "mouseover" , toolTip . show ) . on ( "mouseout" , toolTip . hide ) ; return circlesGroup ; }
Function to call tool tip based on selected axes
Function to call tool tip based on selected axes
// Format x-axis marker labels on hover // Format y-axis marker labels on hover // Create tool tip for marker labels // Call tool tip // Show tool tip on hover over circle marker // Show tool tip on hover over text within circle marker