Proposal with code - Word Cloud

This is not a PR because I’m new here and do not have the environment to set up the repo, nor do I want to add a PR with a whole new package.

Using the vx style I created a word cloud component and am adding it here as a proposal for another chart. I am currently using it in my own code and it works quite well.

import React from 'react';
import cx from 'classnames';
import cloud from 'd3-cloud';
import { Group } from '@vx/group';

const WordCloud = ({
  className,
  top,
  left,
  width = 1,
  height = 1,
  words,
  padding,
  text,
  font,
  fontSize,
  fontStyle,
  fontWeight,
  rotate,
  spiral,
  random,
  colourScale,
  children,
  ...restProps
}) => {
  const layout = cloud();
  layout.size([width, height]);
    
  if (words) layout.words(words.map(x => ({ ...x })));
  if (text) layout.text(text);
  if (padding) layout.padding(padding);
  if (font) layout.font(font);
  if (fontSize) layout.fontSize(fontSize);
  if (fontStyle) layout.fontStyle(fontStyle);
  if (fontWeight) layout.fontWeight(fontWeight);
  if (rotate) layout.rotate(rotate);
  if (random) layout.random(random);
  if (spiral) layout.spiral(spiral);
  layout.start();

  const elements = layout.words();
  if (children) return (
    <>{children({ words: elements })}</>
  );
  return (
    <Group className={'vx-word-cloud-group'} top={top} left={left}>
      {elements.map(
        (word, i) => {
          const { font, style, weight, rotate, size, x, y } = word;
          return (
            <text
              key={`word-cloud-text-${i}`}
              className={cx('vx-word-cloud-text', className)}
              textAnchor={'middle'}
              fontFamily={font}
              fontSize={size}
              fontWeight={weight}
              fontStyle={style}
              transform={`translate(${x}, ${y})rotate(${rotate})`}
              fill={colourScale? colourScale(word, i): undefined}
              {...restProps}
            >
              {text(word)}
            </text>
          );
        }
      )}
    </Group>
  );
};

export default WordCloud;

And it can then be used as such

<WordCloud
  left={xMax/2}
  top={yMax/2}
  width={xMax}
  height={yMax}
  words={words}

  text={textAccessor}
  font={FONT_FAMILY}
  fontSize={fontSize}

  padding={5}
  spiral={spiral}
  rotate={rotate}
  colourScale={colourScale}
/>

Since d3-cloud falls under d3.layout, would this then fall under a new package of vx-layout? If anyone would like to get a word cloud pr going I would happily contribute

[craciuncezar]

Hey @williaster @mitchellwarr I’ve created a PR for this https://github.com/airbnb/visx/pull/1311 and abstracted that layout logic into a hook as suggested. When you have a chance, please take a look 👀

[mitchellwarr]

@craciuncezar This is awesome! Thanks so much for moving this forward. Im not a maintainer so i cant speak for the pr much, but im impressed with it nonetheless