Skip to content

sghgh1996/react-d3-cloud

 
 

Repository files navigation

react-d3-cloud

NPM version Build Status Dependency Status

A word cloud react component built with d3-cloud.

image

Usage

npm install react-d3-cloud
import React from 'react';
import { render } from 'react-dom';
import WordCloud from 'react-d3-cloud';

const data = [
  { text: 'Hey', value: 1000 },
  { text: 'lol', value: 200 },
  { text: 'first impression', value: 800 },
  { text: 'very cool', value: 1000000 },
  { text: 'duck', value: 10 },
];

const fontSizeMapper = word => Math.log2(word.value) * 5;
const rotate = word => word.value % 360;

render(
  <WordCloud
    data={data}
    fontSizeMapper={fontSizeMapper}
    rotate={rotate}
  />,
  document.getElementById('root')
);

Please checkout demo

for more detailed props, please refer to below:

Props

name description type required default
data The input data for rendering Array<{ text: string, value: number }>
width Width of component (px) number 700
height Height of component (px) number 600
fontSizeMapper Map each element of data to font size (px) Function: (word: string, idx: number): number word => word.value;
rotate Map each element of data to font rotation degree. Or simply provide a number for global rotation. (degree) Function | number 0
padding Map each element of data to font padding. Or simply provide a number for global padding. (px) Function | number 5
font The font of text shown Function | string serif

Build

npm run build

Test

pre-install

sudo apt-get install libcairo2-dev libjpeg8-dev libpango1.0-dev libgif-dev build-essential g++
npm install

Run test

npm test

License

MIT © Yoctol

About

A word cloud react component built with d3-cloud.

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 88.0%
  • Python 8.5%
  • HTML 3.5%