[HN Gopher] Zoomable Circles, a Svelte component for hierarchica...
___________________________________________________________________
Zoomable Circles, a Svelte component for hierarchical data
Author : whb101
Score : 107 points
Date : 2024-03-31 12:02 UTC (10 hours ago)
(HTM) web link (www.npmjs.com)
(TXT) w3m dump (www.npmjs.com)
| keepamovin wrote:
| I love this way of exploring hierarchical or tree data. Looks
| very useful. Hope it can scale!
| halfcat wrote:
| You might like Workflowy. It's not circles, but you can
| infinitely zoom into a tree of hierarchical data.
|
| https://workflowy.com
| keepamovin wrote:
| 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. :)
| thunderbong wrote:
| 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?
| whb101 wrote:
| 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.
| kingkongjaffa wrote:
| Does anyone know an equivalent react based version?
| orangepanda wrote:
| Embed svelte into a react component?
| jgalt212 wrote:
| I was gonna make a snarky joke about performance, but given
| Svelte's compiler this is probably a good way to go.
| spankalee wrote:
| This is why these things should be made with web components.
| paulddraper wrote:
| Svelte can target web components. Should be a fairly simple
| adjustment.
| skadamat wrote:
| Neat way to build your own version of Amelia's code repo
| visualization:
|
| https://githubnext.com/projects/repo-visualization/
| lloydatkinson wrote:
| Neat! I wonder if there's a React version of this.
| dcsan wrote:
| Please post if you find anything!
| dchuk wrote:
| 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.
| eriksjolund wrote:
| 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
| Veuxdo wrote:
| 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.
| no_wizard wrote:
| 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
| sbarre wrote:
| > 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?
| cchance wrote:
| 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
| hamburglar wrote:
| 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.
| monocasa wrote:
| Reminds me of Veratasium's visual representation of p-adic
| numbers.
|
| https://youtu.be/tRaq4aYPzCc?t=1514
| passion__desire wrote:
| Reminds me of Prezi slide transitions.
| Lorin wrote:
| Makes me wonder about visualizing graph DBs
| yawnxyz wrote:
| Here's the Github for the demo link:
| https://github.com/tylerb1/openopensource?tab=readme-ov-file
| simonw wrote:
| 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
| andsoitis wrote:
| > 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...
| simonw wrote:
| 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.
| cchance wrote:
| 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
| whb101 wrote:
| 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.
| ionelaipatioaei wrote:
| 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.
| cchance wrote:
| Begs the question what the performance looks like with say 3
| levels and a few thousand lowest level entries
___________________________________________________________________
(page generated 2024-03-31 23:00 UTC)