Socket
Socket
Sign inDemoInstall

@nhuson/react-d3-cloud

Package Overview
Dependencies
125
Maintainers
1
Versions
20
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@nhuson/react-d3-cloud

a word cloud component using d3-cloud


Version published
Maintainers
1
Weekly downloads
4
decreased by-76.47%

Weekly downloads

Readme

Source

react-d3-cloud

[![NPM version][npm-image]][npm-url] [![Build Status][travis-image]][travis-url] [![Dependency Status][david_img]][david_site]

A word cloud react component built with d3-cloud.

image

Usage

npm install @nhuson/react-d3-cloud
import React from "react";
import { render } from "react-dom";
import WordCloud from "@nhuson/react-d3-cloud";

const data = [
  { text: "Hello", value: 1000, color: "grey", fontWeight: 500 },
  { text: "lol", value: 200, color: "grey", fontWeight: "normal" },
  { text: "first impression", value: 800, color: "#ccc", fontWeight: "bold" },
  { 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")
);

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
defaultColorDefault color text, if not set color in dataString#333
formatImgDownloadFormat image base64Stringpng

Convert chart to base64 image

import React, { useRef, useEffect } from "react";
import { render } from "react-dom";
import WordCloud from "@nhuson/react-d3-cloud";

const data = [
  { text: "Hello", value: 1000, color: "grey", fontWeight: 500 },
  { text: "lol", value: 200, color: "grey", fontWeight: "normal" },
  { text: "first impression", value: 800, color: "#ccc", fontWeight: "bold" },
  { text: "very cool", value: 1000000 },
  { text: "duck", value: 10 }
];
const Cloud = (props) => {
    const cloudRef = useRef();
    useEffect(() => {
        cloudRef.current.toBase64Image().then(imgBase64 => console.log(imgBase64))
    }, [])
    return (
         <WordCloud
          height={300}
          data={data}
          padding={10}
          ref={cloudRef}
    />
    )
}

Build

npm run build

Test

pre-install

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

Keywords

FAQs

Last updated on 23 Nov 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