Is is possible to add links to the words in the word cloud?

[pmi123]

I was wondering if it is possible to add links to the words in word cloud. Maybe an image map of some kind? I have not found any references on the net to see if it is possible. Can you provide an example if it is possible?

Thanks,

Mark

[amueller]

Hi Mark. You can either use the content of the layout attribute to create your own image map, or you could use the to_svg method to generate an SVG which might make it possible to add links?

If you do use either method, make sure to submit a PR for an example :) Andreas

[pmi123]

Hi Andreas!

Thanks for your response to my question. I solved the problem of adding links by adding an "a" tag to the draw method as follows. I didn't need an image map after all. The key was using xlink:hrf for the "a" tag. To keep the word from changing the color of the word when clicked, I had to add the fill color to the link as well.

function draw(words) { svg .append("g") .attr("transform", "translate(" + layout.size()[0] / 2 + "," + layout.size()[1] / 2 + ")") .selectAll("text") .data(words) .enter().append("text") .style("font-size", function(d) { return d.size; }) .style("fill", function(d) { return d.color; }) .attr("text-anchor", "middle") .style("font-family", "Impact") .attr("transform", function(d) { return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")"; }) .append("a") .attr("xlink:href", function(d) { return d.url; }) .attr("style", function(d) { return "font-size:"+d.size+"px; fill:"+d.color+";"; }) .text(function(d) { return d.text; }); }

The word data comes from my django server in the form {'word': word.word, 'size': word.frequency, 'color': word.frequency, 'url': 'wordcloud.html?name='+wordcloud_name+'&word='+word.word}. I get the colors from d3.interpolateTurbo().

I have attached a sample from a test file.

Thanks again!

Mark

On Thu, Dec 3, 2020 at 7:50 PM Andreas Mueller notifications@github.com wrote:

Hi Mark. You can either use the content of the layout attribute to create your own image map, or you could use the to_svg method to generate an SVG which might make it possible to add links?

If you do use either method, make sure to submit a PR for an example :) Andreas

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/amueller/word_cloud/issues/612#issuecomment-738527383, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAW46D6YACQVFPPIAV2X3RLSTBE6BANCNFSM4ULPQJQQ .

[amueller]

Thanks, I'm glad this worked for you. Do you want to send a PR to add this to an example? otherwise I'll keep it open for someone else to give it a shot.

[pmi123]

Andreas,

I don't know how to create a PR (pull request?), nor what I would put in it. Sorry, I haven't done that before. If you have some detailed instructions, I am happy to do it.

Mark

On Thu, Dec 10, 2020 at 4:10 PM Andreas Mueller notifications@github.com wrote:

Thanks, I'm glad this worked for you. Do you want to send a PR to add this to an example? otherwise I'll keep it open for someone else to give it a shot.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/amueller/word_cloud/issues/612#issuecomment-742858442, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAW46D6FCTQ5TGVYGQNNCJ3SUFINXANCNFSM4ULPQJQQ .

[amueller]

Thanks, and sorry if I was being a bit cryptic. Basically a pull request is a way to send some code to have it included. To do that, you'll fork the repository (button on the top right), clone your repository to your local machine, make some changes, push them to your fork, and then use the github UI to create a new pull request. There's some nice tutorials here: https://www.youtube.com/results?search_query=creating+a+pull+request

The idea would be to change one of the python examples so that It'll produce a html with the links included.

You could copy one of the existing examples: https://amueller.github.io/word_cloud/auto_examples/index.html#example-gallery

for example https://github.com/amueller/word_cloud/blob/master/examples/simple.py

and make a new example that adds the code to inject the links.

[pmi123]

Andreas,

Thanks for the explanation for a newbie.

I will take a look at the links and work on the updates.

Have a great weekend!

Mark

On Fri, Dec 11, 2020 at 12:43 PM Andreas Mueller notifications@github.com wrote:

Thanks, and sorry if I was being a bit cryptic. Basically a pull request is a way to send some code to have it included. To do that, you'll fork the repository (button on the top right), clone your repository to your local machine, make some changes, push them to your fork, and then use the github UI to create a new pull request. There's some nice tutorials here: https://www.youtube.com/results?search_query=creating+a+pull+request

The idea would be to change one of the python examples so that It'll produce a html with the links included.

You could copy one of the existing examples:

https://amueller.github.io/word_cloud/auto_examples/index.html#example-gallery

for example https://github.com/amueller/word_cloud/blob/master/examples/simple.py

and make a new example that adds the code to inject the links.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/amueller/word_cloud/issues/612#issuecomment-743390486, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAW46D4CFNP2Z737RYH53HLSUJY6NANCNFSM4ULPQJQQ .

[amueller]

Thanks, you too!

[doccodyblue]

Did this ever make any progress? I would really like to generate an imagemap along with the image to a some href.

[amueller]

@doccodyblue the proposed solution is above, but there's no example in the repo as far as I remember. But the code above should work.