This looks really cool, but I'm going to use it as a quick illustration of a pet peeve. The README says this:<p><pre><code> <script>
import ZoomableCircles from "svelte-zoomable-circles";
</script>
<ZoomableCircles tree={treeObject} />
</code></pre>
That's not enough information for me to use this thing!<p>As an infrequent user of JavaScript libraries it's now on me to figure out which of the various bundlers (WebPack? Vite? esbuild? Some other thing?) are in-vogue right now, then work out the incantations needed to get the above syntax converted into code that actually runs in a browser.<p>I made extensive notes on this the other day when I tried to get quickjs-emscripten to work - I really wish I didn't have to jump through so many hoops every time I want to try something out new in npm land: <a href="https://til.simonwillison.net/npm/self-hosted-quickjs" rel="nofollow">https://til.simonwillison.net/npm/self-hosted-quickjs</a>
Neat way to build your own version of Amelia’s code repo visualization:<p><a href="https://githubnext.com/projects/repo-visualization/" rel="nofollow">https://githubnext.com/projects/repo-visualization/</a>
(1) Check out the underlying D3 example of zoomable circles - <a href="https://observablehq.com/@d3/zoomable-circle-packing?intent=fork" rel="nofollow">https://observablehq.com/@d3/zoomable-circle-packing?intent=...</a><p>(2) Explore D3.js interactive visualization demos -<p><a href="https://observablehq.com/@d3/gallery" rel="nofollow">https://observablehq.com/@d3/gallery</a><p>I show potential clients this demo page frequently, and it never ceases to blow minds and start interesting conversations!<p>Enjoy.
This is fantastic, really cool looking library.<p>Has anyone built something like this, or possible a normal rectangular tree map, where the actual nodes in each subsection include images? I’d love to build an interactive thing like this but have it include graphical nodes with some data attributes (let’s say name, price, etc) once zoomed in.
Minor interaction feedback: on mobile it is often hard to drill into a group without accidentally drilling into a specific subgroup inside it. Because my thumb is too fat to find the hit target which is in the group but NOT in any of its children.
Looks like another D3 wrapper at its core. Which is cool! I do think D3 is great.<p>I do wonder if data visualization will ever get framework specific options. I wonder how hard it would be to re-create this in Svelte proper
Here's the Github for the demo link: <a href="https://github.com/tylerb1/openopensource?tab=readme-ov-file">https://github.com/tylerb1/openopensource?tab=readme-ov-file</a>
Reminds me of Veratasium's visual representation of p-adic numbers.<p><a href="https://youtu.be/tRaq4aYPzCc?t=1514" rel="nofollow">https://youtu.be/tRaq4aYPzCc?t=1514</a>
Really nice. Couple of points -<p>The link to the demo is invalid - it goes to Github.<p>Also, what's the difference between this and the other demo you've linked to by Svend3r?
I don't understand why this needs to be its own package, looking at the code everything seems to be implemented in the `ZoomableCircles.svelte` file which is ~200 lines long (<a href="https://www.npmjs.com/package/svelte-zoomable-circles?activeTab=code" rel="nofollow">https://www.npmjs.com/package/svelte-zoomable-circles?active...</a> - also fun fact, you can't link a specific file from the NPM code browser tab). Writing a blog post on how to create something similar would be way more useful than this package.<p>This culture of using packages for simple things needs to die.