Zoomable Circles, a Svelte component for hierarchical data | Hacker News Reader

Zoomable Circles, a Svelte component for hierarchical data

npmjs.com

147 pointswhb10139 comments

This looks really cool, but I'm going to use it as a quick illustration of a pet peeve. The README says this:

    <script>
 import ZoomableCircles from "svelte-zoomable-circles";
    </script>
    <ZoomableCircles tree={treeObject} />

That's not enough information for me to use this thing!

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.

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: https://til.simonwillison.net/npm/self-hosted-quickjs

> That's not enough information for me to use this thing! 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.

This might help - I notice two things on the landing page:

a) How to install: npm i svelte-zoomable-circles

b) Dev dependencies (which lists "vite"): https://www.npmjs.com/package/svelte-zoomable-circles?active...

My problem is with the steps in between running "npm i svelte-zoomable-circles" and having code that works in my browser and displays a working UI element.

I mean isn't the step... not actually between those steps... its... have a svelte app... i mean this isn't a standalone js lib, it's a svelte component, if you have svelte up.. those are the only steps :S

OK, that makes sense - I had forgotten that Svelte is a compiler-driven thing so it's reasonable to expect Svelte users to have that figured out already.

Man their tutorials are so good and make me want to use this.

First of all: big fan of your work! Thanks for taking the time to check this out.

You’re right, I kind of let the fact that “svelte” is in the name do too much of the work for me - this is specifically a Svelte component. I’ll add that fact to the readme. As for bundler, Vite is preferred but you should be able to use any.

As others have noted, this is a relatively thin wrapper over D3 code. Based on this and other feedback, I might go ahead and make this into a web component so that it’s completely framework-agnostic.

Could add a line in readme for: do this in Vite (our preferred tool).

And big +1 (+2?) for framework agnostic.

If it's any help, here's a lit+svg web component I did as a learning exercise: http://hermit1.scsys.co.uk/~matthewt/clock/t8b.html

Given JS imports are direct references, you can export a 'let' from a module and if it's modified by the module the importing thing will see the change (though it isn't allowed to set the value) ... though of course you want to be able to have more than one set of state, so that's probably not applicable here, paragraph left for the interested.

But. It seems like you could have the template logic in svelte style and lit style and share basically everything else easily enough if you wanted to. Not sure that's the best way to refactor, just mentioning.

Very neat piece of code though, I'm not sure I have any idea when I'd use it but I definitely intend to go back to the code to learn more about doing cool things with d3. Cheers!

Related peeve (unrelated to this project):

So many tutorials for various jvm libraries will give nice code snippets to demo usage BUT not include any of the import statements.

Don’t just tell me how to use the thing without also telling me where it lives!

Neat way to build your own version of Amelia’s code repo visualization:

https://githubnext.com/projects/repo-visualization/

(1) Check out the underlying D3 example of zoomable circles - https://observablehq.com/@d3/zoomable-circle-packing?intent=...

(2) Explore D3.js interactive visualization demos -

https://observablehq.com/@d3/gallery

I show potential clients this demo page frequently, and it never ceases to blow minds and start interesting conversations!

Enjoy.

This is fantastic, really cool looking library.

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.

How to display circles on top of zoomable images without getting flickering is an interesting problem. (This comment does not refer specifically to displaying a tree map)

I noticed that painting the circles on top of an overlay with OpenSeadragon caused flickering [1]. However, when painting circles on top of the pyramid image tiles that OpenSeadragon loaded, there was no flickering.

This was my conclusion in 2016 when I created a web viewer that showed circles on top of a microscope photo [2]. Architecture: single file format containing an index, pyramid image tiles and measurement data for circles. To make this work, I intercepted the function call that OpenSeadragon usually uses to download an image tile. Instead, I provided OpenSeadragon with an image tile that already had the circle painted on it.

[1] https://openseadragon.github.io/examples/ui-overlays/ [2] demo: https://eriksjolund.github.io/osd-spot-viewer-webpack-build/... (The demo only worked on Linux. I'm not sure if it still works) source code: https://github.com/eriksjolund/osd-spot-viewer

I'm building Ilograph, which has what you're describing as a special case of a diagram with no relations. For example: https://app.ilograph.com/demo.ilograph.AWS%2520Distributed-L...

Note that this is an app, not a library.

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.

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 wonder how hard it would be to re-create this in Svelte proper

Honest question: why would you?

It feels like a better architecture for each front-end framework to simply compose an existing best-of-breed library like D3 rather than try to replicate it?

Agreed, i don't get rewriting a JS library into another JS library, now if your gonna tell me a d3, wasm library or something written in c or rust to improve performance or something with a result, but just rewriting a backend from JS to another JS to be "the svelte way" in the backend seems silly vs just writing a clean svelte wrapper over a JS lib

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

You might like Workflowy. It’s not circles, but you can infinitely zoom into a tree of hierarchical data.

https://workflowy.com

Thank you! If it has a github link I will star it now to remem. :)

edit: I clicked starred your github but not sure if it's directly related to this site. It ok, it will help me remem it. :)

Here's the Github for the demo link: https://github.com/tylerb1/openopensource?tab=readme-ov-file

Here's the actual demo link: https://openopensource.com/

Reminds me of Veratasium's visual representation of p-adic numbers.

https://youtu.be/tRaq4aYPzCc?t=1514

Reminds me of Prezi slide transitions.

Really nice. Couple of points -

The link to the demo is invalid - it goes to Github.

Also, what's the difference between this and the other demo you've linked to by Svend3r?

Thanks for flagging!

Not very much difference; primarily the props that replace opinionated presets. Wanted to make an easier-to-find, plug-and-play version since I liked using it for my own project and noticed the data structure is a fairly common one that people may want to browse visually.

Does anyone know an equivalent react based version?

Embed svelte into a react component?

I was gonna make a snarky joke about performance, but given Svelte's compiler this is probably a good way to go.

This is why these things should be made with web components.

Svelte can target web components. Should be a fairly simple adjustment.

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.

Please post if you find anything!

Makes me wonder about visualizing graph DBs

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 (https://www.npmjs.com/package/svelte-zoomable-circles?active... - 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.

This culture of using packages for simple things needs to die.

Reply on news.ycombinator.com