TagCloud plugin

[S. S.]

Is this TW CLassic plugin available for TW5 ?

http://www.tiddlytools.com/#TagCloudPlugin

Here is an big example: https://karlarao.github.io/karlaraowiki/index.html#TagCloud

[Birthe C]

Have you seen this http://zemox.tiddlyspot.com/#Tag%20Cloud:%5B%5BTag%20Cloud%5D%5D%20%5B%5BSystem%20Tag%20Cloud%5D%5D

Birthe

[Julio Peña]

Hello there S.S. 

Here is something you can check out: http://zemox.tiddlyspot.com/.

Look at its tag cloud.

Best regards,

Julio

[Eric Shulman]

In TiddlyWiki5, you can actually generate a tag cloud without using any plugins!

Try this:

\define calcFontSize() font-size:calc(0.5em + (0.2em * ($(count)$ / 5) ) );

<$list filter="[tags[]]" variable="thistag">
   <$vars count={{{ [<thistag>tagging[]count[]] }}}>
      <span style=<<calcFontSize>>>
         <$link to=<<thistag>> tooltip=<<count>>>
            <$text text=<<thistag>> />
         </$link>
      </span>
   </$vars>
</$list>

What it does:

1) The <$list> widget gets the names of all the tags in the document, assigning each name, in turn, to the "thistag" variable

2) The <$vars> widget gets the number of items for the current tag

3) The <span> uses the "calcFontSize" macro to generate a style attribute that sets the font-size of the tag text to be displayed, based on the number of items with that tag

4) The <$link> widget creates a link to the tag tiddler itself, with the mouse-over tooltip text showing the number of items with that tag

5) The <$text> widget displays the tag text

The calcFontSize macro uses a base size of 0.5em, and then adds an increment of 0.2em for every 5 tagged items.  Thus, the resulting font sizes are:

1-5 items    = 0.5em

6-10 items  = 0.7em

11-15 items = 0.9em

16-20 items = 1.1em

21-25 items = 1.3em

etc.

Of course, you can adjust all the numbers in the calculation to suit your own tastes.

Let me know how it goes...

enjoy,

-e

Eric Shulman

TiddlyTools.com: "Small Tools for Big Ideas!" (tm)

InsideTiddlyWiki: The Missing Manuals

[S. S.]

Eric!

As usual - WOW !!!

I used this on www.tiddlywiki.com and it's perfect!

\define calcFontSize() font-size:calc(0.8em + (0.07em * ($(count)$ / 5) ) );

<$list filter="[tags[]!is[system]sort[]]" variable="thistag">

   <$vars count={{{ [<thistag>tagging[]count[]] }}}>
      <span style=<<calcFontSize>>>
         <$link to=<<thistag>> tooltip=<<count>>>
            <$text text=<<thistag>> />
         </$link>
      </span>
   </$vars>
</$list>

Thanks as well for the explanation. It never occurred to me to use CSS's calc

Cheers

[Magnus]

Is it possible to show caption instead of title?

[S. S.]

Magnus, yes, that is possible.

If you'd like to try doing it yourself and posting your solution, you'll find some ideas how to do it over here: https://github.com/Jermolene/TiddlyWiki5/issues/3624
But read that right to the end, as there are a few different solutions (some of the earlier solutions are not exactly right).

Regards!

[mauloop]

Il giorno domenica 14 aprile 2019 04:13:30 UTC+2, Eric Shulman ha scritto:

...

In TiddlyWiki5, you can actually generate a tag cloud without using any plugins!

Try this:

...

I was long waiting to find time to write my own TagCloud macro (I didn't know how, but I knew it was possible). Thanks, Eric, for your suggestion. I post my variation, that uses tag pills, in case someone could be interested in:

\define calcFontSize() font-size:calc(1em + (0.1em * $(count)$) / 5);


<$list filter="""[tags[]!is[system]sort[title]]""">
<$vars count={{{ [all[current]tagging[]count[]] }}}>
<span style=<<calcFontSize>> >
<<tag>>
</span>
</$vars>
</$list>

[mauloop]

The code from my previuos post has a side effect, that makes drop-down menus from tag-pills to have the same font-size than the tag-pill itself (the biggest ones are unreadable).

This one fix:

\define tag-pill-styles()
background-color:$(backgroundColor)$;
fill:$(foregroundColor)$;
color:$(foregroundColor)$;

font-size:calc(1em + (0.1em * $(count)$) / 5);

\end

<$list filter="""[tags[]!is[system]sort[title]]""">
<$vars count={{{ [all[current]tagging[]count[]] }}}>

<<tag>>
</$vars>
</$list>

Basically the tag-pills-styles macro overrides the one from $:/core/macros/tag.

[Birthe C]

Hi mauloop,

I like your solution, and that was exactly what I thinking about (the drop-down).

If you use:

<$button tooltip=<<count>> class="tc-btn-invisible">
<<tag>>
</$button>

We get the count hovering the tagpills.

Thank you,

Birthe

[mauloop]

Thanks, Birthe C. I like it. I changed the code in my wiki with your suggestion.

I could not ask more from a completed thread ;^)))

[mauloop]

@Birthe,

I noticed that wrapping the tag macro in a ButtonWidget, prevents the links in the tag-pills drop-down menus to work. I did not have a workaround by now. 

[Birthe C]

Hi mauloop,

Now I am really wondering, because the links in the tag-pills drop-down menus work for me in my wiki. My wiki has a lot of changes, so I dragged the tiddler to tiddlywiki.com and it also works. Strange.

Birthe

[mauloop]

Believe it or not, it works on Chrome, but not on Firefox (where I tested it first). What a difficult life!!!

[Suzanne McHale]

Is there any way of excluding tags beginning with $:/tags/ ? These are showing up in the tag cloud also.

[S. S.]

Suzanne,

Try one of the other examples in the posts after Eric's that includes this in the code: !is[system]

That removes any tags that start with: $:/

Regards.

[Suzanne McHale]

That worked, thanks!

[PMario]

Hi Folks,

Word-Clouds and Tag-Clouds come up from time to time. ... They are "kind of" beautiful. ... But they also should be informative!.

More pros and cons can be seen in a thread from 2016.

Have fun!

Mario

[sil...@gmail.com]

Hi Mauloop,

Thank you !

I really like this proposal :)
I still have a tag that I would like to exclude, because graphically it takes up too much space (with more 200 tiddlers)

I tried to exclude it in the filter with ![mytag] but it removes me from other tags (example with all I have 41 tags, and if I exluse it I only display 28).

(and yes, I'm still not comfortable with filters, my bad)

<$list filter="""[tags[]!is[system]![mytag]sort[title]]""">

<$vars count={{{ [all[current]tagging[]count[]] }}}>

<<tag>><<count>>
</$vars>
</$list>

If anyone has the solution, it would be perfect !

Cheers,

Sylvain

[Birthe C]

I tried

<$list filter="""[tags[]!is[system]sort[title]]-[[mytag]]""">

That seemed to work for me.

Birthe

[sil...@gmail.com]

Le jeudi 25 avril 2019 13:44:40 UTC+2, Birthe C a écrit :

I tried

<$list filter="""[tags[]!is[system]sort[title]]-[[mytag]]""">

That seemed to work for me.

Birthe

Wonderful ! Merci beaucoup :)

It's perfect like that.

Cheers,

Sylvain

[FFT]

Clicking on the tagcloud items takes me to an empty tiddler.Can someone show me how to change this code so that it links to the Titles under each tag?

[TiddlyTweeter]

Ciao Eric

I was struck by the simplicity of this solution!

One thing I want to do, but don't know how, is to change the filter so that the results can be presented in Count Order (highest to lowest).

Does anyone know how to change the filter syntax to do that?

Best wishes

TT

[Eric Shulman]

On Thursday, November 28, 2019 at 9:08:32 AM UTC-8, TiddlyTweeter wrote:

I was struck by the simplicity of this solution!

One thing I want to do, but don't know how, is to change the filter so that the results can be presented in Count Order (highest to lowest).

It's a bit tricky... you can't directly sort tags by the number of items they are tagging...

But I've managed to do it with a bit of trickery: http://tiddlytools.com/filtergenerators.html

1) get all the tags.

2) wikify a list that shows "tagcount;tagname", with the tag count numbers padded with leading zeros

3) sort that list and remove the tag count prefix from each item, and wikify that.

The result is a list of tags, sorted by number of items they tag.  Then I output that list as a tag cloud.

Note: I also modified the tag display so that each tag pill shows the tag name AND tag count.

enjoy,

-e

[TonyM]

Eric,

An idea riffing off this code pattern.

I have seen this code pattern being used a number times to overcome some limitations within tiddlywiki. As I observed in your original solution, using the number to effect the font size was in a way capturing or using the "number" in the font so they need not be retained for later. 

In your second example I understand you are creating a new array of items "tagcount;tagname" use this for the sor,t then discarding the prefix tagcount and then presenting each tagname. 

• I have done something similar in another case, there are other methods but the usually involve a two step process, and usually a triggers, generate a list then interrogate it.
• Since this is an area that often needs this kind of workaround it would be nice if we could provide a method to simplify this. A kind of concatenated key list or something, or temporary array.

Alternatively,

To avoid the need for an additional trigger to generate the first list, before interrogating that list. It would be nice if we could trigger an action on opening a tiddler (to re/generate the list), then its wiki text interrogates the generated list. I have raised a GitHub issue to do with being able to add/trigger actions to any button, and the desire to be able to do so on any navigation to a tiddler. I could imagine a tiddler field action-on-open containing say {{$:/regenlist}} a set of triggered actions. 

This would allow such intermediate lists to be created in a "working" tiddler on opening a tiddler, that then lists its contents in a desired order.

A pattern

If we could trigger the generation of a list, as defined in a filter, that builds a list of temporary tiddlers, with all possible sort keys represented in the title and fields we could then sort by any field, as many additional times as we want, using the same temporary tiddlers.

I hope I am making sense.

Tony

[TonyM]

Or,

What about a special pragma

\onopen ()
actions
\end

Regards

Tony

[TiddlyTweeter]

Ciao Eric

Great tool! Thanks a lot! I can't really understand the code but I don't need to. I think it could have much utility. The use of CSS calculation on presentation is ace!

I been playing around with using it for width of items (=simple bar chart). 

And manipulating hsla background-color opacity (=gradient of pill backgrounds). I used CSS variables like this in the top \define---you likely know all this already ...

  /* css calculators - ! adjust numbers by case ! */

  font-size:  calc(0.5em + (0.2em * ($(count)$ / 5)));

  --bkd-color:calc(0     + (0.03  * ($(count)$    )));

  /* insert color values                          */

  background-color:hsla(260,60%,70%,var(--bkd-color));

Result on my range of counts for color gradient ...

Great easy fun!

Best wishes

Josiah