Nuria Altimir

Master Visual Tools to Empower Citizens. Dataviz programming. Practical exercises. 

MTVEC, practicing D3

To change the background color of the tooltip, you need to change the background property of the tooltip depending on the datum:
      .on("mouseover", function(e,d,i) {
                      d3.select(this).attr("fill", "grey")
                      let tooltipWidth = tooltip.node().offsetWidth;
                      let tooltipHeight = tooltip.node().offsetHeight;
                       tooltip
                      .style('background', x => { while (d.depth > 1) d = d.parent; return color(d.data[0]);}) // <-- This is the new code!!!
                      .style("left", e.pageX - tooltipWidth/2 +'px')
                      .style("top", e.pageY-tooltipHeight - 10+'px')
                      .style('visibility', 'visible')

To have the zoomable effect, you need to do two more things. First, you need to store to a variable 'rect' (for instance) the rectangle selection. This will allow you to easily change the height when zooming. Second, you need to add the code:
    rect.transition(t).attr("height", d => rectHeight(d.target));
at the end of the clicked function, to update the rect height (to fit to the whole svg).

To go vertical, you need to use the x for the width and the y for the height. Similar to what we did with the Tidy Tree example.