Add initial simple charting for GAINXP records

3 files changed, 137 insertions, 25 deletions

diff --git a/css/style.css b/css/style.css
index 4e1bdaa..70482a7 100644
--- a/css/style.css
+++ b/css/style.css
@@ -17,13 +17,17 @@ body {
   min-height: 40px;
 }
 
+#body {
+  min-width: 1350px;
+}
+
 #status {
   width: 100%;
   font-size: smaller;
 }
 
 #side {
-  width: 300px;
+  width: 650px;
   font-size: smaller;
 }
 
@@ -31,11 +35,18 @@ body {
 
 #loadinfo {
   width: 647px;
-  height: 400px;
-  border: 3px grey solid;
+/*   height: 400px; */
+  border: 1px grey solid;
   margin: auto;
 }
 
+/* Hide charts while loadinfo is shown */
+
+.chart-root {
+  display: none;
+  opacity: 0;
+}
+
 /* Loading bars */
 .progressbar {
   margin: 10px 0;
@@ -44,10 +55,6 @@ body {
   font-size: 14px;
   clear: both;
   opacity: 0;
-  /* TODO: Use d3 for transitions instead */
-  -moz-transition: opacity 1s linear;
-  -o-transition: opacity 1s linear;
-  -webkit-transition: opacity 1s linear;
 }
 
 .progressbar.loading {
@@ -60,3 +67,14 @@ body {
   width: 0;
   white-space: nowrap;
 }
+
+/* Utility */
+.fader {
+  -moz-transition: opacity 1s linear;
+  -o-transition: opacity 1s linear;
+  -webkit-transition: opacity 1s linear;
+}
+
+.help {
+  cursor: help;
+}
diff --git a/index.html b/index.html
index 646fcf9..f8d313e 100644
--- a/index.html
+++ b/index.html
@@ -2,29 +2,37 @@
 <meta charset="utf-8">
 <title>Manavis</title>
 <link rel="stylesheet" type="text/css" href="css/style.css" />
+<link rel="stylesheet" type="text/css" href="js/dc/test/dc.css" />
 
 <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();">reset</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();">reset</a></h3>
+    </div>
   </div>
   <div id="main">
-    <div id="status">
+<!--    <div id="status">
       Manavis
-      <!-- TODO: Load icons et al for when new records need loading? -->
-    </div>
+      TODO: Load icons et al for when new records need loading?
+    </div>-->
     <div id="mask"><noscript>Javascript is required for this website.</noscript>
-      <div id="loadinfo" class="hidden">
+      <div id="loadinfo" class="fader">
         <h3>Select records to load and display</h3>
         <input type="file" id="input" name="records[]" multiple />
         <output id="list"></output>
-        <div id="filesbar" class="progressbar">
+        <div id="filesbar" class="progressbar fader">
           <div class="percent">0%</div>
         </div>
-        <div id="loadbar" class="progressbar">
+        <div id="loadbar" class="progressbar fader">
           <div class="percent">0%</div>
         </div>
       </div>
     </div>
-    <div class="chart hidden">
+    <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="#">reset</a></h3>
     </div>
   </div>
 </div>
diff --git a/js/mv.js b/js/mv.js
index d8e8529..512b617 100644
--- a/js/mv.js
+++ b/js/mv.js
@@ -2,7 +2,7 @@
 /*
  * Globals accessible via the agent console for debugging purposes
  */
-
+var mv = {};
 /*
  * Processing
  */
@@ -49,10 +49,10 @@
           loadbar.hide();
         }, 2000);
         makeHeap();
-        filesbar.complete();
         setTimeout(function() {
           filesbar.hide();
         }, 2000);
+        makeCharts();
       } else {
         filesbar.update(cur, fevt.target.files.length);
         nextFile();
@@ -82,21 +82,107 @@
       if (d == null) {
         return;
       }
+      var ts = new Date(0);
+      ts.setUTCSeconds(d[1]);
       records.push({
-        time: d[1],
-        pc: d[2],
-        map: d[3],
-        x: d[4],
-        y: d[5],
-        e: d[6],
-        j: d[7],
+        date: ts,
+        pc:   parseInt(d[2]),
+        map:  parseInt(d[3]),
+        x:    parseInt(d[4]),
+        y:    parseInt(d[5]),
+        e:    parseInt(d[6]),
+        j:    parseInt(d[7]),
         type: d[8]
       });
     });
+    console.log(records.length);
   }
-
+  var cfdata, all, dateDim, dateGroup, pcDim, pcGroup, mapDim, mapGroup;
   /* The record files are set, do everything */
   function makeHeap() {
-    /* TODO */
+    function a(p, d) { return { e: p.e + d.e, j: p.j + d.j, r: p.r + 1 }; }
+    function s(p, d) { return { e: p.e - d.e, j: p.j - d.j, r: p.r - 1 }; }
+    function z(p, d) { return { e: 0, j: 0, r: 0 }; }
+    cfdata = crossfilter(records);
+    all = cfdata.groupAll().reduce(a, s, z);
+    dateDim = cfdata.dimension(function(d) { return d3.time.hour.round(d.date); });
+    dateGroup = dateDim.group().reduceCount();
+    pcDim = cfdata.dimension(function(d) { return d.pc; });
+    pcGroup = pcDim.group().reduceCount();
+    mapDim = cfdata.dimension(function(d) { return d.map; });
+    mapGroup = mapDim.group().reduce(a, s, z);
+    /*
+     * The viewport is the bubble frame.
+     * - K: Map
+     * - X: Exp
+     * - Y: JExp
+     * - r: Record count
+     */
+  }
+  function makeCharts() {
+    d3.select("#mask")
+      .transition()
+      .style("opacity", 0)
+      .remove();
+    d3.selectAll(".chart-root")
+      .style("display", "inline")
+      .transition()
+      .style("opacity", 1)
+      ;
+    mv.dateChart = dc.barChart("#date-chart")
+      .width(630)
+      .height(130)
+      .margins({left: 60, right: 18, top: 5, bottom: 30})
+      .dimension(dateDim)
+      .group(dateGroup)
+      .centerBar(true)
+      .gap(1)
+      .elasticY(true)
+      .elasticX(true)
+      .x(d3.time.scale().domain([dateDim.bottom(1)[0].date, dateDim.top(1)[0].date]).nice(d3.time.hour))
+      .xUnits(d3.time.hours)
+      .xAxisPadding(2)
+    //     .renderVerticalGridLines(true)
+      .renderHorizontalGridLines(true)
+      .title(function(d) { return d.key + ": " + d.value; })
+      .brushOn(true)
+      ;
+    console.log([pcDim.bottom(1)[0], pcDim.top(1)[0]])
+    mv.pcChart = dc.barChart("#player-chart")
+      .width(630)
+      .height(130)
+      .margins({left: 60, right: 18, top: 5, bottom: 30})
+      .dimension(pcDim)
+      .group(pcGroup)
+      .gap(1)
+//       .elasticX(true)
+      .elasticY(true)
+      .x(d3.scale.linear().domain([pcDim.bottom(1)[0].pc, pcDim.top(1)[0].pc]).nice())
+      .renderHorizontalGridLines(true)
+      .title(function(d) { return d.key + ": " + d.value; })
+      .brushOn(true)
+      ;
+    mv.mapChart = dc.bubbleChart("#map-chart")
+      .width(700)
+      .height(500)
+      .margins({left: 60, right: 18, top: 5, bottom: 30})
+      .dimension(mapDim)
+      .group(mapGroup)
+      /* X */
+      .keyAccessor(function(d) { return d.value.e + 1; })
+      /* Y */
+      .valueAccessor(function(d) { return d.value.j + 1; })
+      /* R */
+      .radiusValueAccessor(function(d) { return Math.log(d.value.r + 1); })
+      .x(d3.scale.log().domain([1, 100000]))
+      .y(d3.scale.log().domain([1, 300000]))
+      .elasticX(true)
+      .elasticY(true)
+      .renderHorizontalGridLines(true)
+      .renderVerticalGridLines(true)
+      .title(function(d) { return "Map " + d.key; })
+      .renderTitle(true)
+      ;
+    dc.renderAll();
   }
 })();