Add axis labels and help text

3 files changed, 81 insertions, 12 deletions

diff --git a/public/css/style.css b/public/css/style.css
index 206415e..a73e2dd 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -126,11 +126,44 @@ h3 {
   text-anchor: end;
 }
 
-#stat-chart text.dim-label {
+#stat-chart text.dim-label, .axis-label {
   font: 12px sans-serif;
   font-weight: bold;
 }
 
+.axis-label {
+  height: 0;
+  width: 0;
+  position: relative;
+  white-space: nowrap;
+}
+
+.x-axis-label {
+  left: 50%;
+}
+
+.y-axis-label {
+  -webkit-transform: rotate(-90deg);
+  -moz-transform: rotate(-90deg);
+  -ms-transform: rotate(-90deg);
+  -o-transform: rotate(-90deg);
+  transform: rotate(-90deg);
+  -webkit-transform-origin: 50% 50%;
+  -moz-transform-origin: 50% 50%;
+  -ms-transform-origin: 50% 50%;
+  -o-transform-origin: 50% 50%;
+  transform-origin: 50% 50%;
+}
+
+/* Chart meta info */
+
+p.info {
+  font: 10px sans-serif;
+  color: #777;
+  margin: 0 .4em;
+  padding: 0;
+}
+
 /* User list */
 
 #connection-warning {
@@ -156,6 +189,15 @@ h3 {
   margin: 0 2em;
 }
 
+#users-status .channel:before {
+  content: "channel";
+  font: 10px sans-serif;
+  color: "#888";
+  padding: 0;
+  margin: 0;
+  display: block;
+}
+
 #users-status a {
   margin-left: 1em;
 }
diff --git a/public/index.html b/public/index.html
index e593f2b..160aa99 100644
--- a/public/index.html
+++ b/public/index.html
@@ -10,13 +10,19 @@
     <div class="side med col3">
       <div id="connect-status">
         <h3>Manavis users</h3>
+        <p class="info">These are the other users currently online on manavis. If you find something interesting to show, create a channel and get people to join to take a look!</p>
         <div id="users-status"></div>
       </div>
       <div id="blvl-chart">
         <h3>Character base level <a class="reset" style="display: none;" href="javascript:mv.charts.blvl.filterAll();dc.redrawAll();">clear</a></h3>
+        <div class="axis-label y-axis-label">XP instances</div>
+        <div class="axis-label x-axis-label">Base level</div>
       </div>
       <div id="stat-chart">
         <h3>Stat allocation</h3>
+        <p class="info">The more intense the color, the more XP instances.<br/>
+        Each subchart relates one attribute to another. This is redundant in places, such as with the str-agi chart and the agi-str chart, so the chart is symmetric.<br/>
+        To get an idea of how this works, try filtering a range of low levels above, then slide the filter right, watching how the stats increase as people gain more levels and can get more stats.<p>
       </div>
     </div>
     <div class="side thin col2">
@@ -32,15 +38,23 @@
         </div>
         <div id="num-attackers-chart">
           <h3>Number of attackers <a class="reset" style="display: none;" href="javascript:mv.charts.numAttackers.filterAll();dc.redrawAll();">clear</a><h3>
+          <p class="info">The number of characters responsible for attacking the mob. One character attacking a mob directly, and another attacking it with a dozen summons, would count as two attackers.</p>
+          <div class="axis-label y-axis-label">XP instances</div>
+          <div class="axis-label x-axis-label">Characters</div>
         </div>
       </div>
     </div>
     <div id="main" class="col1">
       <div id="date-chart">
         <h3>Date <a class="reset" style="display: none;" href="javascript:mv.charts.date.filterAll();dc.redrawAll();">clear</a></h3>
+        <div class="axis-label y-axis-label">XP instances</div>
+        <div class="axis-label x-axis-label">Date</div>
       </div>
       <div id="map-chart">
-        <h3>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.charts.map.filterAll();dc.redrawAll();">clear</a></h3>
+        <h3>Map <a class="reset" style="display: none;" href="javascript:mv.charts.map.filterAll();dc.redrawAll();">clear</a></h3>
+        <p class="info">The larger the bubble, the more XP instances for that map.</p>
+        <div class="axis-label y-axis-label">Total job XP gain</div>
+        <div class="axis-label x-axis-label">Total level XP gain</div>
       </div>
     </div>
   </div>
diff --git a/public/js/mv/chart.js b/public/js/mv/chart.js
index 288a1de..5cda3ba 100644
--- a/public/js/mv/chart.js
+++ b/public/js/mv/chart.js
@@ -27,8 +27,9 @@ var mv = function(mv) {
         .x(d3.scale.linear().domain([0, mv.heap.numAttackers.dim.top(1)[0].numAttackers + 0.5]))
         .elasticX(true)
         ;
-      mv.charts.map = monoGroup(margined(wide(dc.bubbleChart("#map-chart"))), "map")
-        .height(500)
+      mv.charts.map = height(monoGroup(margined(wide(dc.bubbleChart("#map-chart")))
+                                     , "map")
+                           , 500)
         .colorCalculator(d3.scale.category20c())
         /* X */
         .keyAccessor(function(d) { return d.value.e + 1; })
@@ -87,33 +88,45 @@ var mv = function(mv) {
   function wide(chart) {
     return chart
       .width(wideWidth)
-      ;
+    ;
   }
   function med(chart) {
     return chart
       .width(medWidth)
-      ;
+    ;
   }
   function thin(chart) {
     return chart
       .width(thinWidth)
-      ;
+    ;
   }
   function short(chart) {
+    return height(chart, 130);
+  }
+  function height(chart, size) {
+    chart.root()
+      .selectAll(".y-axis-label")
+      .style("top", (size / 2 + 25) + "px")
+    ;
+    chart.root()
+      .selectAll(".x-axis-label")
+      .style("top", (size - 15) + "px")
+    ;
     return chart
-      .height(130)
-      ;
+      .height(size)
+    ;
   }
   function margined(chart) {
     return chart
       .margins({left: 60, right: 18, top: 5, bottom: 30})
+    ;
   }
   function monoGroup(chart, name) {
     return chart
       .dimension(mv.heap[name].dim)
       .group(mv.heap[name].group)
       .transitionDuration(500)
-      ;
+    ;
   }
   function bar(chart) {
     return margined(short(chart))
@@ -122,14 +135,14 @@ var mv = function(mv) {
       .renderHorizontalGridLines(true)
       .title(function(d) { return d.key + ": " + d.value; })
       .brushOn(true)
-      ;
+    ;
   }
   function pie(chart) {
     return thin(chart)
       .radius(80)
       .height(165)
       .colorCalculator(d3.scale.category20c())
-      ;
+    ;
   }
   return mv;
 }(mv || {});