@diego.caceres/react-d3-cloud NPM

react-d3-cloud

A word cloud react component built with d3-cloud.

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
onWordClick	Function called when click event triggered on a word	Function: `word => {}`		null
onWordMouseOver	Function called when mouseover event triggered on a word	Function: `word => {}`		null
onWordMouseOut	Function called when mouseout event triggered on a word	Function: `word => {}`		null

Build

npm run build

Test

pre-install

Mac OS X

brew install pkg-config cairo pango libpng jpeg giflib librsvg
npm install

Ubuntu and other Debian based systems

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

For more details, please check out Installation guides at node-canvas wiki.

Run test

npm test

License

MIT © Yoctol

d3 react word-cloud

d3-cloud d3-scale d3-scale-chromatic d3-selection enzyme-adapter-react-16 prop-types react-faux-dom

@infinitebrahmanuniverse/nolb-_die @everything-registry/sub-chunk-242 @zalastax/nolb-_die

0.7.1

3 years ago