JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 17199
  • Score
    100M100P100Q136411F
  • License MIT

A word cloud component using d3-cloud

Package Exports

  • react-d3-cloud

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-d3-cloud) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-d3-cloud

npm version Build Status

A word cloud react component built with d3-cloud.

image

Usage

npm install react-d3-cloud

Simple:

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 },
];

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

More configuration:

import React from 'react';
import { render } from 'react-dom';
import WordCloud from 'react-d3-cloud';
import { scaleOrdinal } from 'd3-scale';
import { schemeCategory10 } from 'd3-scale-chromatic';

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

render(
  <WordCloud
    data={data}
    width={500}
    height={500}
    font="Times"
    fontStyle="italic"
    fontWeight="bold"
    fontSize={(word) => Math.log2(word.value) * 5}
    spiral="rectangular"
    rotate={(word) => word.value % 360}
    padding={5}
    random={Math.random}
    fill={(d, i) => scaleOrdinal(schemeCategory10)(i)}
    onWordClick={(word) => {
      console.log(`onWordClick: ${word}`);
    }}
    onWordMouseOver={(word) => {
      console.log(`onWordMouseOver: ${word}`);
    }}
    onWordMouseOut={(word) => {
      console.log(`onWordMouseOut: ${word}`);
    }}
  />,
  document.getElementById('root')
);

Please checkout demo

for more detailed props, please refer to below:

Props

name description type required default
data The words array { text: string, value: number }>[] ✓
width Width of the layout (px) number 700
height Height of the layout (px) number 600
font The font accessor function, which indicates the font face for each word. A constant may be specified instead of a function. string | (d) => string 'serif'
fontStyle The fontStyle accessor function, which indicates the font style for each word. A constant may be specified instead of a function. string | (d) => string 'normal'
fontWeight The fontWeight accessor function, which indicates the font weight for each word. A constant may be specified instead of a function. string | (d) => string 'normal'
fontSize The fontSize accessor function, which indicates the numerical font size for each word. (d) => number (d) => Math.sqrt(d.value)
rotate The rotate accessor function, which indicates the rotation angle (in degrees) for each word. (d) => number () => (~~(Math.random() * 6) - 3) * 30
spiral The current type of spiral used for positioning words. This can either be one of the two built-in spirals, "archimedean" and "rectangular", or an arbitrary spiral generator can be used string | ([width, height]) => t => [x, y] 'archimedean'
padding The padding accessor function, which indicates the numerical padding for each word. number | (d) => number 1
random The internal random number generator, used for selecting the initial position of each word, and the clockwise/counterclockwise direction of the spiral for each word. This should return a number in the range [0, 1). (d) => number Math.random
fill The fill accessor function, which indicates the color for each word. (d, i) => string (d, i) => scaleOrdinal(schemeCategory10)(i)
onWordClick The function will be called when click event is triggered on a word word => {} null
onWordMouseOver The function will be called when mouseover event is triggered on a word word => {} null
onWordMouseOut The function will be called when mouseout event is triggered on a word word => {} null

Next.js/SSR

To make <WordCloud /> work with Server-Side Rendering (SSR), you need to avoid rendering it on the server:

{
  typeof window !== 'undefiend' && <WordCloud data={data} />;
}

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