'Mouseover event for barchart in D3

I am having trouble creating a mouseOver event for my D3 visualization for a class. I have a bar chart I created and want to make it so when I mouse over each bar, it displays a small div with the actual values of the bar inside. I have created the barchart I want and am trying integrate a section of code from one of our earlier labs in class, where we added this hover functionality to the barchart visualization but I am just not able to get anything to work.

Here is the code for my index.html with a working graph

<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>
<div style ="float:right; padding-right:300px" id="tooltip"></div>


<script>
// set the dimensions and margins of the graph
var margin = {top: 30, right: 30, bottom: 70, left: 60},
    width = 460 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
  .append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

// Parse the Data
d3.csv("Embiid3pt.csv", function(data) {

// X axis
var x = d3.scaleBand()
  .range([ 0, width ])
  .domain(data.map(function(d) { return d.player; }))
  .padding(0.2);
svg.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x))
  .selectAll("text")
    .attr("transform", "translate(-10,0)rotate(-45)")
    .style("text-anchor", "end");

    svg.append("text")             
    .attr("transform",
          "translate(" + (width/2) + " ," + 
                          (height + margin.top + 25) + ")")
    .style("text-anchor", "middle")
    .text("Player Name");

// Add Y axis
var y = d3.scaleLinear()
  .domain([0, 0.7])
  .range([ height, 0]);
svg.append("g")
  .call(d3.axisLeft(y));

   // text label for the y axis
   svg.append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 0 - margin.left)
      .attr("x",0 - (height / 2))
      .attr("dy", "1em")
      .style("text-anchor", "middle")
      .text("Three Point Percentage");  

// Bars
svg.selectAll("mybar")
  .data(data)
  .enter()
  .append("rect")
    .attr("x", function(d) { return x(d.player); })
    .attr("y", function(d) { return y(d.percentage); })
    .attr("width", x.bandwidth())
    .attr("height", function(d) { return height - y(d.percentage); })
    .attr("fill", "#69b3a2")


})

</script>

And here is the CSV data I'm loading in:

player,percentage
Joel Embiid,0.377
Bam Adebayo,0.143
Clint Capela,0
Anthony Davis,0.26
Nikola Vucevic,0.339
Deandre Ayton,0.250
Jarrett Allen,0.189
Kristaps Porzingis,0.353

Finally, here is the section of code that we used earlier in the course to give the mouseover event to the bars of the bar chart:

let bars = chart.append('g')
                .selectAll("rect")
                .data(data)
                .join("rect")
                    .attr("x", function (d) { return x(d.name); } )
                    .attr("y", function (d) { return y(d.value); } )
                    .attr("fill", function(d) { return ordinal(d.name) })
                    .attr("width", x.bandwidth()) //use the bandwidth returned from our X scale
                    .attr("height", function(d) { return height - y(+d.value); }) //full height - scaled y length
                    .style("opacity", 0.75)

            bars //let's attach an event listener to points (all svg circles)
         .on('mouseover', (event,d) => { //when mouse is over point
               d3.select(event.currentTarget) //add a stroke to highlighted point 
                   .style("stroke", "black");
 
               d3.select('#tooltip2') // add text inside the tooltip div
                   .style('display', 'block') //make it visible
                   .html(`
                       <h1 class="tooltip-title">${d.name}</h1>          
                       <div>Highway (HWY) MPG: ${d.value}</div>
               `);
         })
           .on('mouseleave', (event) => {  //when mouse isnt over point
               d3.select('#tooltip2').style('display', 'none'); // hide tooltip
               d3.select(event.currentTarget) //remove the stroke from point
                   .style("stroke", "none");
 
         });

How do I integrate this final section of code into my index.html to get this mouseover event to work? I already created the tooltip div at the top of the index which will display the values once you mouse over.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Mouseover event for barchart in D3

Sources

Related Questions