Wouldn’t making each one link to SuttaCentral.net do the same thing? Or did you have another use in mind?
Hi @Sugathadasa1, yes, I think the best solution is to link the nodes of the graph to their corresponding SuttaCentral page.
This chart is an SVG file which can be read as HTML in a webpage, thus allowing interaction and hyperlinks.
I still need to connect the unique Id of every node to its page:
for exemple :
Object {id: "dhp1-20", parentId: "dhp", name: "Yamakavagga", acro: "Dhp 1-20"}
to https://suttacentral.net/dhp1-20/pli/ms
which is very simple as I just realized while writing this message 
but it dosen’t work for every node yet. I need to dig a bit in the data.
Also Bhante @sujato, the same behaviour in the structure happens in the Cūḷaniddesa
where the Khaggavisāṇasuttaniddesa is repeated twice.
Thank you everyone
2 Likes
Here is the last test I’ve made with links on text and it works great for the 4 first nikaya
2 Likes
Neat!
For me the browser’s zoom feature doesn’t change the size of the image. I wonder if there is some way you could implement a zoom feature. Perhaps like the floating zoom buttons on google map.
I also notice that the regular browser feature of showing the link text at the bottom of the screen when you hover over the link is missing. I wonder if there could be some kind of floating info box that would show the name of the sutta being hovered over. like a tool tip, but done through js.
Just ideas. Thanks for doing this!
Hi,
-
I’ve update my test to include zoom and drag but this SVG is so big that it is quite laggy. This is why I didn’t use it in the first place. Let me know how it goes on your machine.
-
The other alternative I found was to use the PNG file and use leaflet.js to do a google-map kind of drag. Here is the test with PNG + leaflet.js which is much smoother on my machine.
-
Of course the PNG dosen’t allow hyperlink as far as I know. You can use SVG in leaflet which load a bit faster but has to refresh everytime. see this SVG test
That is why I prefer solution 2), but please test them out and let me know which one is the best for you.
Thanks
Yes this is possible with D3.js
We just rolled the last change to production, and it turned out, it did mess some things up. My bad, I didn’t test well enough. We’ll fix it.
I’ve pushed the cnd fix as well. I think this is the only other case in the Tipitaka.
The svg file looks amazing.
I did a little testing with it, to see how it might be practical in usage. The image size is 1.1MB, not too bad. I tried running it through SVGOMG and it cut the size more than half. Some paths were borked though, so the parameters need tweaking. Still, for production, it’d be a handy optimization.
There are 5000+ DOM nodes, which is a lot, but not outlandish; many large sites have as much or more.
It’s definitely laggy tho.
One thing I find myself wanting to do is to rotate the image.
Perhaps we could offer both png and svg versions?
Finally, this came up by chance on Twitter yesterday. For all the toxic drama over there, someone is just wanting to make pretty charts!
https://twitter.com/biondifabio/status/1519318208615956481
The interesting thing about this, it uses the same underlying library as SC does (lit). I’m not if it would be helpful for you, but just FYI lit has built-in svg support, and it also has some helpers for animation; specifically, to achieve the super-fluid flip animation process.
1 Like
yes, I’ve done some testing when creating the chart, here is an old version rotated. Is this what you meant ? If yes, it is easy enough to do the rotation at the end when the final version is OK.
Yes, this is also easy to do. the only down side is that SVG appears slighlty different on different devices when I tested and so not very good for printing or not interactive displays
And I’ll have a look at FLIP, thanks !
I’m not sure if this is what Bhante meant, but I’d like to be able to rotate so that the section I wanted to look at was horizontal on my screen. Basically being able to spin it. But that might mess up the layout. And I’m not sure how KN would be handled in that situation.
yes, exactly.
Of course the rendering is going to eat more CPU cycles.
@sujato, @Snowbird
I finally got something working tonight. Tiled PNG with zoom-pan-rotate which is very smooth and load fast on computer. The rotate is a bit tricky, hold the compass and drag left/right… A combination “Key + Mouse” would be nice for rotate, but I could not fine anything with leaflet.js. This rotate is actually more tricky that it looks and leaflet has gave up on it.
On mobile, the rotation is not very good unfortunately. So I might just disable it or use another map library, but I might reach my limit at this point.
The more important step for me would be a SVG tiling which allow hyperlink to Sutta. I’ll work on that and see if it is feasible.
This is beyond my skills at the minute… 
Thanks and be well
4 Likes
I would think that rotating could be extremely tricky!
I am able to use two fingers on my laptop screen to rotate very easily.
It’s getting cooler and cooler! 
1 Like
Oh my!
Not only is there this beautiful chart but you’ve also made some of my dream charts such as this 4NT chart and Buddha’s mind which I had started working on something similar many years ago and fallen by the wayside.
I’d love to have Bhikkhuni Pāṭimokkha charts similar to the bhikkhu ones.
7 Likes
Hi @Pasanna,
Thanks for your comment. Please note the this website is still in construction and I’ve not set up everything properly (license, etc). It is just a test for the moment. When it will be finished it will be a better moment to share it widely. Thanks
Edit : I’ve added a notice in the header to show it is in development
7 Likes
Hi there, I’ve made another test with OpenLayers this time.
You can have a look with the latest version of the chart below. There are 77mb of PNG tiles, but it works very smooth on my machines, you can rotate by holding cmd/ctrl + drag :
Thanks for any feedback. I will try SVG tiles next to see if it is possible.
3 Likes
Looks great! And the rotation works incredibly smooth.
But when enlarging the font it’s unfortunately so blurry that it’s unreadable:
That happened for me too, but when I gave it some time a higher resolution (very readable) eventually loaded.
1 Like
How long? It’s now 5 min or more, and still just as blurry.
1 Like