7 ms·

Zoomable Circles, a Svelte component for hierarchical data

147 points by whb101 3y ago

keepamovin 3y ago
I love this way of exploring hierarchical or tree data. Looks very useful. Hope it can scale!
- halfcat 3y ago
  You might like Workflowy. It’s not circles, but you can infinitely zoom into a tree of hierarchical data. https://workflowy.com https://workflowy.com
  - keepamovin 3y ago
    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 3y ago
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 3y ago
  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 3y ago
Does anyone know an equivalent react based version?
- orangepanda 3y ago
  Embed svelte into a react component?
  - jgalt212 3y ago
    I was gonna make a snarky joke about performance, but given Svelte's compiler this is probably a good way to go.
- spankalee 3y ago
  This is why these things should be made with web components.
  - paulddraper 3y ago
    Svelte can target web components. Should be a fairly simple adjustment.
skadamat 3y ago
Neat way to build your own version of Amelia’s code repo visualization: https://githubnext.com/projects/repo-visualization/ https://githubnext.com/projects/repo-visualization/
lloydatkinson 3y ago
Neat! I wonder if there’s a React version of this.
- dcsan 3y ago
  Please post if you find anything!
dchuk 3y ago
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 3y ago
  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/ https://openseadragon.github.io/examples/ui-overlays/ [2] demo: https://eriksjolund.github.io/osd-spot-viewer-webpack-build/build2/ 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 https://github.com/eriksjolund/osd-spot-viewer
- Veuxdo 3y ago
  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-Load-Testing/__resources https://app.ilograph.com/demo.ilograph.AWS%2520Distributed-L... Note that this is an app, not a library.
no_wizard 3y ago
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 3y ago
  > 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 3y ago
    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 3y ago
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 3y ago
Reminds me of Veratasium's visual representation of p-adic numbers. https://youtu.be/tRaq4aYPzCc?t=1514 https://youtu.be/tRaq4aYPzCc?t=1514
- passion__desire 3y ago
  Reminds me of Prezi slide transitions.
Lorin 3y ago
Makes me wonder about visualizing graph DBs
evanjrowley 3y ago
Any good tools out there for visualizing multi-dimensional hierarchies?
yawnxyz 3y ago
Here's the Github for the demo link: https://github.com/tylerb1/openopensource?tab=readme-ov-file https://github.com/tylerb1/openopensource?tab=readme-ov-file
- MaxBarraclough 3y ago
  Here's the actual demo link: https://openopensource.com/ https://openopensource.com/
simonw 3y ago
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 https://til.simonwillison.net/npm/self-hosted-quickjs
- andsoitis 3y ago
  > 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?activeTab=dependencies https://www.npmjs.com/package/svelte-zoomable-circles?active...
  - simonw 3y ago
    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 3y ago
      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
ionelaipatioaei 3y ago
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?activeTab=code 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 3y ago
Begs the question what the performance looks like with say 3 levels and a few thousand lowest level entries
florid 3y ago
[dead]
dv35z 3y ago
(1) Check out the underlying D3 example of zoomable circles - https://observablehq.com/@d3/zoomable-circle-packing?intent=fork https://observablehq.com/@d3/zoomable-circle-packing?intent=... (2) Explore D3.js interactive visualization demos - https://observablehq.com/@d3/gallery 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.

147 points by whb101 3y ago

keepamovin 3y ago

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

halfcat 3y ago
You might like Workflowy. It’s not circles, but you can infinitely zoom into a tree of hierarchical data. https://workflowy.com https://workflowy.com
- keepamovin 3y ago
  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 3y ago

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 3y ago
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 3y ago

Does anyone know an equivalent react based version?

orangepanda 3y ago
Embed svelte into a react component?
- jgalt212 3y ago
  I was gonna make a snarky joke about performance, but given Svelte's compiler this is probably a good way to go.
spankalee 3y ago
This is why these things should be made with web components.
- paulddraper 3y ago
  Svelte can target web components. Should be a fairly simple adjustment.

skadamat 3y ago

Neat way to build your own version of Amelia’s code repo visualization: https://githubnext.com/projects/repo-visualization/ https://githubnext.com/projects/repo-visualization/

lloydatkinson 3y ago

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

dcsan 3y ago
Please post if you find anything!

dchuk 3y ago

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 3y ago
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/ https://openseadragon.github.io/examples/ui-overlays/ [2] demo: https://eriksjolund.github.io/osd-spot-viewer-webpack-build/build2/ 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 https://github.com/eriksjolund/osd-spot-viewer
Veuxdo 3y ago
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-Load-Testing/__resources https://app.ilograph.com/demo.ilograph.AWS%2520Distributed-L... Note that this is an app, not a library.

no_wizard 3y ago

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 3y ago
> 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 3y ago
  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 3y ago

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 3y ago

Reminds me of Veratasium's visual representation of p-adic numbers. https://youtu.be/tRaq4aYPzCc?t=1514 https://youtu.be/tRaq4aYPzCc?t=1514

passion__desire 3y ago
Reminds me of Prezi slide transitions.

Lorin 3y ago

Makes me wonder about visualizing graph DBs

evanjrowley 3y ago

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

yawnxyz 3y ago

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

MaxBarraclough 3y ago
Here's the actual demo link: https://openopensource.com/ https://openopensource.com/

simonw 3y ago

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

andsoitis 3y ago
> 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?activeTab=dependencies https://www.npmjs.com/package/svelte-zoomable-circles?active...
- simonw 3y ago
  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 3y ago
    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

ionelaipatioaei 3y ago

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?activeTab=code 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 3y ago

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

florid 3y ago

[dead]

dv35z 3y ago

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