3D Tag Cloud in the SharePoint Framework (SPFx) web part

This article explains how to implement the 3D Tag Cloud web part using SharePoint Framework (SPFx).
The 3D Tag Cloud leverages SVG and jQuery plugins to create dynamic, interactive tag spheres populated from SharePoint list items.

⚙️ Create a new SPFx web part project

Run the following command to generate a new web part using the Yeoman SharePoint Generator:

yo @microsoft/sharepoint

When prompted:

Solution name: spfx-jquery-3dtagcloud
Target for components: SharePoint Online only (latest)
Deployment option: Allow tenant admin choice → Yes
Type of component: WebPart
Web part name: 3DTagCloud
Framework: React

Then open the project in Visual Studio Code.

📦 Install dependencies

Install the required libraries:

npm i jquery --save

This installs jQuery, which is used by the SVG 3D Tag Cloud plugin.

🧩 Update the React component

Open the main component file and update the render method as follows:

public render(): void {
  const element: React.ReactElement<ISpfxJquery3dtagcloudProps> = React.createElement(
    SpfxJquery3dtagcloud,
    {
      description: this.properties.description,
      context: this.context
    }
  );
  ReactDom.render(element, this.domElement);
}

Next, open the web part file (SpfxJquery3dtagcloud.tsx) and import the necessary modules:

import * as React from 'react';
import styles from './SpfxJquery3dtagcloud.module.scss';
import { ISpfxJquery3dtagcloudProps, ISpfxJquery3dtagcloudState } from './ISpfxJquery3dtagcloudProps';
import { autobind } from 'office-ui-fabric-react/lib/Utilities';
import { sp } from "@pnp/sp";
import "@pnp/sp/webs";
import "@pnp/sp/lists";
import "@pnp/sp/items";

Add the following method to fetch list items and initialize the 3D Tag Cloud visualization:

@autobind
private async _getLinks() {
  const allItems: any[] = await sp.web.lists.getByTitle("3DTags").items.getAll();
  var entries = [];
  allItems.forEach(element => {
    entries.push({ label: element.URL.Description, url: element.URL.Url, target: '_top' });
  });

  const settings = {
    entries: entries,
    width: 480,
    height: 480,
    radius: '65%',
    radiusMin: 75,
    bgDraw: true,
    bgColor: '#fff',
    opacityOver: 1.00,
    opacityOut: 0.05,
    opacitySpeed: 6,
    fov: 800,
    speed: 1,
    fontFamily: 'Oswald, Arial, sans-serif',
    fontSize: '15',
    fontColor: '#111',
    fontWeight: 'normal', // bold
    fontStyle: 'normal', // italic
    fontStretch: 'normal',
    fontToUpperCase: true,
    tooltipFontFamily: 'Oswald, Arial, sans-serif',
    tooltipFontSize: '11',
    tooltipFontColor: '#111',
    tooltipFontWeight: 'normal',
    tooltipFontStyle: 'normal',
    tooltipFontStretch: 'normal',
    tooltipFontToUpperCase: false,
    tooltipTextAnchor: 'left',
    tooltipDiffX: 0,
    tooltipDiffY: 10,
    animatingSpeed: 0.01,
    animatingRadiusLimit: 1.3
  };

  new svg3DTagCloud(document.getElementById('holder'), settings);
  this.render();
}

This code dynamically builds tag entries from the SharePoint list 3DTags and visualizes them as a rotating 3D sphere.

🧱 Add the holder element in render()

Update the render method to include a holder for the tag cloud:

public render(): React.ReactElement<ISpfxJquery3dtagcloudProps> {
  return (
    <div className={styles.spfxJquery3dtagcloud}>
      <div id="holder"></div>
    </div>
  );
}

🚀 Deploy the solution

Once ready, bundle and package the solution:

gulp build
gulp bundle --ship
gulp package-solution --ship

Upload the .sppkg file to your App Catalog and deploy the web part.

After deployment, add the web part to a modern SharePoint page.
You’ll see a 3D rotating tag sphere populated with links from your 3DTags list.

🧠 Summary

You’ve successfully created a 3D Tag Cloud web part using SPFx and jQuery that visualizes SharePoint list items in an engaging and interactive way.

📂 GitHub Source

View full SPFx project on GitHub:3D Tag Cloud in the SharePoint Framework (SPFx) web part

GitHub