Socket
Socket
Sign inDemoInstall

@alkihis/react-d3-cloud

Package Overview
Dependencies
7
Maintainers
1
Versions
1
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@alkihis/react-d3-cloud

a word cloud component using d3-cloud


Version published
Maintainers
1
Weekly downloads
1

Weekly downloads

Readme

Source

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

namedescriptiontyperequireddefault
dataThe input data for renderingArray<{ text: string, value: number }>
widthWidth of component (px)number700
heightHeight of component (px)number600
fontSizeMapperMap each element of data to font size (px)Function: (word: string, idx: number): numberword => word.value;
rotateMap each element of data to font rotation degree. Or simply provide a number for global rotation. (degree)Function | number0
paddingMap each element of data to font padding. Or simply provide a number for global padding. (px)Function | number5
fontThe font of text shownFunction | stringserif
onWordClickFunction called when click event triggered on a wordFunction: word => {}null
onWordMouseOverFunction called when mouseover event triggered on a wordFunction: word => {}null
onWordMouseOutFunction called when mouseout event triggered on a wordFunction: 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

Keywords

FAQs

Last updated on 09 Jan 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc