npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

svg-3d-tag-cloud

v0.0.20

Published

**Create Stunning 3D Tag Clouds with SVG**

Downloads

129

Readme

SVG-3D-TAG-CLOUD

Create Stunning 3D Tag Clouds with SVG

Svg3dTagCloud is a lightweight and user-friendly JavaScript library that empowers you to generate visually appealing 3D tag clouds using SVG (Scalable Vector Graphics). It offers effortless integration into your web projects, delivering an engaging way to present keyword lists or other textual data.

Demo

Demo Demo

Features:

  • Simple & Effective: Effortlessly create tag clouds through a well-designed API.
  • Versatile Rendering: Supports both ES modules (ESM) and pure JavaScript script formats for broad compatibility.
  • Customizable Appearance: Tailor the visual style of your tag cloud with a range of configuration options.

Installation:

  1. Npm Url: https://www.npmjs.com/package/svg-3d-tag-cloud

  2. Install via NPM:

    • npm i svg-3d-tag-cloud
  3. Download Svg3dTagCloud:

    • Clone the repository from GitHub.
    • Alternatively, download the library files manually.
  4. Use CDN resource

    <script src="https://unpkg.com/svg-3d-tag-cloud/dist/SVG3DTagCloud.global.js"></script>

Usage (HTML + JavaScript):

  1. Version

    • window.SVG3DTagCloud.__VERSION
  2. ESM Import

    settings -> see #3

    import SVG3DTagCloud from 'svg-3d-tag-cloud';
    // other code
    
    // settings _> #2
    new SVG3DTagCloud(document.getElementById('container'), settings).build();
  3. Create HTML Structure:

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <title>SVG3DTagCloud Demo</title>
      </head>
      <body>
        <div id="container"></div>
        <script src="https://unpkg.com/svg-3d-tag-cloud/dist/SVG3DTagCloud.global.js"></script>
        <script>
          // ... your JavaScript code to create the tag cloud ...
        </script>
      </body>
    </html>
  4. Create the Tag Cloud:

    const childrenForText = [
      {
        label: 'JavaScript',
        url: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript',
        target: '_blank',
      },
      {
        label: 'HTML',
        url: 'https://developer.mozilla.org/en-US/docs/Web/HTML',
        target: '_blank',
      },
      // ... add more tag objects
    ];
    
    const childrenForImage = [
      {
        image: '/public/logo.svg', // Replace with your image path
        width: '50',
        height: '50',
        url: 'http://www.google.com',
        target: '_top',
        tooltip: 'Lorem ipsum',
      },
      // ... add more image objects
    ];
    
    let settings = {
      children: childrenForText || childrenForImage, // Choose between text or image tags
      width: 400, // default size
      height: 400,
      radius: '65%', // tag cloud radius percentage
      radiusMin: 75, // tag cloud min-radius px
      isDrawSvgBg: true,
      svgBgColor: 'black', // background color
      opacityOver: 1.0,
      opacityOut: 0.3,
      opacitySpeed: 6,
      fov: 800,
      speed: 0.1,
      fontFamily: 'Oswald, Arial, sans-serif',
      fontSize: '15',
      fontColor: '#fff',
      fontWeight: 'normal', // Customize font properties
      fontStyle: 'normal',
      fontStretch: 'narrower',
      fontToUpperCase: true,
      tooltipFontFamily: 'Oswald, Arial, sans-serif',
      tooltipFontSize: '12',
      tooltipFontColor: '#fff',
      tooltipFontWeight: 'normal',
      tooltipFontStyle: 'italic',
      tooltipFontStretch: 'normal',
      tooltipFontToUpperCase: false,
      tooltipTextAnchor: 'left',
      tooltipDiffX: 10,
      tooltipDiffY: 10,
      animatingSpeed: 0.01,
      animatingRadiusLimit: 1.3,
    };
    
    // Create and initialize the tag cloud
    new SVG3dTagCloud(document.getElementById('container'), settings).build();

Configuration Options (Attribute Table):

| Attribute | Type | Default | Description | | ------------------------ | ----------------------------- | --------------------------- | ---------------------------------------------------------------------------------------- | | children | Array of SVG3DTagCloudChild | [] | An array of objects representing the tags to be displayed. | | width | Number | 400 | The width of the tag cloud in pixels. | | height | Number | 400 | The height of the tag cloud in pixels. | | radius | Number or string | '65%' | The radius of the tag cloud. Can be a pixel value or a percentage of the container size. | | radiusMin | Number | 75 | The minimum radius of the tag cloud in pixels. | | isDrawSvgBg | Boolean | false | Whether to draw an SVG background. | | svgBgColor | String | '#fff' | The color of the SVG background. | | opacityOver | Number | 1.0 | The opacity of the tag cloud when hovered over. | | opacityOut | Number | 0.3 | The opacity of the tag cloud when not hovered over. | | opacitySpeed | Number | 6 | The speed of opacity transition. | | fov | Number | 800 | The field of view of the camera. | | speed | Number | 0.1 | The rotation speed of the tag cloud. | | fontFamily | String | 'Oswald, Arial, sans-serif' | The font family to use for the tags. | | fontSize | String | '15' | The font size of the tags. | | fontColor | String | '#fff' | The color of the tags. | | fontWeight | String | 'normal' | The font weight of the tags. | | fontStyle | String | 'normal' | The font style of the tags. | | fontStretch | String | 'narrower' | The font stretch of the tags. | | fontToUpperCase | Boolean | true | Whether to convert tag text to uppercase. | | tooltipFontFamily | String | 'Oswald, Arial, sans-serif' | The font family for the tooltips. | | tooltipFontSize | String | '12' | The font size for the tooltips. | | tooltipFontColor | String | '#fff' | The color of the tooltips. | | tooltipFontWeight | String | 'normal' | The font weight for the tooltips. | | tooltipFontStyle | String | 'italic' | The font style for the tooltips. | | tooltipFontStretch | String | 'normal' | The font stretch for the tooltips. | | tooltipFontToUpperCase | Boolean | false | Whether to convert tooltip text to uppercase. | | tooltipTextAnchor | String | 'left' | The text anchor for the tooltips. | | tooltipDiffX | Number | 10 | The horizontal offset for the tooltips. | | tooltipDiffY | Number | 10 | The vertical offset for the tooltips. | | animatingSpeed | Number | 0.01 | The animation speed. | | animatingRadiusLimit | Number | 1.3 | The maximum radius for the animation. |

Project running

  git clone https://github.com/Appigle/svg3dtagcloud.git
  npm install
  npm run dev
  npm run build_cp
  npm login
  npm run lib-publish  # publish to npm

License

MIT

Thanks

Niklas Knaack