Svelte D3 Cloud
Svelte wrapper for d3-cloud
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 |
