Released version 3.2.0

10 years ago · 44aabd985a
--- a/dist/vis.css
+++ b/dist/vis.css
@ -665,10 +665,6 @@ div.network-navigation:active {
    box-shadow: 0px 0px 1px 3px rgba(56, 207, 21, 0.95);
 }
 div.network-navigation.active {
    box-shadow: 0px 0px 1px 3px rgba(56, 207, 21, 0.95);
 }
 div.network-navigation.up {
    background-image: url("img/network/upArrow.png");
    bottom:50px;
--- a/dist/vis.js
+++ b/dist/vis.js
--- a/dist/vis.map
+++ b/dist/vis.map
--- a/dist/vis.min.css
+++ b/dist/vis.min.css
--- a/dist/vis.min.js
+++ b/dist/vis.min.js
--- a/docs/graph2d.html
+++ b/docs/graph2d.html
@ -174,7 +174,7 @@ var items = [
  </tr>
 </table>
 <h3 id="Groups">Groups</h3>
 <h3 id="groups">Groups</h3>
 <p>
    Like the items, groups are regular JavaScript Arrays and Objects.
@ -191,7 +191,8 @@ var items = [
 var groups = new vis.DataSet();
 groups.add({
    id: 1,
    content: 'Group 1'
    content: 'Group 1',
    // Optional: a field 'visible'
    // Optional: a field 'className'
    // Optional: options
  })
@ -241,6 +242,12 @@ groups.add({
        <td>This field is optional. The options can be used to give a group a specific draw style.
            Any options that are colored green in the Configuration Options can be used as options here.
    </tr>
    <tr>
        <td>visible</td>
        <td>Boolean</td>
        <td>true</td>
        <td>This field is optional. If false, the graph will not be drawn.
    </tr>
 </table>
 <h2 id="Configuration_Options">Configuration Options</h2>
@ -674,12 +681,32 @@ Graph2d.clear({options: true}); // clear options only
        </td>
    </tr>
    <tr>
        <td>getLegend(groupId, iconWidth, iconHeight)</td>
        <td>SVGelement, String, String</td>
        <td>Returns an object containing an SVG element with the icon of the group (size determined by iconWidth and iconHeight), the label of the group (content) and the yAxisOrientation of the group (left or right).
        </td>
    </tr>
    <tr>
        <td>getWindow()</td>
        <td>Object</td>
        <td>Get the current visible window. Returns an object with properties <code>start: Date</code> and <code>end: Date</code>.</td>
    </tr>
    <tr>
        <td>getItemRange()</td>
        <td>Object</td>
        <td>Get the range of all the items as an object containing <code>min: Date</code> and <code>max: Date</code>.</td>
    </tr>
    <tr>
        <td>fit()</td>
        <td>none</td>
        <td>Adjust the visible window such that it fits all items.
        </td>
    </tr>
    <tr>
        <td>on(event, callback)</td>
        <td>none</td>
@ -699,6 +726,13 @@ Graph2d.clear({options: true}); // clear options only
        </td>
    </tr>
    <tr>
        <td>isGroupVisible(groupId)</td>
        <td>Boolean</td>
        <td>This checks if the visible option of the supplied group (by ID) is true or false.
        </td>
    </tr>
    <tr>
        <td>setGroups(groups)</td>
        <td>none</td>
--- a/docs/network.html
+++ b/docs/network.html
@ -1261,6 +1261,8 @@ var options = {
 <p>
  Edges can be configured with different length and styling. To configure edges, provide an object named <code>edges</code> in the <code>options</code> for the Network.
  Because the length of an edge is a property of the physics simulation, you can change the length of the edge by changing the springLength in your selected physics solver.
    To change the edge length of individual edges, you can use the <code>length</code> property in the <a href="Edges">edge definition</a>.
 </p>
 <p>
@ -1353,12 +1355,6 @@ var options = {
    <td>Default length of a gap in pixels on a dashed line.
      Only applicable when the line style is <code>dash-line</code>.</td>
  </tr>
  <tr>
    <td>length</td>
    <td>number</td>
    <td>physics.[method].springLength</td>
    <td>The resting length of the edge when modeled as a spring. By default the springLength determined by the physics is used. By using this setting you can make certain edges have different resting lengths.</td>
  </tr>
    <tr>
        <td>inheritColor</td>
--- a/download/vis.zip
+++ b/download/vis.zip
--- a/examples/graph2d/09_external_legend.html
+++ b/examples/graph2d/09_external_legend.html
@ -0,0 +1,367 @@
 <!DOCTYPE HTML>
 <html>
 <head>
    <title>Graph2d | External legend Example</title>
    <link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        body, html {
            font-family: sans-serif;
        }
        .customStyle1 {
            fill: #f2ea00;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #b3ab00;
        }
        .customStyle2 {
            fill: #00a0f2;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #050092;
        }
        .customStyle3 {
            fill: #00f201;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #029200;
        }
        path.customStyle3.fill {
            fill-opacity:0.5 !important;
            stroke: none;
        }
         .graphGroup0 {
            fill:#4f81bd;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #4f81bd;
        }
         .graphGroup1 {
            fill:#f79646;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #f79646;
        }
         .graphGroup2 {
            fill: #8c51cf;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #8c51cf;
        }
         .graphGroup3 {
            fill: #75c841;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #75c841;
        }
         .graphGroup4 {
            fill: #ff0100;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #ff0100;
        }
         .graphGroup5 {
            fill: #37d8e6;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #37d8e6;
        }
         .graphGroup6 {
            fill: #042662;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #042662;
        }
         .graphGroup7 {
            fill:#00ff26;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #00ff26;
        }
         .graphGroup8 {
            fill:#ff00ff;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #ff00ff;
        }
         .graphGroup9 {
            fill: #8f3938;
            fill-opacity:0;
            stroke-width:2px;
            stroke: #8f3938;
        }
         .fill {
            fill-opacity:0.1;
            stroke: none;
        }
         .bar {
            fill-opacity:0.5;
            stroke-width:1px;
        }
         .point {
            stroke-width:2px;
            fill-opacity:1.0;
        }
         .legendBackground {
            stroke-width:1px;
            fill-opacity:0.9;
            fill: #ffffff;
            stroke: #c2c2c2;
        }
         .outline {
            stroke-width:1px;
            fill-opacity:1;
            fill: #ffffff;
            stroke: #e5e5e5;
        }
         .iconFill {
            fill-opacity:0.3;
            stroke: none;
        }
        div.descriptionContainer {
            float:left;
            height:30px;
            width:160px;
            padding-left:5px;
            padding-right:5px;
            line-height: 30px;
        }
        div.iconContainer {
            float:left;
        }
        div.legendElementContainer {
            display:inline-block;
            width:200px;
            height:30px;
            border-style:solid;
            border-width:1px;
            border-color: #e0e0e0;
            background-color: #ffffff;
            margin:4px;
            padding:4px;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            cursor:pointer;
        }
        div.legendElementContainer.hidden {
            background-color: #d3e6ff;
        }
        svg.legendIcon {
            width:30px;
            height:30px;
        }
        div.externalLegend {
            position:relative;
            margin-left: -5px;
            width: 900px;
        }
    </style>
    <script src="../../dist/vis.js"></script>
 </head>
 <body>
 <h2>Graph2d | External custom legend</h2>
 <div style="width:800px; font-size:14px; text-align: justify;">
    This example shows how to create an external custom legend using the getLegend function. We use normal JavaScript to show and hide the
    groups by updating the dataset.
 </div>
 <br />
 <div id="Legend" class="externalLegend"></div>
 <div id="visualization"></div>
 <script type="text/javascript">
    // create a dataSet with groups
    var names = ['SquareShaded', 'Bar', 'Blank', 'CircleShaded'];
    var groups = new vis.DataSet();
    groups.add({
        id: 0,
        content: names[0],
        className: 'customStyle1',
        options: {
            drawPoints: {
                style: 'square' // square, circle
            },
            shaded: {
                orientation: 'bottom' // top, bottom
            }
        }});
    groups.add({
        id: 1,
        content: names[1],
        className: 'customStyle2',
        options: {
            style:'bar',
            drawPoints: {style: 'circle',
                size: 10
            }
        }});
    groups.add({
        id: 2,
        content: names[2],
        options: {
            yAxisOrientation: 'right', // right, left
            drawPoints: false
        }
    });
    groups.add({
        id: 3,
        content: names[3],
        className: 'customStyle3',
        options: {
            yAxisOrientation: 'right', // right, left
            drawPoints: {
                style: 'circle' // square, circle
            },
            shaded: {
                orientation: 'top' // top, bottom
            }
        }});
    var container = document.getElementById('visualization');
    var items = [
        {x: '2014-06-12', y: 0 , group: 0},
        {x: '2014-06-13', y: 30, group: 0},
        {x: '2014-06-14', y: 10, group: 0},
        {x: '2014-06-15', y: 15, group: 1},
        {x: '2014-06-16', y: 30, group: 1},
        {x: '2014-06-17', y: 10, group: 1},
        {x: '2014-06-18', y: 15, group: 1},
        {x: '2014-06-19', y: 52, group: 1},
        {x: '2014-06-20', y: 10, group: 1},
        {x: '2014-06-21', y: 20, group: 2},
        {x: '2014-06-22', y: 600, group: 2},
        {x: '2014-06-23', y: 100, group: 2},
        {x: '2014-06-24', y: 250, group: 2},
        {x: '2014-06-25', y: 300, group: 2},
        {x: '2014-06-26', y: 200, group: 3},
        {x: '2014-06-27', y: 600, group: 3},
        {x: '2014-06-28', y: 1000, group: 3},
        {x: '2014-06-29', y: 250, group: 3},
        {x: '2014-06-30', y: 300, group: 3}
    ];
    var dataset = new vis.DataSet(items);
    var options = {
        dataAxis: {showMinorLabels: false},
        start: '2014-06-09',
        end: '2014-07-03'
    };
    var graph2d = new vis.Graph2d(container, items, options, groups);
    /**
     * this function fills the external legend with content using the getLegend() function.
     */
    function populateExternalLegend() {
        var groupsData = groups.get();
        var legendDiv = document.getElementById("Legend");
        legendDiv.innerHTML = "";
        // get for all groups:
        for (var i = 0; i < groupsData.length; i++) {
            // create divs
            var containerDiv = document.createElement("div");
            var iconDiv = document.createElement("div");
            var descriptionDiv = document.createElement("div");
            // give divs classes and Ids where necessary
            containerDiv.className = 'legendElementContainer';
            containerDiv.id = groupsData[i].id + "_legendContainer"
            iconDiv.className = "iconContainer";
            descriptionDiv.className = "descriptionContainer";
            // get the legend for this group.
            var legend = graph2d.getLegend(groupsData[i].id,30,30);
            // append class to icon. All styling classes from the vis.css have been copied over into the head here to be able to style the
            // icons with the same classes if they are using the default ones.
            legend.icon.setAttributeNS(null, "class", "legendIcon");
            // append the legend to the corresponding divs
            iconDiv.appendChild(legend.icon);
            descriptionDiv.innerHTML = legend.label;
            // determine the order for left and right orientation
            if (legend.orientation == 'left') {
                descriptionDiv.style.textAlign = "left";
                containerDiv.appendChild(iconDiv);
                containerDiv.appendChild(descriptionDiv);
            }
            else {
                descriptionDiv.style.textAlign = "right";
                containerDiv.appendChild(descriptionDiv);
                containerDiv.appendChild(iconDiv);
            }
            // append to the legend container div
            legendDiv.appendChild(containerDiv);
            // bind click event to this legend element.
            containerDiv.onclick = toggleGraph.bind(this,groupsData[i].id);
        }
    }
    /**
     * This function switchs the visible option of the selected group on an off.
     * @param groupId
     */
    function toggleGraph(groupId) {
        // get the container that was clicked on.
        var container = document.getElementById(groupId + "_legendContainer")
        // if visible, hide
        if (graph2d.isGroupVisible(groupId) == true) {
            groups.update({id:groupId, visible:false});
            container.className = container.className + " hidden";
        }
        else { // if invisible, show
            groups.update({id:groupId, visible:true});
            container.className = container.className.replace("hidden","");
        }
    }
    populateExternalLegend()
 </script>
 </body>
 </html>
--- a/examples/graph2d/index.html
+++ b/examples/graph2d/index.html
@ -15,6 +15,7 @@
  <p><a href="06_interpolation.html">06_interpolation.html</a></p>
  <p><a href="07_scrollingAndSorting.html">07_scrollingAndSorting.html</a></p>
  <p><a href="08_performance.html">08_performance.html</a></p>
  <p><a href="09_external_legend.html">09_external_legend.html</a></p>
 </div>
 </body>
--- a/examples/network/02_random_nodes.html
+++ b/examples/network/02_random_nodes.html
@ -31,8 +31,7 @@
      for (var i = 0; i < nodeCount; i++) {
        nodes.push({
          id: i,
          label: String(i),
          radius:300
          label: String(i)
        });
        connectionCount[i] = 0;
--- a/examples/network/06_groups.html
+++ b/examples/network/06_groups.html
@ -64,8 +64,7 @@
            edges.push({
              from: from + nodeOffset,
              to: to + nodeOffset,
              length: len,
              color: color
              length: len
            });
            connectionCount[from]++;
            connectionCount[to]++;
@ -85,8 +84,7 @@
            edges.push({
              from: from + nodeOffset,
              to: to + nodeOffset,
              length: len,
              color: color
              length: len
            });
            connectionCount[from]++;
            connectionCount[to]++;
@ -112,8 +110,7 @@
          edges.push({
            from: from,
            to: to,
            length: len,
            color: color
            length: len
          });
        }
@ -135,9 +132,7 @@
        nodes: {
          shape: 'dot'
        },
        edges: {
          length: 50
        }
        physics: {barnesHut:{springLength: 200}}
      };
      network = new vis.Network(container, data, options);
    }
--- a/examples/network/10_multiline_text.html
+++ b/examples/network/10_multiline_text.html
@ -26,7 +26,7 @@
      // create some edges
      var edges = [
        {from: 1, to: 2, style: 'line', color: 'red', width: 3, length: 200},
        {from: 1, to: 2, style: 'line', color: 'red', width: 3, length: 200}, // individual length definition is possible
        {from: 1, to: 3, style: 'dash-line', width: 1, length: 200},
        {from: 1, to: 4, style: 'line', width: 1, length: 200},
        {from: 1, to: 5, style: 'arrow', width: 3, length: 200}
--- a/examples/network/11_custom_style.html
+++ b/examples/network/11_custom_style.html
@ -61,7 +61,6 @@
      options = {
        stabilize: false,
        edges: {
          length: 120,
          width: 2,
          style: 'arrow',
          color: 'gray'
@ -79,6 +78,7 @@
            }
          }
        },
        physics: {barnesHut:{springLength:200}}, // this is the correct way to set the length of the springs
        groups: {
          black: {
            // defaults for nodes in this group
--- a/examples/network/13_dashed_lines.html
+++ b/examples/network/13_dashed_lines.html
@ -45,9 +45,7 @@
        nodes: {
          shape: 'box'
        },
        edges: {
          length: 180
        },
        physics: {barnesHut:{springLength:150}}, // this is the correct way to set the length of the springs
        stabilize: false
      };
      var network = new vis.Network(container, data, options);
--- a/examples/network/17_network_info.html
+++ b/examples/network/17_network_info.html
@ -96,11 +96,11 @@
      var x = - mynetwork.clientWidth / 2 + 50;
      var y = - mynetwork.clientHeight / 2 + 50;
      var step = 70;
      nodes.push({id: 1000, x: x, y: y, label: 'Internet', group: 'internet', value: 1});
      nodes.push({id: 1001, x: x, y: y + step, label: 'Switch', group: 'switch', value: 1});
      nodes.push({id: 1002, x: x, y: y + 2 * step, label: 'Server', group: 'server', value: 1});
      nodes.push({id: 1003, x: x, y: y + 3 * step, label: 'Computer', group: 'desktop', value: 1});
      nodes.push({id: 1004, x: x, y: y + 4 * step, label: 'Smartphone', group: 'mobile', value: 1});
      nodes.push({id: 1000, x: x, y: y, label: 'Internet', group: 'internet', value: 1, mass:0});
      nodes.push({id: 1001, x: x, y: y + step, label: 'Switch', group: 'switch', value: 1, mass:0});
      nodes.push({id: 1002, x: x, y: y + 2 * step, label: 'Server', group: 'server', value: 1, mass:0});
      nodes.push({id: 1003, x: x, y: y + 3 * step, label: 'Computer', group: 'desktop', value: 1, mass:0});
      nodes.push({id: 1004, x: x, y: y + 4 * step, label: 'Smartphone', group: 'mobile', value: 1, mass:0});
      // create a network
      var container = document.getElementById('mynetwork');
--- a/examples/network/18_fully_random_nodes_clustering.html
+++ b/examples/network/18_fully_random_nodes_clustering.html
@ -53,9 +53,7 @@
                edges: edges
            };
            var options = {
                edges: {
                    length: 80
                },
                physics: {barnesHut:{springLength:120}}, // this is the correct way to set the length of the springs
                clustering: {
                    enabled: clusteringOn
                },
@ -73,7 +71,7 @@
 <body onload="draw();">
 <h2>Clustering - Fully random network</h2>
 <div style="width:700px; font-size:14px;">
 <div style="width:700px; font-size:14px; text-align: justify;">
    This example shows a fully randomly generated set of nodes and connected edges.
    By clicking the checkbox you can turn clustering on and off. If you increase the number of nodes to
    a value higher than 100, automatic clustering is used before the initial draw (assuming the checkbox is checked).
--- a/examples/network/19_scale_free_graph_clustering.html
+++ b/examples/network/19_scale_free_graph_clustering.html
@ -76,17 +76,6 @@
        nodes: nodes,
        edges: edges
      };
        /*
      var options = {
        nodes: {
          shape: 'circle'
        },
        edges: {
          length: 50
        },
        stabilize: false
      };
      */
    var options = {
    clustering: {
        enabled: clusteringOn,
@ -106,7 +95,7 @@
 <body onload="draw();">
 <h2>Clustering - Scale-Free-Network</h2>
 <div style="width:700px; font-size:14px;">
 <div style="width:700px; font-size:14px; text-align: justify;">
    This example shows the randomly generated <b>scale-free-network</b> set of nodes and connected edges from example 2.
    By clicking the checkbox you can turn clustering on and off. If you increase the number of nodes to
    a value higher than 100, automatic clustering is used before the initial draw (assuming the checkbox is checked).
--- a/examples/network/20_navigation.html
+++ b/examples/network/20_navigation.html
@ -94,21 +94,7 @@
        nodes: nodes,
        edges: edges
      };
      /*
       var options = {
       nodes: {
       shape: 'circle'
       },
       edges: {
       length: 50
       },
       stabilize: false
       };
       */
      var options = {
        edges: {
          length: 50
        },
        stabilize: false,
        navigation: true,
        keyboard: true
@ -125,7 +111,7 @@
 <body onload="draw();">
 <h2>Navigation controls and keyboad navigation</h2>
 <div style="width: 700px; font-size:14px;">
 <div style="width: 800px; font-size:14px; text-align: justify;">
  This example is the same as example 2, except for the navigation controls that have been activated. The navigation controls are described below. <br /><br />
  <table class="legend_table">
    <tr>
--- a/examples/network/21_data_manipulation.html
+++ b/examples/network/21_data_manipulation.html
@ -114,9 +114,6 @@
        edges: edges
      };
      var options = {
        edges: {
          length: 50
        },
        stabilize: false,
        dataManipulation: true,
        onAdd: function(data,callback) {
@ -194,7 +191,7 @@
 <body onload="draw();">
 <h2>Editing the dataset</h2>
 <div style="width: 700px; font-size:14px;">
 <div style="width: 700px; font-size:14px; text-align: justify;">
  In this example we have enabled the data manipulation setting. If the dataManipulation option is set to true, the edit button will appear.
  If you prefer to have the toolbar visible initially, you can set the initiallyVisible option to true. The exact method is described in the docs.
  <br /><br />
--- a/examples/network/23_hierarchical_layout.html
+++ b/examples/network/23_hierarchical_layout.html
@ -79,8 +79,6 @@
      };
    var directionInput = document.getElementById("direction");
    var options = {
        edges: {
        },
        stabilize: false,
        smoothCurves: false,
        hierarchicalLayout: {
@ -100,7 +98,7 @@
 <body onload="draw();">
 <h2>Hierarchical Layout - Scale-Free-Network</h2>
 <div style="width:700px; font-size:14px;">
 <div style="width:700px; font-size:14px; text-align: justify;">
    This example shows the randomly generated <b>scale-free-network</b> set of nodes and connected edges from example 2.
    In this example, hierarchical layout has been enabled and the vertical levels are determined automatically.
 </div>
--- a/examples/network/24_hierarchical_layout_userdefined.html
+++ b/examples/network/24_hierarchical_layout_userdefined.html
@ -131,7 +131,7 @@
 <body onload="draw();">
 <h2>Hierarchical Layout - User-defined</h2>
 <div style="width:700px; font-size:14px;">
 <div style="width:700px; font-size:14px; text-align: justify;">
    This example shows a user-defined hierarchical layout. If the user defines levels for nodes but does not do so for all nodes, an alert will show up and hierarchical layout will be disabled. Either all or none can be defined.
    If the smooth curves appear to be inverted, the direction of the edge is not in the same direction as the network.
 </div>
--- a/examples/network/25_physics_configuration.html
+++ b/examples/network/25_physics_configuration.html
@ -77,10 +77,8 @@
      };
    var options = {
    edges: {
    },
    stabilize: false,
    configurePhysics:true
        stabilize: false,
        configurePhysics:true
    };
      network = new vis.Network(container, data, options);
@ -95,7 +93,7 @@
 <body onload="draw();">
 <h2>Playing with Physics</h2>
 <div style="width: 700px; font-size:14px;">
 <div style="width: 700px; font-size:14px; text-align: justify;">
    Every dataset is different. Nodes can have different sizes based on content, interconnectivity can be high or low etc. Because of this, network has a special option
    that the user can use to explore which settings may be good for him or her. This is ment to be used during the development phase when you are implementing vis.js. Once you have found
    settings you are happy with, you can supply them to network using the documented physics options.
--- a/examples/network/26_staticSmoothCurves.html
+++ b/examples/network/26_staticSmoothCurves.html
@ -17,7 +17,7 @@
 <body>
 <h2>Static smooth curves</h2>
 <div style="width:700px; font-size:14px;">
 <div style="width:700px; font-size:14px; text-align: justify;">
    All the smooth curves in the examples so far have been using dynamic smooth curves. This means that each curve has a
    support node which takes part in the physics simulation. For large networks or dense clusters, this may not be the ideal
    solution. To solve this, static smooth curves have been added. The static smooth curves are based only on the positions of the connected
--- a/examples/network/30_importing_from_gephi.html
+++ b/examples/network/30_importing_from_gephi.html
@ -34,7 +34,7 @@
 <body>
 <h2>Dynamic Data - Importing from Gephi (JSON)</h2>
 <div style="width:700px; font-size:14px;">
 <div style="width:700px; font-size:14px; text-align: justify;">
    This example shows how to import a JSON file exported by Gephi. The two options available for the import are
    available through the checkboxes. You can download the Gephi JSON exporter here:
    <a href="https://marketplace.gephi.org/plugin/json-exporter/" target="_blank">https://marketplace.gephi.org/plugin/json-exporter/</a>.
--- a/index.html
+++ b/index.html
@ -74,7 +74,7 @@ bower install vis
 <h3>download</h3>
 <a href="download/vis.zip">Click here to download vis.js</a>
 (version <span class="version">3.1.0</span>)
 (version <span class="version">3.2.0</span>)
 <h2 id="example">Example</h2>
@ -482,6 +482,12 @@ The source code of the examples can be found in the
      <div>performance</div>
    </a>
  </div>
  <div class="thumb">
    <a href="examples/graph2d/09_external_legend.html">
      <img src="img/gallery/graph2d/09_external_legend.png">
      <div>external legend</div>
    </a>
  </div>
 </div>