<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Sigma example: Performances showcase</title> </head> <body> <style> html, body, #sigma-container { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; font-family: sans-serif; } #buttons { position: absolute; right: 1em; top: 1em; display: flex; } input[type="number"] { width: 5em; } h4 { margin: 0; } fieldset { border: none; } h4, fieldset > div { margin-bottom: 0.2em; } button { margin-right: 1em; display: inline-block; text-align: center; background: white; outline: none; border: 1px solid dimgrey; border-radius: 2px; cursor: pointer; } </style> <div id="sigma-container"></div> <div id="buttons"> <form> <fieldset> <h4>Graph</h4> <div> <input type="number" id="order" name="order" min="2" step="1" value="5000" /> <label for="order">Number of nodes</label> </div> <div> <input type="number" id="size" name="size" min="1" step="1" value="10000" /> <label for="size">Number of edges</label> </div> <div> <input type="number" id="clusters" name="clusters" min="1" step="1" value="3" /> <label for="clusters">Number of clusters</label> </div> </fieldset> <fieldset> <h4>Edges renderer</h4> <div> <input type="radio" name="edges-renderer" id="edges-default" value="edges-default" /> <label for="edges-default">Default</label> </div> <div> <input type="radio" name="edges-renderer" id="edges-fast" value="edges-fast" checked /> <label for="edges-fast">Faster (only 1px thick edges)</label> </div> </fieldset> <fieldset> <button type="submit">Reset graph</button> <button type="button" id="fa2">Start layout ▶</button> </fieldset> </form> </div> <script src="build/bundle.js"></script> </body> </html>