moving up the visualization

index.html

@@ -57,6 +57,27 @@ <h1>Visualization</h1>
 
     <p><em>Include the interactive visualization as part of this page. Static example follows.</em></p>
 
+  </ul>
+  <div class="table-holder" id="table"></div>
+  <!--   <div class="bargraph" id="bargraph"></div> -->
+  <div class="piechart" id="piechart"></div>
+  <div id="piechartContainer"></div>
+  <div class="waterLevel" id="waterLevel"></div>
+  <div id="waterLevelContainer"></div>
+  <!-- Scripts at the end avoid need for dealing with async, defer, or onload event handlers -->
+  <script src="https://d3js.org/d3.v5.min.js"></script>
+  <script src="lib/d3.v4/d3.v4.js"></script>
+  <script src="js/visualization.js"></script>
+  <script src="js/table.js"></script>
+  <script src="js/piechart.js"></script>
+  <script src="js/waterLevel.js"></script>
+  <script src="js/bargraph.js"></script>
+  <script src="js/linechart.js"></script>
+  <div class="vis-holder">
+    <div class="bargraph" id="bargraph"></div>
+    <div class="linechart-holder" id="linechart"></div>
+  </div>
+
     <!-- Your visualization here -->
     <!-- Change viewbox to whatever you want, e.g. "0 0 1000 6000" This determines your aspect ratio and coordinate system -->
     <!-- Delete all the sample SVG code below after the viewbox to before the closing tag. Populate this part of the SVG with D3. -->
@@ -66,7 +87,7 @@ <h1>Visualization</h1>
     <!-- </svg> -->
     <!-- Your writeup goes here -->
 
-    <h1>Demo Video</h1>
+  <h1>Demo Video</h1>
 
     <p><em>Embedded MP4 demo video using the HTML5 &lt;video&gt; tag. For example, this screen recording Prof. Cody
         Dunne made of Mike Bostock's flexible transitions in D3 slide:</em></p>
@@ -127,26 +148,6 @@ <h1>Acknowledgments</h1>
       <li><a href="https://d3js.org/">D3: Data-Driven Documents</a> by Mike Bostock.</li>
       <li><a href="https://codepo8.github.io/css-fork-on-github-ribbon/#">Pure CSS responsive "Fork me on GitHub"
           ribbon</a> by Chris Heilmann.</li>
-    </ul>
-    <div class="table-holder" id="table"></div>
-    <!--   <div class="bargraph" id="bargraph"></div> -->
-    <div class="piechart" id="piechart"></div>
-    <div id="piechartContainer"></div>
-    <div class="waterLevel" id="waterLevel"></div>
-    <div id="waterLevelContainer"></div>
-    <!-- Scripts at the end avoid need for dealing with async, defer, or onload event handlers -->
-    <script src="https://d3js.org/d3.v5.min.js"></script>
-    <script src="lib/d3.v4/d3.v4.js"></script>
-    <script src="js/visualization.js"></script>
-    <script src="js/table.js"></script>
-    <script src="js/piechart.js"></script>
-    <script src="js/waterLevel.js"></script>
-    <script src="js/bargraph.js"></script>
-    <script src="js/linechart.js"></script>
-    <div class="vis-holder">
-      <div class="bargraph" id="bargraph"></div>
-      <div class="linechart-holder" id="linechart"></div>
-    </div>
   </div>
 
 </body>