bar plot reactivity

Community Help
1

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?

Screen Shot 2020-04-23 at 11.36.21 PM
Screen Shot 2020-04-23 at 11.36.21 PM1730×850 79.2 KB

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.

2

I feel like the answer is in this example https://observablehq.com/@observablehq/introduction-to-views will update when I (hopefully) figure it out

Update

I ran into this on twitter (https://twitter.com/mbostock/status/961781591717523456?s=20) 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]);

  svg.append("g")
      .attr("fill", "steelblue")
    .selectAll("rect")
    .data(bar_data)
    .join("rect")
      .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 = d.genes.map(x => x.toLowerCase());
        // from https://twitter.com/darth_mall/status/961770045826371584?s=20
        svg.property("value", common_genes)
          .dispatch("input");
      })

  svg.append("g")
      .call(xAxis);

  svg.append("g")
      .call(yAxis);

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