Add an x axis label for the orbits graph.

Goutte
1 parent ebf98c26
Showing 3 changed files with 173 additions and 23 deletions Show diff stats
web/static/js/swapp.js
web/static/js/swapp.ls
web/view/home.html.jinja2
 // Generated by LiveScript 1.5.0
 (function(){
-  var GOLDEN_RATIO, TimeSeries, Orbits, out$ = typeof exports != 'undefined' && exports || this;
+  var GOLDEN_RATIO, SpaceWeather, Source, TimeSeries, Orbits, out$ = typeof exports != 'undefined' && exports || this;
   GOLDEN_RATIO = 2 / (1 + Math.sqrt(5));
+  out$.SpaceWeather = SpaceWeather = (function(){
+    SpaceWeather.displayName = 'SpaceWeather';
+    var prototype = SpaceWeather.prototype, constructor = SpaceWeather;
+    function SpaceWeather(configuration){
+      console.info("Creating Space Weather app...", configuration);
+    }
+    return SpaceWeather;
+  }());
+  Source = (function(){
+    Source.displayName = 'Source';
+    var prototype = Source.prototype, constructor = Source;
+    function Source(slug){
+      this.slug = slug;
+      this.time_series = {};
+    }
+    Source.prototype.addTimeSeries = function(ts){
+      return this.time_series[ts.slug] = ts;
+    };
+    Source.prototype.show = function(){
+      var slug, ref$, ts, results$ = [];
+      for (slug in ref$ = this.time_series) {
+        ts = ref$[slug];
+        results$.push($(ts.svg).show());
+      }
+      return results$;
+    };
+    Source.prototype.hide = function(){
+      var slug, ref$, ts, results$ = [];
+      for (slug in ref$ = this.time_series) {
+        ts = ref$[slug];
+        results$.push($(ts.svg).hide());
+      }
+      return results$;
+    };
+    return Source;
+  }());
   out$.TimeSeries = TimeSeries = (function(){
     TimeSeries.displayName = 'TimeSeries';
     var prototype = TimeSeries.prototype, constructor = TimeSeries;
@@ -16,12 +52,12 @@
       this.onMouseOut = bind$(this, 'onMouseOut', prototype);
       this.onMouseOver = bind$(this, 'onMouseOver', prototype);
       this.onMouseMove = bind$(this, 'onMouseMove', prototype);
-      console.log("Create time series '" + this.title + "'");
+      console.info("Creating time series '" + this.title + "'...");
       this.init();
     }
     TimeSeries.prototype.init = function(){
       var dx, this$ = this;
-      console.log("Initialize time series '" + this.title + "'", this.data, this.options);
+      console.info("Initializing time series '" + this.title + "'...", this.data, this.options);
       this.margin = {
         top: 30,
         right: 20,
@@ -159,7 +195,7 @@
       this.margin = {
         top: 30,
         right: 20,
-        bottom: 30,
+        bottom: 40,
         left: 60
       };
       this.extremum = 1.11 * d3.max(this.data, function(d){
@@ -172,8 +208,13 @@
       this.svg = d3.select(this.container).append('svg');
       this.plotWrapper = this.svg.append('g');
       this.plotWrapper.attr('transform', 'translate(' + this.margin.left + ',' + this.margin.top + ')');
-      this.plotWrapper.append('g').classed('x axis', true);
-      this.plotWrapper.append('g').classed('y axis', true);
+      this.xAxisLine = this.plotWrapper.append('g').classed('x axis', true);
+      this.yAxisLine = this.plotWrapper.append('g').classed('y axis', true);
+      this.xAxisTitle = this.xAxisLine.append('text').attr('fill', '#000');
+      this.xAxisTitle.style("text-anchor", "middle");
+      this.xAxisTitle.append('tspan').text('X');
+      this.xAxisTitle.append('tspan').attr('dy', '3px').text('HEE').attr('font-size', '0.618em');
+      this.xAxisTitle.append('tspan').attr('dy', '-3px').text('   (AU)');
       this.sun = this.plotWrapper.append("svg:circle");
       this.sun.append('svg:title').text("Sol");
       this.sun.attr("r", 17).style("fill", "yellow");
@@ -222,6 +263,8 @@
       this.yAxis.scale(this.yScale);
       this.svg.select('.x.axis').attr('transform', 'translate(0,' + height + ')').call(this.xAxis);
       this.svg.select('.y.axis').call(this.yAxis);
+      this.xAxisTitle.attr("x", width / 2);
+      this.xAxisTitle.attr("y", 30);
       return this;
     };
     Orbits.prototype.resizeOrbiter = function(slug, config){
@@ -244,6 +287,34 @@
       el['orbiter'].attr('y', this.yScale(data[data.length - 1].y) - 16);
       return this;
     };
+    Orbits.prototype.repositionOrbiter = function(slug, datum){
+      var data, el;
+      data = this.data;
+      datum == null && (datum = data[data.length - 1]);
+      el = this.orbitersElements[slug];
+      el['orbiter'].attr('x', this.xScale(datum.x) - 16);
+      el['orbiter'].attr('y', this.yScale(datum.y) - 16);
+      return this;
+    };
+    Orbits.prototype.bisectDate = d3.bisector(function(d){
+      return d.t;
+    }).left;
+    Orbits.prototype.moveToDate = function(t){
+      var slug, ref$, el, data, i, d0, d1, d, results$ = [];
+      for (slug in ref$ = this.orbitersElements) {
+        el = ref$[slug];
+        data = this.data;
+        i = this.bisectDate(data, t, 1);
+        d0 = data[i - 1];
+        d1 = data[i];
+        if (!(d1 && d0)) {
+          continue;
+        }
+        d = t - d0.t > d1.t - t ? d1 : d0;
+        results$.push(this.repositionOrbiter(slug, d));
+      }
+      return results$;
+    };
     return Orbits;
   }());
   function bind$(obj, key, target){
@@ -3,6 +3,38 @@
  
 const GOLDEN_RATIO = 2 / (1 + Math.sqrt(5))
  
+###############################################################################
+
+export class SpaceWeather
+
+  (configuration) ->
+    console.info "Creating Space Weather app...", configuration
+
+  # fixme
+
+
+
+
+class Source
+  (@slug) ->
+    @time_series = {}
+
+  addTimeSeries: (ts) ->
+    @time_series[ts.slug] = ts
+
+  show: ->
+    for slug, ts of @time_series
+      $(ts.svg).show()
+  hide: ->
+    for slug, ts of @time_series
+      $(ts.svg).hide()
+
+
+
+
+###############################################################################
+###############################################################################
+
 export class TimeSeries
   # Time in x-axis
   # Data in y-axis
@@ -10,11 +42,11 @@ export class TimeSeries
   (@slug, @title, @data, @container, @options = {}) ->
     # title : string
     # data : list of {x: <datetime>, y: <float>}
-    console.log "Create time series '#{@title}'"
+    console.info "Creating time series '#{@title}'..."
     @init()
  
   init: ->
-    console.log "Initialize time series '#{@title}'", @data, @options
+    console.info "Initializing time series '#{@title}'...", @data, @options
  
     @margin = {
       top: 30,
@@ -195,8 +227,13 @@ export class TimeSeries
  
     this
  
+
+###############################################################################
+###############################################################################
+
 export class Orbits
-  # View of the solar system from above
+  # View of the solar system from above, with orbits segments for selected time
+  # interval, from real data.
  
   (@orbiters, @data, @container, @options = {}) ->
     console.log "Create orbits"
@@ -208,7 +245,7 @@ export class Orbits
     @margin = {
       top: 30,
       right: 20,
-      bottom: 30,
+      bottom: 40,
       left: 60
     }
  
@@ -227,8 +264,17 @@ export class Orbits
     @plotWrapper = @svg.append('g')
     @plotWrapper.attr('transform', 'translate(' + @margin.left + ',' + @margin.top + ')')
  
-    @plotWrapper.append('g').classed('x axis', true)
-    @plotWrapper.append('g').classed('y axis', true)
+    @xAxisLine = @plotWrapper.append('g').classed('x axis', true)
+    @yAxisLine = @plotWrapper.append('g').classed('y axis', true)
+
+    @xAxisTitle = @xAxisLine.append('text').attr('fill', '#000')
+    @xAxisTitle.style("text-anchor", "middle")
+    @xAxisTitle.append('tspan').text('X')
+    # No : https://bugzilla.mozilla.org/show_bug.cgi?id=308338
+    # @xAxisTitle.append('tspan').attr('baseline-shift', 'sub').text('HEE')
+    # Also, don't use em as dy units
+    @xAxisTitle.append('tspan').attr('dy', '3px').text('HEE').attr('font-size', '0.618em')
+    @xAxisTitle.append('tspan').attr('dy', '-3px').text('   (AU)')
  
     @sun = @plotWrapper.append("svg:circle")
     @sun.append('svg:title').text("Sol")
@@ -293,6 +339,9 @@ export class Orbits
     @svg.select('.y.axis')
         .call(@yAxis)
  
+    @xAxisTitle.attr("x", width / 2)
+    @xAxisTitle.attr("y", 30)
+
     this
  
   resizeOrbiter: (slug, config) ->
@@ -316,10 +365,32 @@ export class Orbits
         .attr('transform', 'rotate(66,'+(cx+c)+', '+cy+')')
     @yScale.range([height, 0])
  
-    data = @data
+    data = @data  # todo: multiple orbiters
  
     el['orbiter'].attr('x', @xScale(data[data.length - 1].x) - 16)
     el['orbiter'].attr('y', @yScale(data[data.length - 1].y) - 16)
  
     this
  
+  repositionOrbiter: (slug, datum) ->
+    data = @data  # todo
+    datum ?= data[data.length - 1]
+    el = @orbitersElements[slug]
+    el['orbiter'].attr('x', @xScale(datum.x) - 16)
+    el['orbiter'].attr('y', @yScale(datum.y) - 16)
+
+    this
+
+  bisectDate: d3.bisector((d) -> d.t).left
+
+  moveToDate: (t) ->
+    for slug, el of @orbitersElements
+      data = @data  # todo: multiple orbiters
+      i = @bisectDate(data, t, 1)
+      d0 = data[i - 1]
+      d1 = data[i]
+      continue unless d1 and d0
+      d = if t - d0.t > d1.t - t then d1 else d0
+      @repositionOrbiter(slug, d)  # fixme
+
+
@@ -8,7 +8,7 @@
  
  
   <div class="mdl-layout__drawer">
-    <span class="mdl-layout-title">Orbiters</span>
+    <span class="mdl-layout-title">Planets</span>
  
     <section id="orbiters_filters">
       <img title="Jupiter" src="{{ static('img/planet/jupiter_128.png') }}" width="64px" height="64px" alt="Jupiter">
@@ -45,7 +45,7 @@
       </div>
     </div>
  
-    <div class="loader"><div class="hole"></div></div>
+{#    <div class="loader"><div class="hole"></div></div>#}
   </main>
 </div>
  
@@ -131,13 +131,19 @@
 <script type="application/javascript" src="{{ static('js/swapp.js') }}"></script>
 <script type="application/javascript">
  
-// Sorry, no ES6. Feel free to refactor.
-
-var orbiters = {
-  jupiter: {
-    name: 'Jupiter',
-    orbit: { a: 5.45516759, b: 4.95155843 },
-    img: '{{ static('img/planet/jupiter_128.png') }}'
+var configuration = {
+  time_series_container: '#time_series',
+  orbits_container: '#orbits',
+  sources : {
+    jupiter: {
+      slug: 'jupiter',
+      name: 'Jupiter',
+      active: true,
+      minDate: '1990-01-01T01:30:00',
+      maxDate: '2017-02-19T00:00:00',
+      orbit: { a: 5.45516759, b: 4.95155843 },
+      img: '{{ static('img/planet/jupiter_128.png') }}'
+    }
   }
 };
  
@@ -145,6 +151,8 @@ jQuery().ready(function($){
   var timeSeries = [];
   var orbits;
  
+  var sw = new SpaceWeather(configuration);
+
   d3.csv('{{ url_for('get_csv') }}', function(csv){
     var timeFormat = d3.timeParse('%Y-%m-%dT%H:%M:%S%Z');
     var data = {'pdyn': [], 'magn': [], 'vlen': []};
@@ -188,7 +196,7 @@ jQuery().ready(function($){
       data.push({t: timeFormat(d['time']), x: parseFloat(d['x_hci']), y: parseFloat(d['y_hci'])});
     });
  
-    orbits = new Orbits(orbiters, data, '#orbits');
+    orbits = new Orbits(configuration.sources, data, '#orbits');
   });
  
   var toggleTimeSeries = function(slug) {