add demos and development mode

jdfekete · Jan 1, 2021 · a380ca6 · a380ca6
1 parent ed90597
commit a380ca6
Show file tree

Hide file tree

Showing 20 changed files with 979 additions and 124 deletions.
diff --git a/README.md b/README.md
@@ -4,6 +4,7 @@
 
 Want to learn more? [See the wiki.](https://github.com/jdfekete/reorder.js/wiki)
 
+
 ## Development
 
 To help develop Reordering.js, you need to have [Node.js](http://www.nodejs.org)
@@ -22,6 +23,15 @@ To run the tests in the distribution, use the following command:
 ```
 npm run test
 ```
+## Examples
+
+To run the examples, use the following command:
+
+```
+npm run dev
+```
+
+It should open a web browser but if does not, open a web page and connect to: `http://localhost:3004/`.
 
 ## Thanks
 

diff --git a/examples/bertin/index.html b/examples/bertin/index.html
@@ -3,7 +3,7 @@
 <title>Bertin Heatmap</title>
 <style>
 
-@import url(../style.css?20120427);
+@import url(/style.css);
 
 .background {
   fill: #eee;
@@ -14,9 +14,8 @@
 }
 
 </style>
-<script src="../../lib/d3.v3.min.js"></script>
-<script src="../../lib/science.v2.js"></script>
-<script src="../../dist/reorder.umd.js"></script>
+<script src="/d3.v3.min.js"></script>
+<script src="/reorder.js"></script>
 <body>
 
 <h1>Bertin Heatmap</h1>

diff --git a/examples/cars/index.html b/examples/cars/index.html
@@ -7,12 +7,10 @@
   height: 200px;
 }
 </style>
-<script src="../../lib/d3.v3.js"></script>
-<script src="../../lib/d3.parcoords.js"></script>
-<script src="../../lib/science.v2.js"></script>
-<script src="../../lib/tiny-queue.js"></script>
-<script src="../../dist/reorder.umd.js"></script>
-<link rel="stylesheet" type="text/css" href="../../lib/d3.parcoords.css">
+<script src="/d3.v3.js"></script>
+<script src="/d3.parcoords.js"></script>
+<script src="/reorder.js"></script>
+<link rel="stylesheet" type="text/css" href="/d3.parcoords.css">
 <div id="example1" class="parcoords"></div>
 <div id="example2" class="parcoords"></div>
 

diff --git a/examples/index.html b/examples/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<style>
+    @import url(/style.css);
+</style>
+<head>
+    <meta charset="UTF-8">
+    <title>Reorder.js</title>
+    <style>
+        html,
+        body {
+            height: 100%;
+        }
+
+        h1 {
+            text-align: center;
+        }
+
+        ul {
+            margin-left: calc(50% - 84px);
+            margin-top: 40px;
+            list-style: none;
+            font-size: 16px;
+        }
+
+    </style>
+</head>
+<body>
+    <h1>Demo</h1>
+    <ul>
+        <li>
+            <a href="tables/index.html">Basic Matrix Reordering</a>
+        </li>
+        <li>
+            <a href="miserables/index.html">Les Misérables Co-occurrence</a>
+        </li>
+        <li>
+            <a href="saclay/index.html">Paris-Saclay Co-authorship Matrix</a>
+        </li>
+        <li>
+            <a href="bertin/index.html">Bertin Merovingien Matrix</a>
+        </li>
+        <li>
+            <a href="pcp/index.html">Basic Parallel Coordinates</a>
+        </li>
+        <li>
+            <a href="cars/index.html">Cars Dataset Parallel Coordinates</a>
+        </li>
+    </ul>
+</body>
+</html>
diff --git a/examples/matrix.js b/examples/matrix.js
@@ -46,7 +46,7 @@ function matrix(json) {
     var dist_adjacency;
 
     var leafOrder = reorder.optimal_leaf_order()
-    	    .distance(science.stats.distance.manhattan);
+    	    .distance(reorder.distance.manhattan);
 
     function computeLeaforder() {
 	var order = leafOrder(adjacency);
@@ -224,7 +224,7 @@ function matrix(json) {
     }
 
     function distance(value) {
-	leafOrder.distance(science.stats.distance[value]);
+	leafOrder.distance(reorder.distance[value]);
 
 	if (currentOrder == 'leafOrder') {
 	    orders.leafOrder = computeLeaforder;

diff --git a/examples/miserables/index.html b/examples/miserables/index.html
@@ -3,7 +3,7 @@
 <title>Les Misérables Co-occurrence</title>
 <style>
 
-@import url(../style.css?20120427);
+@import url(/style.css);
 
 .background {
   fill: #eee;
@@ -25,11 +25,9 @@
 }
 
 </style>
-<script src="../../lib/d3.v3.js"></script>
-<script src="../../lib/science.v2.js"></script>
-<script src="../../lib/tiny-queue.js"></script>
-<script src="../../dist/reorder.umd.js"></script>
-<script src="../matrix.js"></script>
+<script src="/d3.v3.js"></script>
+<script src="/reorder.js"></script>
+<script src="/matrix.js"></script>
 
 <header>
   <aside>October 6, 2013</aside>

diff --git a/examples/pcp/index.html b/examples/pcp/index.html
@@ -1,31 +1,30 @@
 <meta charset="UTF8">
-<script src="../../lib/d3.v3.js"></script>
-<script src="../../lib/d3.parcoords.js"></script>
-<script src="../../lib/science.v2.js"></script>
-<script src="../../lib/tiny-queue.js"></script>
-<script src="../../dist/reorder.umd.js"></script>
-<link rel="stylesheet" type="text/css" href="../../lib/d3.parcoords.css">
+<script src="/d3.v3.js"></script>
+<script src="/d3.parcoords.js"></script>
+<script src="/reorder.js"></script>
+<link rel="stylesheet" type="text/css" href="/d3.parcoords.css">
 <div id="example" class="parcoords" style="width:360px;height:150px"></div>
 <div id="example2" class="parcoords" style="width:360px;height:150px"></div>
 
 <script>
-var data = [
+const data = [
   [0,-0,0,0,0,3 ],
   [1,-1,1,2,1,6 ],
   [2,-2,4,4,0.5,2],
   [3,-3,9,6,0.33,4],
   [4,-4,16,8,0.25,9]
 ],
-  dimensions = reorder.range(6),
   axes = ['a', 'b', 'c', 'd', 'e', 'f'];
 
-var pc = d3.parcoords()("#example")
+  //reorder.set_debug(true);
+
+  var pc = d3.parcoords({dimensionTitles: axes})("#example")
   .data(data)
   .render()
   .ticks(3)
   .createAxes();
 
-var pc2 = d3.parcoords()("#example2")
+var pc2 = d3.parcoords({dimensionTitles: axes})("#example2")
   .data(data);
   reorder.parcoords(pc2);
   pc2

diff --git a/examples/saclay/index.html b/examples/saclay/index.html
@@ -3,7 +3,7 @@
 <title>INRIA Saclay Researchers Co-Authorship Network</title>
 <style>
 
-@import url(../style.css?20120427);
+@import url(/style.css);
 
 aside {
   font-size: small;
@@ -36,11 +36,9 @@
 }
 
 </style>
-<script src="../../lib/d3.v3.js"></script>
-<script src="../../lib/science.v2.js"></script>
-<script src="../../lib/tiny-queue.js"></script>
-<script src="../../dist/reorder.umd.js"></script>
-<script src="../matrix.js"></script>
+<script src="/d3.v3.js"></script>
+<script src="/reorder.min.js"></script>
+<script src="/matrix.js"></script>
 
 <header>
   <aside>Oct 6, 2013</aside>

diff --git a/examples/tables/index.html b/examples/tables/index.html
@@ -11,11 +11,9 @@
   stroke: #000;
 }
     </style>
-    <script src="../../lib/d3.v3.js"></script>
-    <script src="../../lib/science.v2.js"></script>
-    <script src="../../lib/tiny-queue.js"></script>
-    <script src="../../dist/reorder.umd.js"></script>
-    <script src="../table.js"></script>
+    <script src="/d3.v3.js"></script>
+    <script src="/reorder.js"></script>
+    <script src="/table.js"></script>
   </head>
   <body>
     <button type="button" onclick="random_permute()">Random Permute</button>

diff --git a/examples/tables/index_canvas.html b/examples/tables/index_canvas.html
@@ -3,9 +3,7 @@
  <head>
    <title>Heatmap Canvas</title>
    <meta charset="utf-8"/>
-    <script src="../../lib/science.v2.js"></script>
-    <script src="../../lib/tiny-queue.js"></script>
-    <script src="../../dist/reorder.umd.js"></script>
+    <script src="/reorder.js"></script>
   <script type="application/javascript">
 var matrix = [[1, 0, 0, 0, 1, 0, 0, 0],
 	      [0, 1, 1, 0, 0, 1, 0, 1],