3 ms·

This is a truly impressive implementation, based on previous work by Jonathan Feinberg [1]. The display uses SVG, but the character outlines are computed by can

This is a truly impressive implementation, based on previous work by Jonathan Feinberg [1]. The display uses SVG, but the character outlines are computed by canvas bitmaps. Then, Jason implemented hierarchical bounding boxes to accelerate the intersection checks. Be sure to play with the draggable "0" and "1" letters beneath the demo! Try clicking on words to navigate between word clouds. The cross-fade transition is beautiful, and words that overlap between clouds transform in their new position. Non-English word clouds look amazing, too: http://www.jasondavies.com/wordcloud/#http%3A%2F%2Fsearch.twitter.com%2Fsearch.json%3Frpp%3D100%26q%3D%7Bword%7D@%D8%B3%D9%88%D8%B1%D9%8A%D8%A9%E2%80%8E http://www.jasondavies.com/wordcloud/#http%3A%2F%2Fsearch.tw... [1] http://static.mrfeinberg.com/bv_ch03.pdf http://static.mrfeinberg.com/bv_ch03.pdf

jasondavies 15y ago
Thanks! Minor correction: I implemented hierarchical bounding boxes separately, as per Jonathan Feinberg's paper, but they turned out to be slower in all the cases I tried (even large words and areas). I was also using a quadtree to cut down the number of comparisons with previously-placed words. In my version, once a word is placed, I copy it to the relevant position in a large sprite representing all the words placed so far. So placing a new word means it only needs to be compared with the candidate area of the large sprite, rather than multiple comparisons with all previously-placed words. I'd like to try a hierarchical sprite version, where you compare against coarse-grained sprites first of all. This would essentially be a quadtree. The implementation would be a bit trickier because I'm also compressing blocks of 32 1-bit pixels into 32-bit integers, which also helped with performance.

3 ms·

This is a truly impressive implementation, based on previous work by Jonathan Feinberg [1]. The display uses SVG, but the character outlines are computed by can

by mbostock 15y ago

jasondavies 15y ago
Thanks! Minor correction: I implemented hierarchical bounding boxes separately, as per Jonathan Feinberg's paper, but they turned out to be slower in all the cases I tried (even large words and areas). I was also using a quadtree to cut down the number of comparisons with previously-placed words. In my version, once a word is placed, I copy it to the relevant position in a large sprite representing all the words placed so far. So placing a new word means it only needs to be compared with the candidate area of the large sprite, rather than multiple comparisons with all previously-placed words. I'd like to try a hierarchical sprite version, where you compare against coarse-grained sprites first of all. This would essentially be a quadtree. The implementation would be a bit trickier because I'm also compressing blocks of 32 1-bit pixels into 32-bit integers, which also helped with performance.