0

I'm pretty new to d3, and am looking for some nudges in the correct direction for obtaining an effect I would like. The essence of what I want to do is create a word cloud (see Word Cloud Generator) but restrict all words inside or outside of a complex boundary. Imagine I drew the complex outline of a flamingo (i.e., a shape not easily generated directly in d3/mathematically) in some vector-based drawing program such as illustrator, and I'm interested in restricting all of the words that make up my word cloud either inside or outside the flamingo. Unfortunately my image won't be a flamingo... but you get the idea. The most complex shapes that I've encountered in d3 thus far, to which people map data, are probably geo-json coordinates, but I'm not sure if you can export a vector based-image in such a format.

As with many d3 beginners, I'm still becoming more familiar/comfortable with everything web (svg, javascript, dom, css, etc) and so I'm really looking to just get a nudge in the direction of the easiest/most direct way to obtain this effect, and with a few key words I am happy to continue googling/researching on my own. A handful of searches with the key words I've considered so far hasn't been very fruitful so I thought I'd ask for suggestions here.

williaster
  • 93
  • 1
  • 6
  • This is not an easy task; you'd have to completely re-write the word cloud code, and figuring out a good algorithm to fit the words to the shapes would not be easy. – AmeliaBR Mar 20 '14 at 16:48
  • thanks for the comment. I was assuming I would re-write the word cloud code. you think this is hard enough not to pursue? Is custom svg to geojson not a viable option? – williaster Mar 21 '14 at 05:44
  • I'm not sure how you think geoJSON would help. Packing elements tightly into a shape is [already a difficult task](http://stackoverflow.com/q/13339615/3128209), and testing if a given element is inside another arbitrary shape isn't easy either. Combining the two together isn't going to be impossible, but it isn't a task I'd recommend for a beginner. That said, to get yourself started and to get an idea of how big the problem is, sit down and, without worrying about the exact Javascript/SVG terminology, try to figure out the calculations you would use to position the words. – AmeliaBR Mar 21 '14 at 16:22
  • 1
    There is a possibility that if you dig into Tagxedo, you might get some help there: http://www.tagxedo.com/ – benteh Mar 22 '14 at 01:06
  • @AmeliaBR this is definitely a harder ploblem than I initially thought, thanks for your input – williaster Mar 22 '14 at 06:05
  • @boblet thanks for the tagxedo tip! although I won't learn d3 any better this will definitely help me achieve the effect I want – williaster Mar 22 '14 at 06:05
  • Yes, I agree there; but there could be a small possibility that you could get some pointers from the creator. I know D3 and Silverlight is not exactly interchangeable, but I imagine insight into the basic for creating the shapes and keeping the words within that shape might in principle be the same. If you could knit the code together ...best of luck. – benteh Mar 22 '14 at 12:10
  • Did you ever end up doing this in D3? I was looking to do the same – shivas Apr 14 '16 at 13:31

0 Answers0