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

Top categories

Loading Svelte Themes