<script>
import ZoomableCircles from "svelte-zoomable-circles";
</script>
<ZoomableCircles tree={treeObject} />
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
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!
And big +1 (+2?) for framework agnostic.
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...
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!
(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.
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.
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
Note that this is an app, not a library.
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
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?
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. :)
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?
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.
This culture of using packages for simple things needs to die.