bootstrap all examples and add index/source links

vaucouleur · Jun 7, 2016 · d8ba9a4 · d8ba9a4
1 parent 1dc00b9
commit d8ba9a4
Show file tree

Hide file tree

Showing 33 changed files with 161 additions and 11 deletions.
diff --git a/web/examples/area.html b/web/examples/area.html
@@ -3,10 +3,13 @@
   <head>
     <title>dc.js - Area Chart Example</title>
     <meta charset="UTF-8">
+    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="../css/dc.css"/>
   </head>
   <body>
 
+<div class="container">
+<script type="text/javascript" src="header.js"></script>
     <div id="test"></div>
 
     <script type="text/javascript" src="../js/d3.js"></script>
@@ -60,5 +63,6 @@
 
     </script>
 
+</div>
   </body>
 </html>
diff --git a/web/examples/bar-extra-line.html b/web/examples/bar-extra-line.html
@@ -3,10 +3,13 @@
 <head>
     <title>dc.js - Bar Chart with Extra Line Example</title>
     <meta charset="UTF-8">
+    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="../css/dc.css"/>
 </head>
 <body>
 
+<div class="container">
+<script type="text/javascript" src="header.js"></script>
 
 <div id="test"></div>
 
@@ -74,5 +77,6 @@
 
 </script>
 
+</div>
 </body>
 </html>
diff --git a/web/examples/bar-single-select.html b/web/examples/bar-single-select.html
@@ -3,10 +3,13 @@
 <head>
     <title>dc.js - Bar Chart Example</title>
     <meta charset="UTF-8">
+    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="../css/dc.css"/>
 </head>
 <body>
 
+<div class="container">
+<script type="text/javascript" src="header.js"></script>
 <p>Frequently asked question: how to enable single-select on an ordinal chart?</p>
 
 <div id="test">
@@ -51,5 +54,6 @@
 
 </script>
 
+</div>
 </body>
 </html>
diff --git a/web/examples/bar.html b/web/examples/bar.html
@@ -3,10 +3,13 @@
 <head>
     <title>dc.js - Bar Chart Example</title>
     <meta charset="UTF-8">
+    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="../css/dc.css"/>
 </head>
 <body>
 
+<div class="container">
+<script type="text/javascript" src="header.js"></script>
 <div id="test"></div>
 
 <script type="text/javascript" src="../js/d3.js"></script>
@@ -43,5 +46,6 @@
 
 </script>
 
+</div>
 </body>
 </html>
diff --git a/web/examples/box-plot-time.html b/web/examples/box-plot-time.html
@@ -3,10 +3,13 @@
 <head>
     <title>dc.js - Box-Plot Example</title>
     <meta charset="UTF-8">
+    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="../css/dc.css"/>
 </head>
 <body>
 
+<div class="container">
+<script type="text/javascript" src="header.js"></script>
 <div id="box-test"></div>
 <div id="pie-chart"></div>
 
@@ -67,5 +70,6 @@
 
 </script>
 
+</div>
 </body>
 </html>
diff --git a/web/examples/box-plot.html b/web/examples/box-plot.html
@@ -3,10 +3,13 @@
 <head>
     <title>dc.js - Box-Plot Example</title>
     <meta charset="UTF-8">
+    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="../css/dc.css"/>
 </head>
 <body>
 
+<div class="container">
+<script type="text/javascript" src="header.js"></script>
 <div id="box-test"></div>
 <div id="pie-chart"></div>
 
@@ -70,5 +73,6 @@
 
 </script>
 
+</div>
 </body>
 </html>
diff --git a/web/examples/complex-reduce.html b/web/examples/complex-reduce.html
@@ -3,22 +3,34 @@
 <head>
     <title>dc.js - Complex Reductions Example</title>
     <meta charset="UTF-8">
+    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="../css/dc.css"/>
+    <style>
+      label {
+          display: inline;
+          padding-left: 1em;
+      }
+      label input {
+          vertical-align: top;
+      }
+    </style>
 </head>
 <body>
 
+<div class="container">
+
+<script type="text/javascript" src="header.js"></script>
   <p>Frequently asked question: how to show the minimum/maximum of some value in the rows?</p>
 
   <p>Some kinds of reductions require the entire set of values at every step: median, mode, minimum,
-  maximum. (It is almost by accident that you can get away with calculating the mean without looking
-  at all the rows.) This example shows how to keep the set of
-  values. <a href="http://github.com/dc-js/dc.js/tree/develop/web/examples/complex-reduce.html">See
-  the source</a> for details.</p>
+  maximum. (The mean just needs a running sum.)</p>
+
+  <p>This example shows how to keep the set of values.</p>
 
   <div id="select-operation">
-    <input type=radio name="operation" value="median" checked="true">median
-    <input type=radio name="operation" value="min">min
-    <input type=radio name="operation" value="max">max
+    <label><input type=radio name="operation" value="median" checked="true">&nbsp;median</label>
+    <label><input type=radio name="operation" value="min">&nbsp;min</label>
+    <label><input type=radio name="operation" value="max">&nbsp;max</label>
   </div>
   <div id="test-run">
     <h4>Run</h4>
@@ -135,5 +147,6 @@ <h4>Experiment</h4>
 
 </script>
 
+</div>
 </body>
 </html>
diff --git a/web/examples/composite.html b/web/examples/composite.html
@@ -3,10 +3,13 @@
 <head>
     <title>dc.js - Composite Chart Example</title>
     <meta charset="UTF-8">
+    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="../css/dc.css"/>
 </head>
 <body>
 
+<div class="container">
+<script type="text/javascript" src="header.js"></script>
 <div id="test_composed"></div>
 
 <script type="text/javascript" src="http://d3js.org/queue.v1.min.js"></script>
@@ -59,5 +62,6 @@
 
 });
 </script>
+</div>
 </body>
 </html>
diff --git a/web/examples/download-table.html b/web/examples/download-table.html
@@ -3,10 +3,13 @@
 <head>
     <title>dc.js - Filtering Example</title>
     <meta charset="UTF-8">
+    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="../css/dc.css"/>
 </head>
 <body>
 
+<div class="container">
+<script type="text/javascript" src="header.js"></script>
   <div id="chart-ring-year" style="width:300px; height:300px">
     <div class="reset" style="visibility: hidden;">selected: <span class="filter"></span>
       <a href="javascript:yearRingChart.filterAll();dc.redrawAll();">reset</a>
@@ -106,5 +109,6 @@
 
 </script>
 
+</div>
 </body>
 </html>
diff --git a/web/examples/filtering-removing.html b/web/examples/filtering-removing.html
@@ -3,10 +3,13 @@
 <head>
     <title>dc.js - Filtering Example</title>
     <meta charset="UTF-8">
+    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="../css/dc.css"/>
 </head>
 <body>
 
+<div class="container">
+<script type="text/javascript" src="header.js"></script>
   <p>Example demonstrating using a "<a href="https://github.com/dc-js/dc.js/wiki/FAQ#fake-groups">Fake Group</a>" to remove
     the empty bars of an ordinal bar chart when their values drop to zero.</p>
 
@@ -90,5 +93,6 @@
 
 </script>
 
+</div>
 </body>
 </html>
diff --git a/web/examples/filtering.html b/web/examples/filtering.html
@@ -3,10 +3,13 @@
 <head>
     <title>dc.js - Filtering Example</title>
     <meta charset="UTF-8">
+    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="../css/dc.css"/>
 </head>
 <body>
 
+<div class="container">
+<script type="text/javascript" src="header.js"></script>
   <div id="chart-ring-year" style="width:300px; height:300px">
     <div class="reset" style="visibility: hidden;">selected: <span class="filter"></span>
       <a href="javascript:yearRingChart.filterAll();dc.redrawAll();">reset</a>
@@ -83,5 +86,6 @@
 
 </script>
 
+</div>
 </body>
 </html>
diff --git a/web/examples/header.js b/web/examples/header.js
@@ -0,0 +1,10 @@
+document.write([
+    '<div id="header">',
+    '<div id="links" style="padding:10px 0px 0px 10px">',
+    '<a href=".">all examples</a>&nbsp;&nbsp;<a href="',
+    document.location.pathname.replace(/^.*\/examples/, 'https://github.com/dc-js/dc.js/tree/master/web/examples'),
+    '">source</a>',
+    '</div>',
+    '<hr>',
+    '</div>'
+].join(''));
diff --git a/web/examples/heat.html b/web/examples/heat.html
@@ -3,6 +3,7 @@
 <head>
     <title>dc.js - Heatmap Example</title>
     <meta charset="UTF-8">
+    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="../css/dc.css"/>
     <style>
       .heat-box {
@@ -12,6 +13,9 @@
     </style>
 </head>
 <body>
+<div class="container">
+<script type="text/javascript" src="header.js"></script>
+
 <h2>Michelson–Morley experiment</h2>
 <div id="test"></div>
 
@@ -47,5 +51,6 @@ <h2>Michelson–Morley experiment</h2>
 
 </script>
 
+</div>
 </body>
 </html>
diff --git a/web/examples/heatmap-filtering.html b/web/examples/heatmap-filtering.html
@@ -3,11 +3,15 @@
 <head>
     <title>dc.js - Heatmap Filtering Example</title>
     <meta charset="UTF-8">
+    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="../css/dc.css"/>
     <style>
     </style>
 </head>
 <body>
+<div class="container">
+<script type="text/javascript" src="header.js"></script>
+
 <h2>Michelson–Morley experiment</h2>
 <div id="heatmap"></div>
 <div id="barchart"></div>
@@ -127,5 +131,6 @@ <h2>Michelson–Morley experiment</h2>
 
 </script>
 
+</div>
 </body>
 </html>
diff --git a/web/examples/line.html b/web/examples/line.html
@@ -3,10 +3,13 @@
 <head>
     <title>dc.js - Line Chart Example</title>
     <meta charset="UTF-8">
+    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="../css/dc.css"/>
 </head>
 <body>
 
+<div class="container">
+<script type="text/javascript" src="header.js"></script>
 <div id="test"></div>
 
 <script type="text/javascript" src="../js/d3.js"></script>
@@ -44,5 +47,6 @@
 
 </script>
 
+</div>
 </body>
 </html>
diff --git a/web/examples/multi-focus.html b/web/examples/multi-focus.html
@@ -3,10 +3,13 @@
 <head>
     <title>dc.js - Filter Group Example</title>
     <meta charset="UTF-8">
+    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="../css/dc.css"/>
 </head>
 <body>
 
+<div class="container">
+<script type="text/javascript" src="header.js"></script>
 <div id="test1"></div>
 <div id="test2"></div>
 <div id="test3"></div>
@@ -106,5 +109,6 @@
 
 </script>
 
+</div>
 </body>
 </html>
diff --git a/web/examples/multi-scatter.html b/web/examples/multi-scatter.html
@@ -3,10 +3,13 @@
 <head>
     <title>dc.js - Scatter Plot Example</title>
     <meta charset="UTF-8">
+    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="../css/dc.css"/>
 </head>
 <body>
 
+<div class="container">
+<script type="text/javascript" src="header.js"></script>
 <div id="test"></div>
 
 <script type="text/javascript" src="../js/d3.js"></script>
@@ -55,5 +58,6 @@
 
 </script>
 
+</div>
 </body>
 </html>