score:1

i finally managed to get it working. i post here the code for others trying to do the same thing.

const ref = used3(
    (svg) => {
      // set the dimensions and margins of the graph
      const margin = { top: 10, right: 20, bottom: 30, left: 50 },
        width = 1080 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;


      // append the svg object to the body of the page
      svg = d3
        .select("#plot-area")
        .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})`);

      // add x axis
      const x = d3.scalelog().domain([1, 2000]).range([0, width]);
      svg
        .append("g")
        .attr("transform", `translate(0, ${height})`)
        .call(d3.axisbottom(x));

      // add y axis
      const y = d3.scalelinear().domain([0, 4]).range([height, 0]).nice();
      svg.append("g").call(d3.axisleft(y));

      // add a scale for bubble size
      const z = d3.scalelog().domain([1, 1000]).range([1, 100]);

      

      // -1- create a tooltip div that is hidden by default:
      const tooltip = d3
        .select("#plot-area")
        .append("div")
        .style("opacity", 1)
        .style("position", "absolute")
        .attr("class", "tooltip")
        .style("background-color", "black")
        .style("border-radius", "5px")
        .style("padding", "10px")
        .style("color", "white");

      // -2- create 3 functions to show / update (when mouse move but stay on same circle) / hide the tooltip
      const showtooltip = function (event, d) {
        tooltip.transition().duration(200);
        tooltip
          .style("opacity", 1)
          .html("collection: " + d.name + " " + d.tokens + " tokens")
          .style("left", event.x / 2 + "px")
          .style("top", event.y / 2 + 30 + "px");
      };
      const movetooltip = function (event, d) {
        tooltip
          .style("left", event.x / 2 + "px")
          .style("top", event.y / 2 + 30 + "px");
      };
      const hidetooltip = function (event, d) {
        tooltip.transition().duration(200).style("opacity", 0);
      };

      // add dots
      svg
        .append("g")
        .selectall("dot")
        .data(input)
        .join("circle")
        .attr("class", "bubbles")
        .attr("cx", (d) => x(d.average_value))
        .attr("cy", (d) => y(d.average_price))
        .attr("r", (d) => z(d.pieces))
        .style("fill", "red")
        // -3- trigger the functions
        .on("mouseover", function () {
          return tooltip.style("visibility", "visible");
        })
        .on("mousemove", function (event) {
          return tooltip
            .style("top", event.pagey + "px")
            .style("left", event.pagex + "px");
        })
        .on("mouseout", function () {
          return tooltip.style("visibility", "hidden");
        });


Related Query

More Query from same tag