tag-cloud drawing: algorithm for cloud visualization owen kaser, daniel lemire speaker: yi-ching...
TRANSCRIPT
![Page 1: Tag-Cloud Drawing: Algorithm for Cloud Visualization Owen Kaser, Daniel Lemire Speaker: Yi-Ching Huang 2007/07/17](https://reader036.vdocument.in/reader036/viewer/2022062516/56649e165503460f94b00e95/html5/thumbnails/1.jpg)
Tag-Cloud Drawing: Algorithm for Cloud Visualization
Owen Kaser, Daniel Lemire
Speaker: Yi-Ching Huang
2007/07/17
![Page 2: Tag-Cloud Drawing: Algorithm for Cloud Visualization Owen Kaser, Daniel Lemire Speaker: Yi-Ching Huang 2007/07/17](https://reader036.vdocument.in/reader036/viewer/2022062516/56649e165503460f94b00e95/html5/thumbnails/2.jpg)
Introduction
Tag cloud can represent the frequencies of a hundred items
Tag cloud can be generated using– images– browser-specific technologies (ex: ActiveX)– plugins (ex: Flash)– complex HTML (using absolute positioning)– simple HTML with inline text or tables
![Page 3: Tag-Cloud Drawing: Algorithm for Cloud Visualization Owen Kaser, Daniel Lemire Speaker: Yi-Ching Huang 2007/07/17](https://reader036.vdocument.in/reader036/viewer/2022062516/56649e165503460f94b00e95/html5/thumbnails/3.jpg)
Problem Definitions
Problems– Wasted space– Large clumps of white space
Solutions– Floorplanning / placement problem (EDA)– Hybrid of text justification (Knuth-Pass
algo) and book-placement (Skiena)
![Page 4: Tag-Cloud Drawing: Algorithm for Cloud Visualization Owen Kaser, Daniel Lemire Speaker: Yi-Ching Huang 2007/07/17](https://reader036.vdocument.in/reader036/viewer/2022062516/56649e165503460f94b00e95/html5/thumbnails/4.jpg)
Cloud Layout with Inline Text
1st algo: take an ordered list of tags and choose where to break line– Step 1: Greedy algorithm ,O(n)
• Tags are added to the current line one by one, inserting a white space between them, until the line is full
– Step 2: Dynamic programming ,O(n^2)• Knuth-Plass algorithm• Except that 2 things
– The last line is not an exception– If a tag exceeds the maximal width, then it will be given a
line of its own
![Page 5: Tag-Cloud Drawing: Algorithm for Cloud Visualization Owen Kaser, Daniel Lemire Speaker: Yi-Ching Huang 2007/07/17](https://reader036.vdocument.in/reader036/viewer/2022062516/56649e165503460f94b00e95/html5/thumbnails/5.jpg)
Cloud Layout with Inline Text
2nd algo: reorder tags, attempting to decrease the badness– Finding an optimal ordering is NP-hard: when the required
horizontal white space between tags is zero, we have the NP-hard Strip Packing Problem (SPP)
– Dynamic programming to place the tags optimally and keep only the best solution
Next Fit Decreasing Height, Weight heuristic (NFDHW)
![Page 6: Tag-Cloud Drawing: Algorithm for Cloud Visualization Owen Kaser, Daniel Lemire Speaker: Yi-Ching Huang 2007/07/17](https://reader036.vdocument.in/reader036/viewer/2022062516/56649e165503460f94b00e95/html5/thumbnails/6.jpg)
Strip Packing Problem
First Fit Decreasing Height (FFDH)Next Fit Decreasing Height (NFDH)
![Page 7: Tag-Cloud Drawing: Algorithm for Cloud Visualization Owen Kaser, Daniel Lemire Speaker: Yi-Ching Huang 2007/07/17](https://reader036.vdocument.in/reader036/viewer/2022062516/56649e165503460f94b00e95/html5/thumbnails/7.jpg)
Cloud Layout with Arbitrary Placement Min-cut placement
– Placement approaches in EDA– Recursively decomposes a collection of
tags by bipartitioning: splitting the tags into a “left” group and a “right” group
![Page 8: Tag-Cloud Drawing: Algorithm for Cloud Visualization Owen Kaser, Daniel Lemire Speaker: Yi-Ching Huang 2007/07/17](https://reader036.vdocument.in/reader036/viewer/2022062516/56649e165503460f94b00e95/html5/thumbnails/8.jpg)
Slicing Floorplans & Slicing Tree
Slicing floorplans
Slicing tree
![Page 9: Tag-Cloud Drawing: Algorithm for Cloud Visualization Owen Kaser, Daniel Lemire Speaker: Yi-Ching Huang 2007/07/17](https://reader036.vdocument.in/reader036/viewer/2022062516/56649e165503460f94b00e95/html5/thumbnails/9.jpg)
Nested Tables for Slicing Floorplans Trick: each internal node in the slicing
tree corresponds to a 2-element table in HTML
![Page 10: Tag-Cloud Drawing: Algorithm for Cloud Visualization Owen Kaser, Daniel Lemire Speaker: Yi-Ching Huang 2007/07/17](https://reader036.vdocument.in/reader036/viewer/2022062516/56649e165503460f94b00e95/html5/thumbnails/10.jpg)
Tag Cloud with CSS
![Page 11: Tag-Cloud Drawing: Algorithm for Cloud Visualization Owen Kaser, Daniel Lemire Speaker: Yi-Ching Huang 2007/07/17](https://reader036.vdocument.in/reader036/viewer/2022062516/56649e165503460f94b00e95/html5/thumbnails/11.jpg)
Result: Tag Cloud with Inline Text
![Page 12: Tag-Cloud Drawing: Algorithm for Cloud Visualization Owen Kaser, Daniel Lemire Speaker: Yi-Ching Huang 2007/07/17](https://reader036.vdocument.in/reader036/viewer/2022062516/56649e165503460f94b00e95/html5/thumbnails/12.jpg)
Result: Tag Cloud with Arbitrary Placement
![Page 13: Tag-Cloud Drawing: Algorithm for Cloud Visualization Owen Kaser, Daniel Lemire Speaker: Yi-Ching Huang 2007/07/17](https://reader036.vdocument.in/reader036/viewer/2022062516/56649e165503460f94b00e95/html5/thumbnails/13.jpg)
Conclusion
Use simple HTML with CSS to layout tags
Two approaches for displaying tag cloud– inline text– arbitrary placement