Generate JSON graph

[stereobooster]

Idea: option to generate graph in JSON format.

1. Than this data can be embedded in HTML data-graph=...
2. Than it can be read from JS and fed to graph lib, for example https://github.com/dagrejs/graphlib
3. And we can add interactivity with JS

Examples: https://beoe.stereobooster.com/examples/vizdom/.
Implementation: https://github.com/stereobooster/beoe/blob/main/packages/demo/src/components/vizdom.ts

This can be alternative approach to animation. Related:

• more animated #1461
• animation: Think about how to recreate this #1485

[alixander]

This is a good idea for a function in the Javascript version

[stereobooster]

I implemented prototype stereobooster/beoe#9 (preview)

(cursor is over c, but not over text)

There are several problems though:

• edges have strange ids, like (b -> c)[0]. I need to use CSS.escape in order to query DOM by id
• it would be easier to work with SVG if all elements (edges, nodes) would have classes (in the same element where id)

  <g id="e"><g class="shape">...</g>

• structure for edges is inconsistent never mind this is due to SVGO

  <g id="(a -> b)[0]">
    <marker ...></marker>
    <path stroke-width="2" d="m0 0 10 6-10 6z" class="connection" ...></path>
  </g>
  <path id="(c -> d)[0]" fill="none" stroke="#0D32B2" marker-end="url(#mk-3488378134)" d="M361 33h94" class="connection stroke-B1" mask="url(#d2-424925946)" style="stroke-width:2"></path>

UPD

here is better link for example https://beoe.stereobooster.com/start-here/interactivity/#d2-example

[alixander]

related: #2273

I'll prioritize that