31:T411,example = { animation_tick; var svg = html``; var mask = await FileAttachment("heart.png").image(); var layout = cloud() .size([500, 500]) .mask(mask) .words(words) .padding(1) .font("Source Serif Pro") .fontSize(function (d) { return d.size; }) .on("end", function draw(words) { d3.select(svg) .append("g") .attr( "transform", "translate(" + layout.size()[0] / 2 + "," + layout.size()[1] / 2 + ")" ) .selectAll("text") .data(words) .enter() .append("text") .style("font-size", (d) => d.size + "px") .style("fill", "#ED6262") .style("font-family", "Source Serif Pro") .attr("text-anchor", "middle") .attr("transform", function (d) { return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")"; }) .text(function (d) { return d.text; }); }); layout.start(); return svg; }32:T5b7,## How does the word cloud work? - A blank canvas is created - Words are drawn to that canvas next to each other - Each drawn word is cached as a Sprite - Sprites used here are special, they are made of pixels that are binary on/off 1/0, so we can do bitwise stuff on them - Sprites are also condenced horizontally, i.e. 32 binary pixels become one integer! - A **blank** large sprite of the desired size is created and called board - A placement algorithm will be used to spiral from center to edge checking if the word collides or not - We start with big words, if small words dont have space they are ignored - We end up with the final image ## How to add masks? This is the best part, I simple had to replace the blank sprite with the image based one. ## Cool bitwise hacks!? ~~~js number >> 5 //divide by 32 number << 5 //multiply by 32 //2^5, also works for other numbers m = pixels[((y + j) * (cw << 5) + (x + i)) << 2] ? 1 << (31 - (i % 32)) : 0; sprite[k] |= m; ~~~ The above line checks for a pixel position and 4th offset to get its alpha value (rgbA channel of the pixel) from canvas data, if its present it basically sets a bit and later uses this to apply bitwise OR for the rest of the 32 pixels to create a sprite to be used for collision ditection. ## Example ⬛⬛⬛⬛⬜⬜⬜⬛⬛⬛⬛⬛⬜⬜⬜⬛⬛⬛⬛⬜⬜⬜⬛⬛⬛⬛⬛⬜⬜⬜ Becomes **000011100000111000011100000111** Which is stored as an integer **58951431**33:[{"id":"f03b79ac8d1bf9dc0aafb0566acdef441e5e0712b3897bbbfd34fa9cccff2e2a326bc9dbd75df8146ad2505cdba3c386b1e1ea1b87139b8e6745863710b376c8","href":"https://static.observableusercontent.com/files/f03b79ac8d1bf9dc0aafb0566acdef441e5e0712b3897bbbfd34fa9cccff2e2a326bc9dbd75df8146ad2505cdba3c386b1e1ea1b87139b8e6745863710b376c8","name":"d3.layout.cloud.js","type":"application/javascript","lastModified":1695493629605.309,"size":15837},{"id":"d33d5c1420f915da90069531c16b37d9147ece27d3653375b12875ca22cc2ef2f913beb6fb7951cc73b16f35e25f57cc41f08acd7c93c95823766e6b49bd2ca9","href":"https://static.observableusercontent.com/files/d33d5c1420f915da90069531c16b37d9147ece27d3653375b12875ca22cc2ef2f913beb6fb7951cc73b16f35e25f57cc41f08acd7c93c95823766e6b49bd2ca9","name":"heart.png","type":"image/png","lastModified":1695493743556.29,"size":6283}] 2f:{"title":"D3 Wordcloud with Masks","cells":[{"id":3,"value":"# D3 Wordcloud with Masks\n\nSource code: https://github.com/a10k/d3-cloud (Fork from https://github.com/jasondavies/d3-cloud PR pending)","pinned":false,"hidden":false,"mode":"md"},{"id":23,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"animation_tick = {\n // this has nothing to do with the wordcloud, its just here to make the word cloud rerender every 3 seconds!\n let i = 0;\n while (true) {\n yield Promises.tick(3000, ++i);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"words = {\n var count = 500;\n var scale = d3.scaleSqrt().range([80, 20, 2]).domain([0, 5, count]);\n var words = d3.range(0, count).map((d) => {\n return {\n text: \"Observable\",\n size: scale(d)\n };\n });\n return words;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"cloud = require(await FileAttachment(\"d3.layout.cloud.js\").url()) ","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"I was not a huge fan of word-clouds for analytics at first, but similar to pie charts they have their place in the world and I found them useful in several instances. Especially when presenting overviews in a short pitch of large data sets. \n\n[Jason Davies](https://github.com/jasondavies/d3-cloud )' word cloud was the go to, but few years back I came across the python word-cloud library doing masks, I was quick to assume this was available in JavaScript somewhere, if it was, I was unable to find it for sure, and had to fallback to the python library for that one time I needed to use images, but had it in my watch list, and 4 years later, I was still unable to find one so I added the mask feature myself, I expected it to be complex, all the bit wise math in the code scared me initially, but this only took a couple of hours, I used observable to be able to visualize some of the internal representations and understand the math which accelerated the effort.","pinned":false,"hidden":false,"mode":"md"},{"id":95,"value":"$32","pinned":false,"hidden":false,"mode":"md"}],"files":"$W33","stdlib":"1","titling":"auto"}