Napolean Paced Mischeviously

    @alkihis/react-d3-cloud

    0.7.0 • Public • Published

    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

    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

    Install

    npm i @alkihis/react-d3-cloud

    DownloadsWeekly Downloads

    3

    Version

    0.7.0

    License

    MIT

    Unpacked Size

    21.7 kB

    Total Files

    17

    Last publish

    Collaborators

    • alkihis