{"id":19646159,"url":"https://github.com/yoctol/react-d3-cloud","last_synced_at":"2025-04-04T14:10:08.510Z","repository":{"id":10220913,"uuid":"65000653","full_name":"Yoctol/react-d3-cloud","owner":"Yoctol","description":"A word cloud react component built with d3-cloud.","archived":false,"fork":false,"pushed_at":"2024-07-09T05:49:14.000Z","size":2117,"stargazers_count":143,"open_issues_count":15,"forks_count":47,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-03-28T13:08:01.100Z","etag":null,"topics":["d3-cloud","react","tag-cloud","word-cloud"],"latest_commit_sha":null,"homepage":"https://yoctol.github.io/react-d3-cloud","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Yoctol.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-08-05T08:01:59.000Z","updated_at":"2025-03-21T15:16:48.000Z","dependencies_parsed_at":"2024-06-18T15:14:29.023Z","dependency_job_id":"cdb78708-9d59-4013-829e-9ee484858272","html_url":"https://github.com/Yoctol/react-d3-cloud","commit_stats":{"total_commits":192,"total_committers":10,"mean_commits":19.2,"dds":0.6145833333333333,"last_synced_commit":"4facd30f7be3614943b0039692a1d733bead6158"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yoctol%2Freact-d3-cloud","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yoctol%2Freact-d3-cloud/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yoctol%2Freact-d3-cloud/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yoctol%2Freact-d3-cloud/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Yoctol","download_url":"https://codeload.github.com/Yoctol/react-d3-cloud/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247190255,"owners_count":20898702,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["d3-cloud","react","tag-cloud","word-cloud"],"created_at":"2024-11-11T14:37:08.932Z","updated_at":"2025-04-04T14:10:08.476Z","avatar_url":"https://github.com/Yoctol.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-d3-cloud\n\n[![npm version](https://badge.fury.io/js/react-d3-cloud.svg)](https://badge.fury.io/js/react-d3-cloud)\n[![Build Status](https://github.com/Yoctol/react-d3-cloud/workflows/CI/badge.svg?branch=master)](https://github.com/Yoctol/react-d3-cloud/actions?query=branch%3Amaster)\n\nA word cloud react component built with [d3-cloud](https://github.com/jasondavies/d3-cloud).\n\n![image](https://cloud.githubusercontent.com/assets/6868283/20619528/fa83334c-b32f-11e6-81dd-6fe4fa6c52d9.png)\n\n## Installation\n\n```sh\nnpm install react-d3-cloud\n```\n\n## Usage\n\nSimple:\n\n```jsx\nimport React from 'react';\nimport { render } from 'react-dom';\nimport WordCloud from 'react-d3-cloud';\n\nconst data = [\n  { text: 'Hey', value: 1000 },\n  { text: 'lol', value: 200 },\n  { text: 'first impression', value: 800 },\n  { text: 'very cool', value: 1000000 },\n  { text: 'duck', value: 10 },\n];\n\nrender(\u003cWordCloud data={data} /\u003e, document.getElementById('root'));\n```\n\nMore configuration:\n\n```jsx\nimport React from 'react';\nimport { render } from 'react-dom';\nimport WordCloud from 'react-d3-cloud';\nimport { scaleOrdinal } from 'd3-scale';\nimport { schemeCategory10 } from 'd3-scale-chromatic';\n\nconst data = [\n  { text: 'Hey', value: 1000 },\n  { text: 'lol', value: 200 },\n  { text: 'first impression', value: 800 },\n  { text: 'very cool', value: 1000000 },\n  { text: 'duck', value: 10 },\n];\n\nconst schemeCategory10ScaleOrdinal = scaleOrdinal(schemeCategory10);\n\nrender(\n  \u003cWordCloud\n    data={data}\n    width={500}\n    height={500}\n    font=\"Times\"\n    fontStyle=\"italic\"\n    fontWeight=\"bold\"\n    fontSize={(word) =\u003e Math.log2(word.value) * 5}\n    spiral=\"rectangular\"\n    rotate={(word) =\u003e word.value % 360}\n    padding={5}\n    random={Math.random}\n    fill={(d, i) =\u003e schemeCategory10ScaleOrdinal(i)}\n    onWordClick={(event, d) =\u003e {\n      console.log(`onWordClick: ${d.text}`);\n    }}\n    onWordMouseOver={(event, d) =\u003e {\n      console.log(`onWordMouseOver: ${d.text}`);\n    }}\n    onWordMouseOut={(event, d) =\u003e {\n      console.log(`onWordMouseOut: ${d.text}`);\n    }}\n  /\u003e,\n  document.getElementById('root')\n);\n```\n\nPlease checkout [demo](https://codesandbox.io/embed/react-d3-cloud-demo-forked-50wzl)\n\nfor more detailed props, please refer to below:\n\n## Props\n\n| name            | description                                                                                                                                                                                                              | type                                                                 | required | default                                     |\n| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------- | -------- | ------------------------------------------- |\n| data            | The words array                                                                                                                                                                                                          | `{ text: string, value: number }\u003e[]`                                 | ✓        |\n| width           | Width of the layout (px)                                                                                                                                                                                                 | `number`                                                             |          | `700`                                       |\n| height          | Height of the layout (px)                                                                                                                                                                                                | `number`                                                             |          | `600`                                       |\n| font            | The font accessor function, which indicates the font face for each word. A constant may be specified instead of a function.                                                                                              | `string \\| (d) =\u003e string`                                            |          | `'serif'`                                   |\n| fontStyle       | The fontStyle accessor function, which indicates the font style for each word. A constant may be specified instead of a function.                                                                                        | `string \\| (d) =\u003e string`                                            |          | `'normal'`                                  |\n| fontWeight      | The fontWeight accessor function, which indicates the font weight for each word. A constant may be specified instead of a function.                                                                                      | `string \\| number \\| (d) =\u003e string \\| number`                        |          | `'normal'`                                  |\n| fontSize        | The fontSize accessor function, which indicates the numerical font size for each word.                                                                                                                                   | `(d) =\u003e number`                                                      |          | `(d) =\u003e Math.sqrt(d.value)`                 |\n| rotate          | The rotate accessor function, which indicates the rotation angle (in degrees) for each word.                                                                                                                             | `(d) =\u003e number`                                                      |          | `() =\u003e (~~(Math.random() * 6) - 3) * 30`    |\n| spiral          | The current type of spiral used for positioning words. This can either be one of the two built-in spirals, \"archimedean\" and \"rectangular\", or an arbitrary spiral generator can be used                                 | `'archimedean' \\| 'rectangular' \\| ([width, height]) =\u003e t =\u003e [x, y]` |          | `'archimedean'`                             |\n| padding         | The padding accessor function, which indicates the numerical padding for each word.                                                                                                                                      | `number \\| (d) =\u003e number`                                            |          | `1`                                         |\n| random          | The internal random number generator, used for selecting the initial position of each word, and the clockwise/counterclockwise direction of the spiral for each word. This should return a number in the range `[0, 1)`. | `(d) =\u003e number`                                                      |          | `Math.random`                               |\n| fill            | The fill accessor function, which indicates the color for each word.                                                                                                                                                     | `(d, i) =\u003e string`                                                   |          | `(d, i) =\u003e schemeCategory10ScaleOrdinal(i)` |\n| onWordClick     | The function will be called when `click` event is triggered on a word                                                                                                                                                    | `(event, d) =\u003e {}`                                                   |          | null                                        |\n| onWordMouseOver | The function will be called when `mouseover` event is triggered on a word                                                                                                                                                | `(event, d) =\u003e {}`                                                   |          | null                                        |\n| onWordMouseOut  | The function will be called when `mouseout` event is triggered on a word                                                                                                                                                 | `(event, d) =\u003e {}`                                                   |          | null                                        |\n\n## FAQ\n\n### How to Use with Next.js/SSR\n\nTo make `\u003cWordCloud /\u003e` work with Server-Side Rendering (SSR), you need to avoid rendering it on the server:\n\n```js\n{\n  typeof window !== 'undefined' \u0026\u0026 \u003cWordCloud data={data} /\u003e;\n}\n```\n\n### How to Avoid Unnecessary Re-render\n\nAs of version 0.10.1, `\u003cWordCloud /\u003e` has been wrapped by `React.memo()` and deep equal comparison under the hood to avoid unnecessary re-render. All you need to do is to make your function props deep equal comparable using `useCallback()`:\n\n```js\nimport React, { useCallback } from 'react';\nimport { render } from 'react-dom';\nimport WordCloud from 'react-d3-cloud';\nimport { scaleOrdinal } from 'd3-scale';\nimport { schemeCategory10 } from 'd3-scale-chromatic';\n\nfunction App() {\n  const data = [\n    { text: 'Hey', value: 1000 },\n    { text: 'lol', value: 200 },\n    { text: 'first impression', value: 800 },\n    { text: 'very cool', value: 1000000 },\n    { text: 'duck', value: 10 },\n  ];\n\n  const fontSize = useCallback((word) =\u003e Math.log2(word.value) * 5, []);\n  const rotate = useCallback((word) =\u003e word.value % 360, []);\n  const fill = useCallback((d, i) =\u003e scaleOrdinal(schemeCategory10)(i), []);\n  const onWordClick = useCallback((word) =\u003e {\n    console.log(`onWordClick: ${word}`);\n  }, []);\n  const onWordMouseOver = useCallback((word) =\u003e {\n    console.log(`onWordMouseOver: ${word}`);\n  }, []);\n  const onWordMouseOut = useCallback((word) =\u003e {\n    console.log(`onWordMouseOut: ${word}`);\n  }, []);\n\n  return (\n    \u003cWordCloud\n      data={data}\n      width={500}\n      height={500}\n      font=\"Times\"\n      fontStyle=\"italic\"\n      fontWeight=\"bold\"\n      fontSize={fontSize}\n      spiral=\"rectangular\"\n      rotate={rotate}\n      padding={5}\n      random={Math.random}\n      fill={fill}\n      onWordClick={onWordClick}\n      onWordMouseOver={onWordMouseOver}\n      onWordMouseOut={onWordMouseOut}\n    /\u003e\n  );\n);\n```\n\n## Build\n\n```sh\nnpm run build\n```\n\n## Test\n\n### pre-install\n\n#### Mac OS X\n\n```sh\nbrew install pkg-config cairo pango libpng jpeg giflib librsvg\nnpm install\n```\n\n#### Ubuntu and Other Debian Based Systems\n\n```sh\nsudo apt-get update\nsudo apt-get install libcairo2-dev libjpeg8-dev libpango1.0-dev libgif-dev build-essential g++\nnpm install\n```\n\nFor more details, please check out [Installation guides](https://github.com/Automattic/node-canvas/wiki) at node-canvas wiki.\n\n### Run Tests\n\n```sh\nnpm test\n```\n\n## License\n\nMIT © [Yoctol](https://github.com/Yoctol/react-d3-cloud)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyoctol%2Freact-d3-cloud","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyoctol%2Freact-d3-cloud","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyoctol%2Freact-d3-cloud/lists"}