score:0

Accepted answer

I got the solution for the issue (thanks Myles C. from Udacity Mentor team).

In fact, the data to be accessed where easily stored in a dummy variable that has been used for data binding afterwards and the .merge() statement is used to update both to all circles.

function update_video(year) {

    var filt = nested_year.filter(function(d) {
      return d.key == year;
    });

    var data = filt[0].values

    // Selection and Bind Data
    const update = YearGroups.selectAll("circle")
      .data(data);

    var upd = update.enter()
      .select("circle")
      .merge(update)
      .transition()
      .duration(1500)
      .attr("class", "node_circle")
      .attr("cx", function(d) {
        return XScale(d.value.meanLenderyield);
      })
      .attr("cy", function(d) {
        return YScale(d.value.meanLoan);
      })
      .attr("r", function(d) {
        return radius(d.value.sumLoan);
      })
      .attr("fill", function(d) {
        if (d.key == "CA") { return "blue";}
        if (d.key == "TX") { return "green";}
        else { return "black"}
      });

    // Command necessary to remove States that are not available in the
    // database for that year
    update.exit().remove();


    // Chart Title
    svg.selectAll(".Title").remove();

    svg.append("text")
      .attr("class", "Title")
      .attr("x", (margin + width) / 2)
      .attr("y", margin / 2)
      .attr("font-weight", "bold")
      .attr("text-anchor", "middle")
      .style("font-size", "32px")
      .text("US Loans per State in " + year); // Title update
  };

With this function, each circle is updated, regardless of the state (second key of nested data); the .exit().remove() command has been used to remove all points not bound to data.

Afterward, a second function is used to let the user choose a year and update the circles without transitions, but adding tooltips to get data information hoovering the points with the mouse.

function update_with_tooltip(year) {

    var filt = nested_year.filter(function(d) {
      return d.key == year;
    });

    var data = filt[0].values;

    // Selection and Bind Data
    const update = YearGroups.selectAll("circle")
      .data(data);

    // Update and merge
    var upd = update.enter()
      .select("circle")
      .merge(update)
      .attr("class", "node_circle")
      .attr("cx", function(d) {
        return XScale(d.value.meanLenderyield);
      })
      .attr("cy", function(d) {
        return YScale(d.value.meanLoan);
      })
      .attr("r", function(d) {
        return radius(d.value.sumLoan);
      })
      .attr("fill", function(d) {
        if (d.key == "CA") { return "blue";}
        if (d.key == "TX") { return "green";}
        else { return "black"}
      })
      .on("mouseover", function(d) {
        div.transition()
          .duration(200)
          .style("opacity", .9);    

        div.html("Lender yield : " + formatper(d.value.meanLenderyield) + 
          "<br/>"  + "Loan original amount : " + formatDec(d.value.meanLoan)
          + " $ <br/>"  + "State : " + d.key)
          .style("left", (d3.event.pageX) + "px")
          .style("top", (d3.event.pageY - 28) + "px");
      })
      .on("mouseout", function(d) {
        div.transition()    
          .duration(500)    
          .style("opacity", 0);
      });

    // Command necessary to remove States that are not available in the
    // database for that year
    update.exit().remove();

    // Chart Title
    svg.selectAll(".Title").remove();

    svg.append("text")
      .attr("class", "Title")
      .attr("x", (margin + width) / 2)
      .attr("y", margin / 2)
      .attr("font-weight", "bold")
      .attr("text-anchor", "middle")
      .style("font-size", "32px")
      .text("US Loans per State in " + year); // Title update
  }

Related Query