🏠 back to Observable

Editing Imported Cells From Notebook

Apologies for probably a 101-level question. I may need like a ELI5 though

So I have a cell ‘drawchart’ in this noteook. I can easily import it in another notebook, this one, But I want to edit the imported cell so that the tooltip on the map highlights the associated circle. It is currently working, but I had to manually go into the original notebook and add the tooltip changes to highlight all circles, making the import not so useful. Is it possible to access a cell’s internals like below?

{
  drawchart
  /* Nope, this isn't right
  svg.on('mouseover', function(d) {
      d3.selectAll('#circle'+d.id)
        .attr('fill','orange')
        .attr('opacity',1)
        .attr('r','8')}) */
  return drawchart
}
2 Likes

Assuming you’ve got d3 and drawchart already imported, how about:

d3
  .select(drawchart)
  .on('mouseover', () => console.log('gotcha'))
  .node()

Thank you, maybe more specifically the choropleth I am importing has topojson data with the county ID and state ID, and I want to ‘grab’ these state and county IDs on a ‘mouseover’ event despite not having the topojson features imported…

Here is the original choropleth map that has the topojson features

  svg.append("g")
    .attr('id', 'counties')
    .selectAll("path")
    .data(topojson.feature(us, us.objects.counties).features.filter(d => !d.id.startsWith('15') && !d.id.startsWith('02')))
    .enter().append("path")
    .attr("d", path)
    .attr("class", "county-border")
    .attr('pointer-events', 'all')
    .style('fill', d => (!!pd[whichview][d.id] ? colorScale(pd[whichview][d.id]) : 'white'))
    .on('mouseover', function(d) {console.log(d.id}) 

(Though your answer did help me :slight_smile: ).