{"version":"1.0","type":"rich","title":"Directed Graph Editor","description":"This interactive editor demonstrates graph creation and manipulation, showing nodes connected by directed edges with arrowheads indicating direction. Users can add nodes by clicking empty space, add edges by dragging between nodes, and select or modify elements via keyboard shortcuts. The code uses d3.forceSimulation for layout and d3.drag for node repositioning, with SVG paths and circles as the primary rendering elements. The example implements various interaction states, including reflexive edges, directional toggles, and visual feedback for selected components.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/gist-fcc479b9d7b17d60d3fb1b67abfbc23c?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"1\"></iframe>","width":960,"height":500,"cache_age":3600}