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

<svg id="chartSVG" viewBox="0,0,1000,2000">
  <image width="1000px" height="2000px" style="opacity:0.2;" href="/babies-pixabay.png">
   </image>	
  {#if letterCounts.length > 0} 
    {#each letterCounts as d, i}
      <rect x = 0 y = {yScale(d.letter)} width = {xScale(d.count)}  height = {yScale.bandwidth()}
        in:fly="{{ x: -1000, duration: 1000, delay: 1000*i}}"></rect>
      <text class="bar-label" x = {xScale(d.count) + 15} y = {yScale(d.letter) + yScale.bandwidth()/2}
      in:fly="{{ x: -1000, duration: 1000, delay: 1000 * i }}">
        {d.letter}: ({Math.round(d.count / totalBabies * 100)}%)
      </text>	
    {/each}
  {/if}
</svg>