JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 17199
  • Score
    100M100P100Q136471F
  • 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
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