bar-chart-with-word-clouds-3.svelte

{#each letterCounts as d, i}
  <!-- code for bars and labels here -->
  <g width = {xScale(d.count)} height = {yScale.bandwidth()} 
    style="transform: translate({xScale(d.count)/2}px,{yScale(d.letter) + yScale.bandwidth()/2}px); text-anchor: middle">
    {#if d.words.length > 0}
      {#each d.words as word}
      <text x={word.x} y={word.y} style="transform: translate({word.x}, {word.y});
          font-size: {word.size}px;
          fill: {cat10colors[Math.floor(Math.random()*10)]}">
        {word.text}
      </text> 
      {/each}  
    {/if}
  </g>
{/each}