JavaScript Graph Editor

We define the following JSON string as global JS variable. The initial positions are optional.

      
var K4_graph = JSON.stringify(
               {"vertices": ["0", "1", "2", "3"],
                "edges": [["0", "1"], ["0", "2"], ["0", "3"], ["1", "2"], ["1", "3"], ["2", "3"]],
                "name": "G",
                "pos": {"0": [0.0, 1.0], "1": [-1.0, 0.0], "2": [0.0, -1.0], "3": [1.0, 0.0]}});

Simple Multigraph

To instantiate the graph editor add this to your HTML

      
        <div id="graph_ed1"></div>

and on load call the GraphEditor library

      
    my_graph_editor1 = new GraphEditor('#graph_ed1', {
        JSONdata : K4_graph
    });

Small Graph, No Controls

      
    my_graph_editor2 = new GraphEditor('#graph_ed2', {
        JSONdata : K4_graph,
        width : 100,
        height : 100,
        node_radius : 5,
        controls : false
    });

Multigraph

Use '+' when an edge is selected.

      
    my_graph_editor4 = new GraphEditor('#graph_ed4', {
        JSONdata: K4_graph,
        width : 300,
        height : 300,
        multigraph : true
    });

Integration with Sage

Use the following Sage file in Sage to get JSON string represenation of a graph. Paste it in the box below.

Using the same Sage file, paste this JSON graph data in Sage to obtain a graph.

Copy/Paste this code to produce this graph in Latex using the tkz-brege package.