JSFiddle - React, Tailwind, and code Playground

by Rishi Kumar

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/1.2.2/bluebird.min.js"></script>
<!DOCTYPE html>
<!-- This code is for demonstration purposes only.  You should not hotlink to Github, Rawgit, or files from the Cytoscape.js documentation in your production apps. -->
<html>
<head>
<meta name="description" content="[Tokyo railways]" />
<meta charset=utf-8 />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<title>Tokyo railways</title>
  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/tippy.css" />
</head>
<body>
  <div id="cy"></div>
  <div id="loading">
    <span class="fa fa-refresh fa-spin"></span>
  </div>
  <button id="clear">CLEAR</button>
  <script src="https://unpkg.com/[email protected]/dist/fetch.umd.js"></script>
  <script src="https://unpkg.com/[email protected]/dist/umd/popper.js"></script>
  <script src="https://unpkg.com/[email protected]/dist/tippy.all.js"></script>
  <script src="https://js.cytoscape.org/js/cytoscape.min.js"></script>
  <script src="https://unpkg.com/[email protected]/cytoscape-popper.js"></script>
</body>
</html>

CSS

html, body { 
  font: 14px helvetica neue, helvetica, arial, sans-serif;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#cy {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #000;
}

#loading {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  margin-top: -0.5em;
  font-size: 2em;
  color: #fff;
}

#loading.loaded {
  display: none;
}

button {
  font-size: 2em;
  background-color: #FC4C4C;
  color: #fff;
  border: 0;
  cursor: pointer;
  border-radius: 0.25em;
  font-family: helvetica neue, helvetica, arial, sans-serif;
  outline: 0;
}

#clear {
  position: absolute;
  right: 0;
  top: 0;
  margin: 0.25em;
  visibility: hidden;
}

body.has-start #clear {
  visibility: visible;
}

#end {
  display: none;
}

body.has-start:not(.has-end) #end {
  display: inline;
}

body.has-start:not(.has-end) #start {
  display: none;
}

body.calc #loading {
  display: block;
}

JavaScript

/*
This demo visualises the railway stations in Tokyo (東京) as a graph.

This demo gives examples of

- loading elements via http request
- loading style via http request
- using the preset layout with predefined positions in each element
- using motion blur for smoother viewport experience
- using `min-zoomed-font-size` to show labels only when needed for better performance
*/

/* global document, fetch, window, cy, cytoscape, Promise, tippy */

//document.addEventListener('DOMContentLoaded', function(){
/* debugger; */

  var $ = function(sel){ return document.querySelector(sel); };

  // hyperscript-like function
  var h = function(tag, attrs, children){
    var el = document.createElement(tag);

    if(attrs != null && typeof attrs === typeof {}){
      Object.keys(attrs).forEach(function(key){
        var val = attrs[key];

        el.setAttribute(key, val);
      });
    } else if(typeof attrs === typeof []){
      children = attrs;
    }

    if(children != null && typeof children === typeof []){
      children.forEach(function(child){
        el.appendChild(child);
      });
    } else if(children != null && typeof children === typeof ''){
      el.appendChild(document.createTextNode(children));
    }

    return el;
  };

  var toJson = function(obj){ return obj.json(); };
  var toText = function(obj){ return obj.text(); };

  // get exported json from cytoscape desktop
  var graphP = fetch('https://js.cytoscape.org/demos/tokyo-railways/tokyo-railways.json').then(toJson);

  // also get style
  var styleP = fetch('https://js.cytoscape.org/demos/tokyo-railways/tokyo-railways.cycss').then(toText);

  // when both graph export json and style loaded, init cy
  Promise.all([ graphP, styleP ]).then(initCy);

  function initCy( then ){
    var loading = document.getElementById('loading');
    var expJson = then[0];
    var styleJson = then[1];
    var elements = expJson.elements;

    loading.classList.add('loaded');

    window.cy = cytoscape({
      container:...