A Pre-Plugin: Colorful Graph Macro Showing Tiddler Counts

#1

Demo Graph
json import: Tiddler-Counts.json (5.7 KB)

image
image761×450 30.9 KB

This is a silly-but-useful tiddler with a macro that calculates bar widths that represent numbers of tiddlers in categories.

The categories overlap where tiddlers are shared between them.

I’m not sure I will continue it, but:

  • I was thinking it would be cool instead of having a key - to have each bar trigger its corresponding information.
  • Also, the graph portion would be cool at the top of the Advanced Search tiddler. When you click a bar, then the corresponding filter would fill the Advanced Search text area, and show the tiddlers for that category.
  • Automated incorporation of filter groups might be good.

Warning: the technique is verbose. I probably should have used more macros or procedures.

Discussion on how to improve it is very welcome.

6 Likes
#2

Nice data display! It might be nice to have it in the Control Panel → Info → Basics tab, too, as a visual representation of the information already there.

As far as additional features go, from an accessibility standpoint, it would be nice if it were easy to customize the colors used in the graph. I thought I might poke at this myself, so I took the liberty of streamlining your code a bit. Feel free to use it however you like!

Tiddler Counts.json (3.6 KB)

Edit: Here are some tweaks I made for my own use: Fancy Tiddler Counts.json (5.9 KB). I used a lot of your ideas, but it’s ultimately styled to look good in my wiki, so it may not play as well with other themes.

image
image1378×283 12.4 KB

  • Hover over one of the bars to see a subtle label on the bar + a label and tiddler count in the tooltip.
  • Click on a color swatch in the key to change the color used to represent that category. Any custom colors will get stored in an associated data tiddler. @wattahay’s colors are used by default.
  • Click on a label in the key to open the full list of tiddlers in that category in Advanced Search (with caution—this will be very slow for any filter that returns thousands of results!)
  • I also moved the graph above the key and the max-width button to the upper left corner of the graph. I switched the max-width $reveal to a popup so that opening and closing the expanded version doesn’t “dirty” the tiddler.
4 Likes
#3

Cool, this is how it looks on my wiki

图片
图片917×743 29.2 KB

As long as you got the data, you could use echarts to display the data with bar chart, like this

2 Likes
So.. what happened to h0p3?
#4

Wow, it’s surprising to see how little contrast there is with higher numbers.

#5

I’m only now catching up to being able to maybe unpack the fancy stuff, and I see it is quite educational.

I think your stuff will help me add real-time-adjusting grid lines, and fix the obvious problem of declaring the colors and filters twice. haha.

My last version before I delve into this: Tiddler Counts Alpha.json (6.2 KB)

This is how I’m using it in Advanced Search: Example of Use in Advanced Search

Advanced Search Bars
Advanced Search Bars904×792 75 KB

I’m hoping that grid lines will clarify that a vertical line across all bars represents the same tiddlers.

2 Likes