bar plot reactivity

We have a notebook where we would like to mouseover a bar in a bar plot and have some text highlight (e.g. a set of genes that are associated with the term represented by the bar). I am able to have a mouseover event in the bar-plot update a variable common_genes, but the notebook is not behaving reactively. Are there examples for setting up this kind of reactivity for d3 bar plots?

We already set up reactivity for the heatmap (clicking on the row dendrogram, grey trapezoids) reactively triggers downstream events (e.g. API POST/GET requests), but I’m not sure how to adapt this pattern to the D3 bar plot. Note - you have to click a row dendrogram in order to see a bar plot.

I feel like the answer is in this example will update when I (hopefully) figure it out


I ran into this on twitter ( which said to use:

svg​.property("value", [d3.event.x, d3.event.y]).dispatch("input");

My notebook now includes

viewof bar_chart = {
  const svg = d3.create("svg")
      .attr("viewBox", [0, 0, width, height]);

      .attr("fill", "steelblue")
      .attr("x", (d, i) => x(i))
      .attr("y", d => y(d.value))
      .attr("height", d => y(0) - y(d.value))
      .attr("width", x.bandwidth())
      .on('mouseover', function(d){
        let common_genes;
        common_genes = => x.toLowerCase());
        // from"value", common_genes)



  //"value", 'something').dispatch("input");
  return svg.node();