Also wanted to mention,
This application is free and open source and the code is located here: https://github.com/MaxKotlan/LN-Visualizer
I welcome anyone who wants to contribute.
I am working towards getting this app on the Umbrel App Store. My hope is everyone will run the app on their own hardware using the data collected by their own nodes.
reply
Awesome project!
reply
Interesting project but please don't use google fonts
reply
I'll look into alternatives. Google fonts are the default for Angular Material, the UI framework I used. I just didn't bother changing it.
reply
это похоже на первый нейрон в сети созданный человеком! давай сделаем его дружелюбным и счастливым. нам стоит узнать ещё многое в этом космосе! поехали бро!
reply
Thanks bro!
reply
ты заставил мой телефон по потеть. но это хорошее зрение. благодарю тебя.
reply
Same with my phone haha
reply
Nice!
Looks like a COVID ball
reply
Wow! This is amazing! Awesome work!!!
reply
reply
On phone seems flawless. I tried on PC and the sliders don’t seem to work. Was playing with base rate and fee. Every time I’d slide the left one left it would reset after 1 - 2 seconds. Works fine on mobile though. Not sure if anyone else has experienced this. I didn’t see any other comments about it so it’s probably just me lol.
reply
Were you still downloading the graph data? (It will show a loading bar at the bottom of the screen beneath the graph)
I noticed while you are downloading, every time it gets a new chunk of graph data it resets the sliders.
Should probably find a better way to do that.
reply
Wow this is really cool!
A few small suggestions if you are open to them.
  1. Start using BTC balance in the sliders for larger sums
  2. Allow settings specific values for these sliders
  3. Set this filter state in query parameters so it is shareable/savable
  4. Create a weighted mode where the width of channel line scales with channel balances.
Very cool stuff, keep it up!
reply
@DiscoPay Update on #4). The weighted mode for channel capacity has been added!
You need to change the line primitive dropdown from gl-line to line-mesh then you can change the width of the channels.
The other dropdown that shows up when selecting line-mesh will allow you to either have uniform linewidth (all of them are the same), or you can select channel capacity and the width will scale with the capacity.
Attenuation (similar to node attenuation). Lines get smaller the farther they are from the camera.
reply
I appreciate the feedback.
  1. Very good idea. I think I will try to add an option in the settings to switch your unit, btc, msats, sats, etc.
  2. I could probably change the numbers on the slider to input fields if it doesn't take up too much space. Also it currently is possible to add custom filters with specific values, but that does require a very small amount of programming knowledge.
  3. I might be able to do it with the sliders specifically, but for all filters it might be a challenge due to space constraints in the url. The queries/filters are actually small JavaScript functions (and you can add custom ones), so if I wanted to expand it to all filters it would take up a lot of space in the url. Might be better to add an import/export to file option on the filters view or create an api for storing/downloading other people's filters.
  4. I will get to this eventually. I believe it is possible but due to webgl limitations it might be difficult to do correctly. There are examples here https://threejs.org/examples/?q=fat#webgl_lines_fat. It just might take some time to figure out how to replicate it.
reply
It's amazing, I found my node :)
What do you think of making the connecting lines between nodes a little bit thicker when you zoom in? Or be able to hover on them and click on them to reveal the connection between nodes and channel capacity.
That aside, the fact that this is 3D is amazing. The tipping code seems to be down, let me know when it's back up -- this project deserves some sats.
reply
I looked into that actually. Surprisingly it's more difficult than it should be to make the lines thicker due to limitations in webgl. It seems like people had a few tricks to get it to work, but there might be a performance cost. Will look into it probably later on.
I think hovering on the lines is for sure possible. I just didn't get around to implementing that yet. For now if you click on a node, you can look at the node properties pane and expand the connected_channels property to get info about them.
The donation link should be back up. I guess I need to work on making that more reliable too. Also thank you!
reply
Ah, I see, that's a bummer. Don't know much about webgl but will definitely be learning a bit by reading your source code. I saw the right pane but couldn't click nodes there, still very nice to see this detail.
I feel your service has the potential to be better than 1ML honestly.
Donation link works now :) sent you some sats, in fact, 8!
reply
I appreciate you taking a look at the source code. Also really appreciate the sats!
There are a few issues with clicking nodes, but you can also search for nodes and it will effectively be the same thing as clicking. What platform did you test on, mobile? Clicking on nodes is not exactly refined yet for that platform. I think I need to detect touch events vs click events for that case. Oh also the side panel doesn't show up on mobile yet.
On desktop though it should work as expect (more or less).
reply
seems offline
reply
Hmm... not really sure what happened. Everything seemed to work, but I could not connect either. Restarting the instance seemed to fix it.
Working towards making the service more reliable
reply
I think we can officially coin this post as the first time we've brought a website/service down!
The Stacker News Effect: Occurs when a popular website links to a smaller website, causing a massive increase in traffic. This overloads the smaller site and can cause fire, sparks and lightning, causing it to slow down or even temporarily become unavailable. This has the same effect as a denial-of-service attack, albeit accidentally.
reply
Lets call it the Pony attack haha
reply
lol love it
reply
Update on this. Noticed the server also crashed yesterday. I upgraded the server to have more resources. Hopefully that is good enough for now. In the future, I am hoping to have horizontal scaling.
reply
Is this the lightning graph? Also try and zoom into the cloud its cool
And how does the visualizer know about the nodes out there by themselves that do not seem connected to everyone else?
I wonder if the same thing would be possible with the internet. if it could be visualized in the same manner
reply
Yes! It is indeed a graph of the lightning network. Each lightning circle represents a node, and each line from one node to another represents a payment channel.
There are many different ways to draw this same graph, but with the approach I took I think it should minimize the distance between connected nodes.
The more connected you are the closer you are to the center of this graph.
Information about nodes is relayed throughout the network via a gossip protocol. So as long as there is at least one main connection to the network. The information from a distant node eventually makes it to all nodes on the network.
My understanding is it does this by basically by passing messages to and from your peers and then to/from your peer's peers and so on.
That's an interesting idea. It might be possible to expand this implementation to drawing graph generically. However even if I generalized this software, drawing something like the internet might have additional obstacles. With the internet there is a lot of private information that makes it difficult to do this same thing I have done for lightning. All the information collected here is publicly relayed throughout the lightning network. So you would probably have to be an Internet Service Provider to obtain information about the connection data for the internet.
reply
Bookmarked
reply
This is awesome! Kind of reminds me of No Man's Sky when looking at the galaxy map
reply
10 sats \ 1 reply \ @Ge 22 May 2022
that looks so cool and crazy thank you!
reply
Thanks for checking it out!
reply
Question. Does this show all active nodes on the network?
reply
It shows all nodes on the network that are visible from my node.
I think if my node was more connected, it would be able to collect more data.
I ran this application against another node I have, and more nodes do show up with that node versus the one I'm hosting for the website.
Looking to improve this
reply
10 sats \ 1 reply \ @xz 22 May 2022
Got it. Thanks for the reply!
Couldn't see me node, so just wondered. Great work btw!
Wow, mind-blowing 😲. Imagine if LN continues to grow like this for the next couple of years...
reply
Whether or not this lightning explorer will be able to handle the growth, is something I still need to look into. I'm not sure what it will look like once there are a million+ nodes, or if it will be even reasonable bandwidth-wise to download the graph data.
As for the network itself, it will continue to grow, for sure.
Bookmarked, great job!!
reply