TagCloud plugin

713 views
Skip to first unread message

S. S.

unread,
Apr 13, 2019, 8:35:14 PM4/13/19
to TiddlyWiki

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

unread,
Apr 13, 2019, 9:41:06 PM4/13/19
to TiddlyWiki

Julio Peña

unread,
Apr 13, 2019, 9:43:20 PM4/13/19
to TiddlyWiki
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

unread,
Apr 13, 2019, 10:13:30 PM4/13/19
to TiddlyWiki
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.

unread,
Apr 13, 2019, 10:35:05 PM4/13/19
to TiddlyWiki
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

unread,
Apr 15, 2019, 7:17:41 PM4/15/19
to TiddlyWiki
Is it possible to show caption instead of title?

S. S.

unread,
Apr 15, 2019, 8:10:44 PM4/15/19
to TiddlyWiki
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

unread,
Apr 16, 2019, 6:38:16 AM4/16/19
to TiddlyWiki
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

unread,
Apr 16, 2019, 7:06:23 AM4/16/19
to TiddlyWiki
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

unread,
Apr 16, 2019, 9:14:00 AM4/16/19
to TiddlyWiki
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

unread,
Apr 16, 2019, 10:04:51 AM4/16/19
to TiddlyWiki
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

unread,
Apr 16, 2019, 1:11:55 PM4/16/19
to TiddlyWiki
@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

unread,
Apr 16, 2019, 2:47:41 PM4/16/19
to TiddlyWiki
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

unread,
Apr 16, 2019, 5:15:38 PM4/16/19
to TiddlyWiki
Believe it or not, it works on Chrome, but not on Firefox (where I tested it first). What a difficult life!!!

Suzanne McHale

unread,
Apr 20, 2019, 11:07:59 PM4/20/19
to TiddlyWiki
Is there any way of excluding tags beginning with $:/tags/ ? These are showing up in the tag cloud also.

S. S.

unread,
Apr 21, 2019, 2:12:09 AM4/21/19
to TiddlyWiki
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

unread,
Apr 21, 2019, 3:56:55 AM4/21/19
to TiddlyWiki
That worked, thanks!

PMario

unread,
Apr 21, 2019, 6:24:56 AM4/21/19
to tiddl...@googlegroups.com
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

unread,
Apr 25, 2019, 5:01:45 AM4/25/19
to TiddlyWiki
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

unread,
Apr 25, 2019, 7:44:40 AM4/25/19
to TiddlyWiki
I tried
<$list filter="""[tags[]!is[system]sort[title]]-[[mytag]]""">
That seemed to work for me.

Birthe

sil...@gmail.com

unread,
Apr 25, 2019, 9:17:49 AM4/25/19
to TiddlyWiki


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

unread,
Nov 15, 2019, 2:55:15 PM11/15/19
to tiddl...@googlegroups.com
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

unread,
Nov 28, 2019, 12:08:32 PM11/28/19
to TiddlyWiki
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

unread,
Nov 29, 2019, 8:16:53 PM11/29/19
to TiddlyWiki
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

unread,
Nov 29, 2019, 11:20:31 PM11/29/19
to TiddlyWiki
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

unread,
Nov 29, 2019, 11:22:57 PM11/29/19
to TiddlyWiki
Or,

What about a special pragma
\onopen ()
actions
\end

Regards
Tony

TiddlyTweeter

unread,
Nov 30, 2019, 6:00:23 AM11/30/19
to tiddl...@googlegroups.com
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 ...

Screenshot_2019-11-30 TidBits Favicons — juicy boring favicons.png


Great easy fun!

Best wishes
Josiah
Reply all
Reply to author
Forward
0 new messages