svelte-d3-cloud

Svelte wrapper for d3-cloud. See Demo

Installation

npm install svelte-d3-cloud

or

yarn add svelte-d3-cloud

Usage

<script>
import WordCloud from "svelte-d3-cloud";

const words = [
    { text: "Halo", count: 100 },
    { text: "Dunia", count: 50 },
    { text: "Gaib", count: 75 },
  ];

</script>

<div>
  <WordCloud words={words}/>
</div>

Props

| Property | Description | Default Value | |----------|-------------------------|---------------| | words | Array of object contains text and count value [{text : "some", count: 10},...] | undefined | | width | Set the word cloud canvas width | 500 | | height | Set the word cloud canvas height | 500 | | backgroundColor | Set the canvas background color | '#fff' | | font | Set the word font family | 'Impact' | | padding | Set the padding of each text | 10 | | scheme | Set the word cloud text color scheme based on d3-scale-chromatic (schemeCategory10 , schemeAccent, schemeDark2, schemePaired, schemePastel1, schemePastel2, schemeSet1, schemeSet2, schemeSet3, schemeTableau10) | 'schemeTableau10' | | minRotate | Set the minimum rotation of the text | 0 | | maxRotate | Set the maximum rotation of the text | 0 | | maxFontSize | Set the maximum font size of the text | 50 |

Events

| Event | Description | |----------|-------------------------| | on:click | Listen to event when word is clicked | | on:mouseover | Listen to event when word is hovered | | on:mouseout | Listen to event when mouse leave the word| | on:mousemove | Listen to event when mouse move inside the word |