JSFiddle - React, Tailwind, and code Playground

by dpmartin42

HTML

<script src="http://sigmajs.org/assets/js/sigma.min.js"></script>
<div id="main">
    
    <div class="sigma-container">
        <div id="container"></div>
    </div>
    
    
    <!--
    <div class="instructions"></div>
    
    <div class="control-panel"></div>
    -->

</div>

CSS

#container {
    position: absolute;
    top: 0;
    left: 0;
    width: 75%;
    height: 100%;
    min-height: 200px;
    border-right: 1px #ccc dashed;
}
/*
.instructions{

    width: 24%;
    height: 78.5%;
    position: fixed;
    right: 0.5%;
    top: 0.5%;
    bottom: 0.5%;
}

.control-panel {
  color: #666;
  border-top: 1px #ccc dashed;
  background: #fff;
  position: relative;
  height: 84px;
}
*/

JavaScript

// Let's first initialize sigma:
var s = new sigma('container');

// Then, let's add some data to display:
s.graph.addNode({
    // Main attributes:
    id: 'n0',
    label: 'Hello',
    // Display attributes:
    x: 0,
    y: 0,
    size: 1,
    color: '#f00',
    originalColor: '#f00'
}).addNode({
    // Main attributes:
    id: 'n1',
    label: 'World !',
    // Display attributes:
    x: 1,
    y: 1,
    size: 1,
    color: '#00f',
    originalColor: '#00f'
}).addEdge({
    id: 'e0',
    // Reference extremities:
    source: 'n0',
    target: 'n1'
})

// Finally, let's ask our sigma instance to refresh:
s.refresh();