Update

src/lib/WordCloud.svelte

@@ -1,11 +1,14 @@
 <script>
-  import { onMount } from "svelte";
+  import { onMount, onDestroy } from "svelte";
   import { createEventDispatcher } from "svelte";
   import cloud from "d3-cloud";
   import { select } from "d3-selection";
   import { scaleOrdinal } from "d3-scale";
   import * as CS from "d3-scale-chromatic";
 
+  $: outerWidth = 0;
+  $: innerWidth = 0;
+
   // event dispatcher
   const dispatch = createEventDispatcher();
 
@@ -24,8 +27,8 @@
   };
 
   // props
-  export let words = [];
   export let width = 900;
+  export let words = [];
   export let height = 250;
   export let font = "Montserrat";
   export let maxFontSize = 40;
@@ -49,19 +52,28 @@
   const onWordMouseOut = (d) => dispatch("mouseout", d);
   const onWordMouseMove = (d) => dispatch("mousemove", d);
 
-  const layout = cloud()
+  $: cwidth =
-    .size([width, height])
+    outerWidth > 1152 ? 1000 : outerWidth > 500 ? outerWidth - 100 : width - 50;
-    .words(words)
+  $: cheight = cwidth < 800 ? 400 : cwidth < 500 ? 600 : 250;
-    .padding(padding)
+
-    .rotate(() => ~~(Math.random() * maxRotate) + minRotate)
+  function makeLayout() {
-    .font(font)
+    return cloud()
-    .fontSize(
+      .size([cwidth, cheight])
-      //(d) =>  Math.floor((d.count / maxWordCount) * maxFontSize)
+      .words(words)
-      (d) => d.count + 15
+      .padding(padding)
-    )
+      .rotate(() => ~~(Math.random() * maxRotate) + minRotate)
-    .on("end", draw);
+      .font(font)
+      .fontSize(
+        //(d) =>  Math.floor((d.count / maxWordCount) * maxFontSize)
+        (d) => d.count + 15
+      );
+  }
+
+  let layout = null;
 
   function draw(words) {
+    select("#wordcloud").selectAll("*").remove();
+
     select("#wordcloud")
       .append("svg")
       .attr("width", layout.size()[0])
@@ -91,17 +103,41 @@
       .on("mousemove", onWordMouseMove);
   }
 
-  // mount
+  function drawAll() {
-  onMount(async () => {
+    layout = makeLayout().on("end", draw);
     layout.start();
+  }
+
+  // mount
+  let show = false;
+  let interval = null;
+  onMount(async () => {
+    let fwidth = 0;
+    setTimeout(() => {
+      show = true;
+      interval = setInterval(() => {
+        if (outerWidth !== fwidth) {
+          drawAll();
+          fwidth = outerWidth;
+        }
+      }, 100);
+    }, 0);
+  });
+
+  onDestroy(() => {
+    clearTimeout(interval);
   });
 </script>
 
-<div
+<svelte:window bind:innerWidth bind:outerWidth />
-  id="wordcloud"
+
-  style="background-color: {backgroundColor};"
+<div class="height: {cheight}px;">
-  class="justify-end"
+  <div
-/>
+    id="wordcloud"
+    style="background-color: {backgroundColor}; width: {cwidth}px; height: {cheight}px;"
+    class="justify-end"
+  />
+</div>
 
 <style>
   div#wordcloud {

src/routes/program.svelte

@@ -31,7 +31,6 @@
       i.count = Math.round(i.count / (max / 40));
       return i;
     });
-    console.log(arr);
     return arr;
   }