Zoomable Circles, a Svelte component for hierarchical data

This looks really cool, but I&#x27;m going to use it as a quick illustration of a pet peeve. The README says this:<p><pre><code> &lt;script&gt; import ZoomableCircles from &quot;svelte-zoomable-circles&quot;; &lt;&#x2F;script&gt; &lt;ZoomableCircles tree={treeObject} &#x2F;&gt; </code></pre> That&#x27;s not enough information for me to use this thing!<p>As an infrequent user of JavaScript libraries it&#x27;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&#x27;t have to jump through so many hoops every time I want to try something out new in npm land: <a href="https:&#x2F;&#x2F;til.simonwillison.net&#x2F;npm&#x2F;self-hosted-quickjs" rel="nofollow">https:&#x2F;&#x2F;til.simonwillison.net&#x2F;npm&#x2F;self-hosted-quickjs</a>

Neat way to build your own version of Amelia’s code repo visualization:<p><a href="https:&#x2F;&#x2F;githubnext.com&#x2F;projects&#x2F;repo-visualization&#x2F;" rel="nofollow">https:&#x2F;&#x2F;githubnext.com&#x2F;projects&#x2F;repo-visualization&#x2F;</a>

(1) Check out the underlying D3 example of zoomable circles - <a href="https:&#x2F;&#x2F;observablehq.com&#x2F;@d3&#x2F;zoomable-circle-packing?intent=fork" rel="nofollow">https:&#x2F;&#x2F;observablehq.com&#x2F;@d3&#x2F;zoomable-circle-packing?intent=...</a><p>(2) Explore D3.js interactive visualization demos -<p><a href="https:&#x2F;&#x2F;observablehq.com&#x2F;@d3&#x2F;gallery" rel="nofollow">https:&#x2F;&#x2F;observablehq.com&#x2F;@d3&#x2F;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

I love this way of exploring hierarchical or tree data. Looks very useful. Hope it can scale!

Here&#x27;s the Github for the demo link: <a href="https:&#x2F;&#x2F;github.com&#x2F;tylerb1&#x2F;openopensource?tab=readme-ov-file">https:&#x2F;&#x2F;github.com&#x2F;tylerb1&#x2F;openopensource?tab=readme-ov-file</a>

Reminds me of Veratasium&#x27;s visual representation of p-adic numbers.<p><a href="https:&#x2F;&#x2F;youtu.be&#x2F;tRaq4aYPzCc?t=1514" rel="nofollow">https:&#x2F;&#x2F;youtu.be&#x2F;tRaq4aYPzCc?t=1514</a>

Really nice. Couple of points -<p>The link to the demo is invalid - it goes to Github.<p>Also, what&#x27;s the difference between this and the other demo you&#x27;ve linked to by Svend3r?

Does anyone know an equivalent react based version?

Begs the question what the performance looks like with say 3 levels and a few thousand lowest level entries

Any good tools out there for visualizing multi-dimensional hierarchies?

Neat! I wonder if there’s a React version of this.

Makes me wonder about visualizing graph DBs

I don&#x27;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:&#x2F;&#x2F;www.npmjs.com&#x2F;package&#x2F;svelte-zoomable-circles?activeTab=code" rel="nofollow">https:&#x2F;&#x2F;www.npmjs.com&#x2F;package&#x2F;svelte-zoomable-circles?active...</a> - also fun fact, you can&#x27;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.