3 ms·

It's not interactive for me: https://codepen.io/ItIsHappy/pen/vEXrXxg https://codepen.io/ItIsHappy/pen/vEXrXxg Yes, I'm being pedantic, but that was the point

It's not interactive for me: https://codepen.io/ItIsHappy/pen/vEXrXxg https://codepen.io/ItIsHappy/pen/vEXrXxg Yes, I'm being pedantic, but that was the point of my comment. SVGs aren't interactive by default, you need to bring your own interactivity. For static content, SVGs work great, but for interactive content the additional sematic layer of JSON Canvas has a clear benefit. SVGs represent connections using paths, while JSON Canvas uses a graph. This means SVG cannot connect a single node to more than 2 adjacent nodes. If I want to draw arrows from Alice, Bob, and Charlie all to Dave, then I need to create a second Dave or reference to that location somehow. (You can see this in your sword example by moving one of the edge points. The sword delaminates because only two of the four edges at that point can be connected together.) SVG provides limited tooling for this, but it gets rather complicated rather quickly.

StilesCrisis 6mo ago
Cool, now show me a codepen with an interactive JSON Canvas?
- deleted 6mo ago
  [deleted]
- itishappy 6mo ago
  Fair point, SVGs are more portable. They're also more capable (and complicated). JSON Canvas is a more specific tool. Both of the following examples show the same thing, but the SVG representation doesn't convey the structure: JSON Canvas: { "nodes": [ {"id": "a", "type": "text", "text": "Alice", "x": 20, "y": 50, "width": 40, "height": 10}, {"id": "b", "type": "text", "text": "Bob", "x": 170, "y": 50, "width": 40, "height": 10}, {"id": "c", "type": "text", "text": "Charlie", "x": 320, "y": 50, "width": 40, "height": 10}, {"id": "d", "type": "text", "text": "Dave", "x": 170, "y": 150, "width": 40, "height": 10} ], "edges": [ {"id": "ad", "fromNode": "a", "toNode": "d"}, {"id": "bd", "fromNode": "b", "toNode": "d"}, {"id": "cd", "fromNode": "c", "toNode": "d"} ] } SVG: <svg width="400" height="200"> <text x="20" y="50" >Alice</text> <text x="170" y="50" >Bob</text> <text x="320" y="50" >Charlie</text> <text x="170" y="150">Dave</text> <line x1="40" y1="60" x2="190" y2="130" stroke="black"/> <line x1="190" y1="60" x2="190" y2="130" stroke="black"/> <line x1="340" y1="60" x2="190" y2="130" stroke="black"/> </svg>

StilesCrisis 6mo ago

Cool, now show me a codepen with an interactive JSON Canvas?

deleted 6mo ago
[deleted]
itishappy 6mo ago
Fair point, SVGs are more portable. They're also more capable (and complicated). JSON Canvas is a more specific tool. Both of the following examples show the same thing, but the SVG representation doesn't convey the structure: JSON Canvas: { "nodes": [ {"id": "a", "type": "text", "text": "Alice", "x": 20, "y": 50, "width": 40, "height": 10}, {"id": "b", "type": "text", "text": "Bob", "x": 170, "y": 50, "width": 40, "height": 10}, {"id": "c", "type": "text", "text": "Charlie", "x": 320, "y": 50, "width": 40, "height": 10}, {"id": "d", "type": "text", "text": "Dave", "x": 170, "y": 150, "width": 40, "height": 10} ], "edges": [ {"id": "ad", "fromNode": "a", "toNode": "d"}, {"id": "bd", "fromNode": "b", "toNode": "d"}, {"id": "cd", "fromNode": "c", "toNode": "d"} ] } SVG: <svg width="400" height="200"> <text x="20" y="50" >Alice</text> <text x="170" y="50" >Bob</text> <text x="320" y="50" >Charlie</text> <text x="170" y="150">Dave</text> <line x1="40" y1="60" x2="190" y2="130" stroke="black"/> <line x1="190" y1="60" x2="190" y2="130" stroke="black"/> <line x1="340" y1="60" x2="190" y2="130" stroke="black"/> </svg>