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
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.
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!
> 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:
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.
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.
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.
> 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
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.
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.
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