Replace chart-root's with vis-hide container

This gets rid of a lot of repetition.

3 files changed, 28 insertions, 24 deletions

diff --git a/css/style.css b/css/style.css
index 70482a7..0b37fb7 100644
--- a/css/style.css
+++ b/css/style.css
@@ -42,7 +42,7 @@ body {
 
 /* Hide charts while loadinfo is shown */
 
-.chart-root {
+.vis-hide {
   display: none;
   opacity: 0;
 }
diff --git a/index.html b/index.html
index 5d30b53..1a029cd 100644
--- a/index.html
+++ b/index.html
@@ -6,26 +6,28 @@
 
 <div id="body">
   <div id="side">
-    <div id="date-chart" class="chart-root">
-      <h3>Experience gain instances by Date <a class="reset" style="display: none;" href="javascript:mv.dateChart.filterAll();dc.redrawAll();">clear</a></h3>
-    </div>
-    <div id="player-chart" class="chart-root">
-      <h3>Experience gain instances by Character ID <span class="help" title="Older to newer characters appear left to right, respectively.">[?]</span> <a class="reset" style="display: none;" href="javascript:mv.pcChart.filterAll();dc.redrawAll();">clear</a></h3>
-    </div>
-    <div id="blvl-chart" class="chart-root">
-      <h3>Experience gain instances by Character Base Level <a class="reset" style="display: none;" href="javascript:mv.blvlChart.filterAll();dc.redrawAll();">clear</a></h3>
-    </div>
-    <div id="type-chart" class="chart-root">
-      <h3>Experience gain instances by Type <a class="reset" style="display: none;" href="javascript:mv.typeChart.filterAll();dc.redrawAll();">clear</a></h3>
-    </div>
-    <div id="target-chart" class="chart-root">
-      <h3>Experience gain instances by Target <a class="reset" style="display: none;" href="javascript:mv.targetChart.filterAll();dc.redrawAll();">clear</a></h3>
-    </div>
-    <div id="wpn-chart" class="chart-root">
-      <h3>Experience gain instances by Weapon <a class="reset" style="display: none;" href="javascript:mv.wpnChart.filterAll();dc.redrawAll();">clear</a></h3>
-    </div>
-    <div id="def-chart" class="chart-root">
-      <h3>Definedness of records <span class="help" title="If logs are missing between server boot and the logs provided, not all information will be available for all records. Definedness of records falls into three categories. Records with undefined data; records with well defined data, but mixed in with records having undefined data, limiting validity of inferences; and records after any uncertain times, which are fully well defined. It is highly recommended that you filter results to only include records which are in fully well defined times; however, this may not always be possible.">[?]</span> <a class="reset" style="display: none;" href="javascript:mv.defChart.filterAll();dc.redrawAll();">clear</a></h3>
+    <div class="vis-hide">
+      <div id="date-chart">
+        <h3>Experience gain instances by Date <a class="reset" style="display: none;" href="javascript:mv.dateChart.filterAll();dc.redrawAll();">clear</a></h3>
+      </div>
+      <div id="player-chart">
+        <h3>Experience gain instances by Character ID <span class="help" title="Older to newer characters appear left to right, respectively.">[?]</span> <a class="reset" style="display: none;" href="javascript:mv.pcChart.filterAll();dc.redrawAll();">clear</a></h3>
+      </div>
+      <div id="blvl-chart">
+        <h3>Experience gain instances by Character Base Level <a class="reset" style="display: none;" href="javascript:mv.blvlChart.filterAll();dc.redrawAll();">clear</a></h3>
+      </div>
+      <div id="type-chart">
+        <h3>Experience gain instances by Type <a class="reset" style="display: none;" href="javascript:mv.typeChart.filterAll();dc.redrawAll();">clear</a></h3>
+      </div>
+      <div id="target-chart">
+        <h3>Experience gain instances by Target <a class="reset" style="display: none;" href="javascript:mv.targetChart.filterAll();dc.redrawAll();">clear</a></h3>
+      </div>
+      <div id="wpn-chart">
+        <h3>Experience gain instances by Weapon <a class="reset" style="display: none;" href="javascript:mv.wpnChart.filterAll();dc.redrawAll();">clear</a></h3>
+      </div>
+      <div id="def-chart">
+        <h3>Definedness of records <span class="help" title="If logs are missing between server boot and the logs provided, not all information will be available for all records. Definedness of records falls into three categories. Records with undefined data; records with well defined data, but mixed in with records having undefined data, limiting validity of inferences; and records after any uncertain times, which are fully well defined. It is highly recommended that you filter results to only include records which are in fully well defined times; however, this may not always be possible.">[?]</span> <a class="reset" style="display: none;" href="javascript:mv.defChart.filterAll();dc.redrawAll();">clear</a></h3>
+      </div>
     </div>
   </div>
   <div id="main">
@@ -46,8 +48,10 @@
         </div>
       </div>
     </div>
-    <div id="map-chart" class="chart-root">
-      <h3>Experience gain by Map <span class="help" title="Bubble size indicates instances of experience gain for that map. X axis position indicates the sum of level experience gain for that map. Y axis position indicates the sum of job experience gain for that map.">[?]</span> <a class="reset" style="display: none;" href="javascript:mv.mapChart.filterAll();dc.redrawAll();">clear</a></h3>
+    <div class="vis-hide">
+      <div id="map-chart">
+        <h3>Experience gain by Map <span class="help" title="Bubble size indicates instances of experience gain for that map. X axis position indicates the sum of level experience gain for that map. Y axis position indicates the sum of job experience gain for that map.">[?]</span> <a class="reset" style="display: none;" href="javascript:mv.mapChart.filterAll();dc.redrawAll();">clear</a></h3>
+      </div>
     </div>
   </div>
 </div>
diff --git a/js/mv.js b/js/mv.js
index 3c3402a..019e8ff 100644
--- a/js/mv.js
+++ b/js/mv.js
@@ -214,7 +214,7 @@ var mv = {};
       .transition()
       .style("opacity", 0)
       .remove();
-    d3.selectAll(".chart-root")
+    d3.selectAll(".vis-hide")
       .style("display", "inline")
       .transition()
       .style("opacity", 1)