Old school D3 from simpler times

All examples By author By category About

curran

Full window Github gist

Reactive Flow Diagram

This program renders a network diagram for a ModelJS reactive flow.

The input data is generated by an experimental ModelJS branch that computes the reactive flow graph at runtime.

Based on a previous implementation from July 2014

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.js"></script>

<script>
      requirejs.config({
        paths: {
          d3: "//d3js.org/d3.v3.min",
          jquery: "//code.jquery.com/jquery-2.1.1.min",
          lodash: "//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.4.0/lodash.min",
          async: "//cdnjs.cloudflare.com/ajax/libs/async/0.9.0/async",
          crossfilter: "//cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.11/crossfilter.min"
        }
      });
    </script>

<link rel="stylesheet" href="styles.css">

<title>Data Flow Diagram</title>
  </head>
  <body>

<div id="container"></div>
    
    
    <script src="main.js"></script>
    
  </body>
</html>

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
​
    <!-- Use RequireJS for module loading. -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.js"></script>
​
    <!-- Configure RequireJS paths for third party libraries. -->
    <script>
      requirejs.config({
        paths: {
          d3: "//d3js.org/d3.v3.min",
          jquery: "//code.jquery.com/jquery-2.1.1.min",
          lodash: "//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.4.0/lodash.min",
          async: "//cdnjs.cloudflare.com/ajax/libs/async/0.9.0/async",
          crossfilter: "//cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.11/crossfilter.min"
        }
      });
    </script>
​
    <!-- Include CSS that styles the visualization. -->
    <link rel="stylesheet" href="styles.css">
​
    <title>Data Flow Diagram</title>
  </head>
  <body>
​
    <!-- The visualization will be injected into this div. -->
    <div id="container"></div>
    
    <!-- Run the main program. -->
    <script src="main.js"></script>
    
  </body>
</html>
​
    

https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.js