Observable Framework - d3 legend-swatches

Community Help
1

Hi, How to use {Legend, Swatches} in Observable Framework?

I need add legend to each chart, I’m using d3.js and I’m trying to use function legend-swatches, but the result is displayed outside of the div:

this is the code for the legend

const display_legend =  view(chartSwatches(d3.scaleOrdinal(allSegments, d3.schemeCategory10), {
  columns: "80px"
}))

…and this is for each chart:

<div class="grid grid-cols-3">
  <div class="card">
  <h2>Por Banca</h2>
  ${resize((width) => barr_variation(data_for_bar_variation,{width}))}
  </div>
  <div class="card">
  <h2>Por Banca</h2>
  ${resize((width) => barr_variation(tipoOpe_for_bar_variation,{width}))}
  </div>
  <div class="card">
  <h2>Por Banca</h2>
  ${resize((width) => barr_variation(tipoOpe_for_bar_variation,{width}))}
  </div>
</div>

image
image2280×688 59 KB

thank you in advance

2

I think I got confused for nothing…it’s already solved:

function legendDisp(data){
return chartSwatches(d3.scaleOrdinal(data, d3.schemeCategory10), {
  columns: "80px"
})
}

<div class="grid grid-cols-3">
  <div class="card">
  <h2>Por Banca</h2>
  ${resize((width) => legendDisp(data_for_bar_variation,{width}))}
  ${resize((width) => barr_variation(data_for_bar_variation,{width}))}
  </div>
  <div class="card">
  <h2>Por Tipo Operación</h2>
  ${resize((width) => legendDisp(tipoOpe_for_bar_variation,{width}))}
  ${resize((width) => barr_variation(tipoOpe_for_bar_variation,{width}))}
  </div>
  <div class="card">
  <h2>Por Banca</h2>
  ${resize((width) => legendDisp(data_for_bar_variation,{width}))}
  ${resize((width) => barr_variation(tipoOpe_for_bar_variation,{width}))}
  </div>
</div>

image
image2136×538 52.8 KB