2b:null 2c:["$","title",null,{"children":"D3 Wordcloud with Masks | Alok Pepakayala | Observable"}] 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:{"id":"c6add19aaca2670d","slug":"d3-wordcloud-with-masks","title":"D3 Wordcloud with Masks","thumbnail":"efce31182c01b058db5943a48f8eeb3358c728c500621e81093c1fe567fdd0e0","access_level":"public","create_time":"$D2023-09-17T12:20:51.565Z","update_time":"$D2023-09-27T10:48:58.380Z","view_time":null,"first_public_time":"$D2023-09-23T19:19:54.572Z","fork":false,"stars":11,"starred":false,"owner":{"type":"team","id":"ebdd8a722ae381e2","login":"a10k","name":"Alok Pepakayala","avatar_url":"https://avatars-next.observableusercontent.com/f28a7b5f4fb16a63caaace8a87a531e60bea383d6e9d50e126570c77c0814ba9","tier":"starter_2024"},"version":115,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e594cd7b50bd5352","login":"a10k","name":"Alok Pepakayala","avatar_url":"https://avatars-next.observableusercontent.com/a79accbaf1cb39d92bac556179588a03429b7ed84c64707b7ae8d86c9ffacfc7","tier":null}],"members":[{"type":"individual","id":"e594cd7b50bd5352","login":"a10k","name":"Alok Pepakayala","avatar_url":"https://avatars-next.observableusercontent.com/a79accbaf1cb39d92bac556179588a03429b7ed84c64707b7ae8d86c9ffacfc7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined"},{"id":23,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":34,"value":"cloud = require(await FileAttachment(\"d3.layout.cloud.js\").url()) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":95,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"