Rewrite the orbits in Livescript.

Goutte
1 parent f1f1e797
Showing 3 changed files with 271 additions and 227 deletions Show diff stats
web/static/js/swapp.js
web/static/js/swapp.ls
web/view/home.html.jinja2
@@ -0,0 +1,178 @@
+// Generated by LiveScript 1.5.0
+(function(){
+  var GOLDEN_RATIO, TimeSeries, Orbits, out$ = typeof exports != 'undefined' && exports || this;
+  GOLDEN_RATIO = 2 / (1 + Math.sqrt(5));
+  out$.TimeSeries = TimeSeries = (function(){
+    TimeSeries.displayName = 'TimeSeries';
+    var prototype = TimeSeries.prototype, constructor = TimeSeries;
+    function TimeSeries(title, data, container, options){
+      this.title = title;
+      this.data = data;
+      this.container = container;
+      this.options = options != null
+        ? options
+        : {};
+      console.log("Create time series '" + this.title + "'");
+      this.init();
+    }
+    TimeSeries.prototype.init = function(){
+      var this$ = this;
+      console.log("Initialize time series '" + this.title + "'", this.data, this.options);
+      this.margin = {
+        top: 30,
+        right: 20,
+        bottom: 30,
+        left: 60
+      };
+      this.xScale = d3.scaleTime().domain(d3.extent(this.data, function(d){
+        return d.x;
+      }));
+      this.yScale = d3.scaleLinear().domain(d3.extent(this.data, function(d){
+        return d.y;
+      }));
+      this.xAxis = d3.axisBottom().ticks(7, ",f").tickFormat(d3.timeFormat("%Y-%m-%d"));
+      this.yAxis = d3.axisLeft().ticks(10);
+      this.line = d3.line().x(function(d){
+        return this$.xScale(d.x);
+      }).y(function(d){
+        return this$.yScale(d.y);
+      });
+      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.path = this.plotWrapper.append('path').datum(this.data).classed('line', true);
+      this.plotWrapper.append('g').classed('x axis', true);
+      this.plotWrapper.append('g').classed('y axis', true);
+      this.yAxisText = this.plotWrapper.append("text").attr("transform", "rotate(-90)").attr("dy", "1em").style("text-anchor", "middle").text(this.title);
+      return this.resize();
+    };
+    TimeSeries.prototype.resize = function(){
+      var width, height;
+      width = jQuery(this.container).width() - this.margin.left - this.margin.right;
+      height = GOLDEN_RATIO * GOLDEN_RATIO * GOLDEN_RATIO * width;
+      console.log("Resize time series " + this.title + " : " + width + " x " + height);
+      this.xScale.range([0, width]);
+      this.yScale.range([height, 0]);
+      this.svg.attr('width', width + this.margin.right + this.margin.left).attr('height', height + this.margin.top + this.margin.bottom);
+      this.path.attr('d', this.line);
+      this.xAxis.scale(this.xScale);
+      this.yAxis.scale(this.yScale);
+      if (width < 600) {
+        this.xAxis.ticks(3);
+      } else {
+        this.xAxis.ticks(7, ",f");
+      }
+      this.svg.select('.x.axis').attr('transform', 'translate(0,' + height + ')').call(this.xAxis);
+      this.svg.select('.y.axis').call(this.yAxis);
+      this.yAxisText.attr("y", 0 - this.margin.left).attr("x", 0 - height / 2);
+      return this;
+    };
+    return TimeSeries;
+  }());
+  out$.Orbits = Orbits = (function(){
+    Orbits.displayName = 'Orbits';
+    var prototype = Orbits.prototype, constructor = Orbits;
+    function Orbits(orbiters, data, container, options){
+      this.orbiters = orbiters;
+      this.data = data;
+      this.container = container;
+      this.options = options != null
+        ? options
+        : {};
+      console.log("Create orbits");
+      this.init();
+    }
+    Orbits.prototype.init = function(){
+      var slug, ref$, config;
+      console.log("Initialize orbits", this.data, this.options);
+      this.margin = {
+        top: 30,
+        right: 20,
+        bottom: 30,
+        left: 60
+      };
+      this.extremum = 1.11 * d3.max(this.data, function(d){
+        return Math.max(Math.abs(d.x), Math.abs(d.y));
+      });
+      this.xScale = d3.scaleLinear().domain([-1 * this.extremum, this.extremum]);
+      this.yScale = d3.scaleLinear().domain([-1 * this.extremum, this.extremum]);
+      this.xAxis = d3.axisBottom().ticks(10);
+      this.yAxis = d3.axisLeft().ticks(10);
+      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.sun = this.plotWrapper.append("svg:circle");
+      this.sun.append('svg:title').text("Sol");
+      this.sun.attr("r", 17).style("fill", "yellow");
+      for (slug in ref$ = this.orbiters) {
+        config = ref$[slug];
+        this.initOrbiter(slug, config);
+      }
+      return this.resize();
+    };
+    Orbits.prototype.orbitersElements = {};
+    Orbits.prototype.initOrbiter = function(slug, config){
+      var orbit_ellipse, orbiter, orbit_line, orbit_section, this$ = this;
+      if (slug in this.orbitersElements) {
+        throw new Error("Second init of " + slug);
+      }
+      orbit_ellipse = this.plotWrapper.append("svg:ellipse").classed('orbit orbit_ellipse', true);
+      orbiter = this.plotWrapper.append("svg:image").attr('xlink:href', config['img']).attr('width', '32px').attr('height', '32px');
+      orbit_line = d3.line().x(function(d){
+        return this$.xScale(d.x);
+      }).y(function(d){
+        return this$.yScale(d.y);
+      });
+      orbit_section = this.plotWrapper.append('path').datum(this.data).classed('orbit orbit_section', true);
+      this.orbitersElements[slug] = {
+        orbiter: orbiter,
+        orbit_ellipse: orbit_ellipse,
+        orbit_section: orbit_section,
+        orbit_line: orbit_line
+      };
+      return this;
+    };
+    Orbits.prototype.resize = function(){
+      var width, height, slug, ref$, config;
+      width = jQuery(this.container).width() - this.margin.left - this.margin.right;
+      height = 1.0 * width;
+      console.log("Resize orbits : " + width + " x " + height);
+      this.xScale.range([0, width]);
+      this.yScale.range([height, 0]);
+      this.svg.attr('width', width + this.margin.right + this.margin.left).attr('height', height + this.margin.top + this.margin.bottom);
+      this.sun.attr("cx", width / 2).attr("cy", height / 2);
+      for (slug in ref$ = this.orbiters) {
+        config = ref$[slug];
+        this.resizeOrbiter(slug, config);
+      }
+      this.xAxis.scale(this.xScale);
+      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);
+      return this;
+    };
+    Orbits.prototype.resizeOrbiter = function(slug, config){
+      var width, height, el, a, b, c, cx, cy, data;
+      width = jQuery(this.container).width() - this.margin.left - this.margin.right;
+      height = 1.0 * width;
+      console.log("Resize orbiter " + slug);
+      el = this.orbitersElements[slug];
+      el['orbit_section'].attr('d', el['orbit_line']);
+      a = config['orbit']['a'];
+      b = config['orbit']['b'];
+      c = Math.sqrt(a * a - b * b);
+      cx = width / 2 - c;
+      cy = height / 2;
+      this.yScale.range([0, height]);
+      el['orbit_ellipse'].attr('cx', cx).attr('cy', cy).attr('rx', this.xScale(a) - this.xScale(0)).attr('ry', this.yScale(b) - this.yScale(0)).attr('transform', 'rotate(66,' + (cx + c) + ', ' + cy + ')');
+      this.yScale.range([height, 0]);
+      data = this.data;
+      el['orbiter'].attr('x', this.xScale(data[data.length - 1].x) - 16);
+      el['orbiter'].attr('y', this.yScale(data[data.length - 1].y) - 16);
+      return this;
+    };
+    return Orbits;
+  }());
+}).call(this);
@@ -90,11 +90,7 @@ export class TimeSeries
 export class Orbits
   # View of the solar system from above
  
-  planetsElements: []
-
-  (@planets, @data, @container, @options = {}) ->
-    # title : string
-    # data : list of {x: <datetime>, y: <float>}
+  (@orbiters, @data, @container, @options = {}) ->
     console.log "Create orbits"
     @init()
  
@@ -118,8 +114,6 @@ export class Orbits
     @xAxis = d3.axisBottom().ticks(10)
     @yAxis = d3.axisLeft().ticks(10)
  
-    # line wip
-
     @svg = d3.select(@container).append('svg')
  
     @plotWrapper = @svg.append('g')
@@ -132,8 +126,38 @@ export class Orbits
     @sun.append('svg:title').text("Sol")
     @sun.attr("r", 17).style("fill", "yellow")
  
+    for slug, config of @orbiters
+      @initOrbiter(slug, config)
+
     @resize()
  
+  orbitersElements: {}
+  initOrbiter: (slug, config) ->
+    if slug of @orbitersElements then throw new Error("Second init of #{slug}")
+
+    # The order is important, as it will define the default z-order
+    orbit_ellipse = @plotWrapper.append("svg:ellipse")
+                                .classed('orbit orbit_ellipse', true)
+    orbiter = @plotWrapper.append("svg:image")
+                          .attr('xlink:href', config['img'])
+                          .attr('width', '32px').attr('height', '32px')
+
+    orbit_line = d3.line()
+                   .x((d) ~> @xScale(d.x))
+                   .y((d) ~> @yScale(d.y))
+
+    orbit_section = @plotWrapper.append('path')
+                                .datum(@data)  # fixme
+                                .classed('orbit orbit_section', true)
+
+    @orbitersElements[slug] =
+      orbiter: orbiter
+      orbit_ellipse: orbit_ellipse
+      orbit_section: orbit_section
+      orbit_line: orbit_line
+
+    this
+
   resize: ->
     width = jQuery(@container).width() - @margin.left - @margin.right
     height = 1.0 * width
@@ -148,6 +172,9 @@ export class Orbits
  
     @sun.attr("cx", width / 2).attr("cy", height / 2)
  
+    for slug, config of @orbiters
+      @resizeOrbiter(slug, config)
+
     @xAxis.scale(@xScale)
     @yAxis.scale(@yScale)
  
@@ -160,3 +187,31 @@ export class Orbits
  
     this
  
+  resizeOrbiter: (slug, config) ->
+    width = jQuery(@container).width() - @margin.left - @margin.right
+    height = 1.0 * width
+
+    console.log("Resize orbiter #{slug}")
+
+    el = @orbitersElements[slug]
+    el['orbit_section'].attr('d', el['orbit_line'])
+
+    a = config['orbit']['a']
+    b = config['orbit']['b']
+    c = Math.sqrt(a*a - b*b)
+    cx = (width / 2) - c
+    cy = (height / 2)
+    @yScale.range([0, height])
+    el['orbit_ellipse'].attr('cx', cx).attr('cy', cy)
+        .attr('rx', @xScale(a) - @xScale(0))
+        .attr('ry', @yScale(b) - @yScale(0))
+        .attr('transform', 'rotate(66,'+(cx+c)+', '+cy+')')
+    @yScale.range([height, 0])
+
+    data = @data
+
+    el['orbiter'].attr('x', @xScale(data[data.length - 1].x) - 16)
+    el['orbiter'].attr('y', @yScale(data[data.length - 1].y) - 16)
+
+    this
+
@@ -77,228 +77,23 @@
  
 {% block scripts_footer %}
 <script type="application/javascript" src="{{ static('js/d3.min.js') }}"></script>
+<script type="application/javascript" src="{{ static('js/swapp.js') }}"></script>
 <script type="application/javascript">
  
 // Sorry, no ES6. Feel free to refactor.
  
-var swApp = (function (window, d3, $) {
-
-  var $time_series = $("#time_series");
-  var $orbits = $("#orbits");
-
-  var orbiters = {
-    jupiter: {
-      name: "Jupiter",
-      orbit: { a: 5.45516759, b: 4.95155843 },
-      img: "{{ static('img/planet/jupiter_128.png') }}"
-    }
-  };
-
-  var plotTimeSeries = function(data, options) {
-    console.log("Init time series with data", data, options);
-
-    var xScale, yScale, xAxis, yAxis, yAxisText;
-    var line;
-    var svg, plotWrapper, path;
-    var width, height;
-    var margin = {
-      top: 30,
-      right: 20,
-      bottom: 30,
-      left: 60
-    };
-
-    // INIT SCALES
-    xScale = d3.scaleTime().domain(d3.extent(data, function (d) {
-      return d.x;
-    }));
-    yScale = d3.scaleLinear().domain(d3.extent(data, function (d) {
-      return d.y;
-    }));
-
-    // INIT AXISES
-    xAxis = d3.axisBottom()
-        .ticks(7, ",f")
-        .tickFormat(d3.timeFormat("%Y-%m-%d"));
-    yAxis = d3.axisLeft()
-        .ticks(10);
-
-
-    // INIT LINE
-    line = d3.line()
-        .x(function (d) { return xScale(d.x) })
-        .y(function (d) { return yScale(d.y) });
-
-    // INIT SVG
-    svg = d3.select('#time_series').append('svg');
-
-    plotWrapper = svg.append('g');
-
-    path = plotWrapper.append('path')
-        .datum(data)
-        .classed('line', true);
-
-    plotWrapper.append('g')
-        .classed('x axis', true);
-    plotWrapper.append('g')
-        .classed('y axis', true);
-    yAxisText = plotWrapper.append("text")
-        .attr("transform", "rotate(-90)")
-        .attr("dy", "1em")
-        .style("text-anchor", "middle")
-        .text(options['title']);
-
-    // -- wip refactor resize
-
-    width = $time_series.width() - margin.left - margin.right;
-    height = .618 * .618 * width;
-
-    xScale.range([0, width]);
-    yScale.range([height, 0]);
-
-    svg.attr('width', width + margin.right + margin.left)
-        .attr('height', height + margin.top + margin.bottom);
-
-    plotWrapper.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
-
-    path.attr('d', line);
-
-    xAxis.scale(xScale);
-    yAxis.scale(yScale);
-
-    if (width < 600) { xAxis.ticks(3); }
-
-    svg.select('.x.axis')
-        .attr('transform', 'translate(0,' + height + ')')
-        .call(xAxis);
-
-    svg.select('.y.axis')
-        .call(yAxis);
-
-    yAxisText.attr("y", 0 - margin.left).attr("x", 0 - (height / 2));
-  };
-
-  var plotOrbits = function(data, options) {
-    console.log("Init orbits with data", data, options);
-
-
-    var xScale, yScale, xAxis, yAxis, xAxisText, yAxisText;
-    var line;
-    var svg, plotWrapper, orbital_orbit_section, orbital_orbit_ellipse, sun;
-    var width, height;
-    var margin = {
-      top: 30,
-      right: 20,
-      bottom: 30,
-      left: 60
-    };
-
-    // INIT SCALES
-    var extremum = 1.11 * d3.max(data, function (d) {
-      return Math.max(Math.abs(d.x), Math.abs(d.y));
-    });
-
-    console.info("Extremum", extremum);
-
-    xScale = d3.scaleLinear().domain([-1 * extremum, extremum]);
-    yScale = d3.scaleLinear().domain([-1 * extremum, extremum]);
-
-    xAxis = d3.axisBottom().ticks(10);
-    yAxis = d3.axisLeft().ticks(10);
-
-    // INIT LINE
-    line = d3.line()
-        .x(function (d) { return xScale(d.x) })
-        .y(function (d) { return yScale(d.y) });
-
-    // INIT SVG
-    svg = d3.select('#orbits').append('svg');
-
-    plotWrapper = svg.append('g');
-
-    // Sun
-    sun = plotWrapper.append("svg:circle");
-    sun.append('svg:title').text("Sol");
-
-    // haxx wip
-    var orbital_config = orbiters['jupiter'];
-
-    orbital_orbit_ellipse = plotWrapper.append("svg:ellipse")
-        .classed('orbit orbit_ellipse', true);
-
-{#    var test_square = plotWrapper.append("svg:rect");#}
-
-    var orbital_element = plotWrapper.append("svg:image");
-    orbital_element.attr('xlink:href', orbital_config['img']);
-    orbital_element.attr('width', '32px').attr('height', '32px');
-
-    orbital_orbit_section = plotWrapper.append('path')
-        .datum(data)
-        .classed('orbit orbit_section', true);
-
-    plotWrapper.append('g').classed('x axis', true);
-    plotWrapper.append('g').classed('y axis', true);
-
-    // ---- wip: refactor resizing from here
-
-    width = $orbits.width() - margin.left - margin.right;
-    height = width * 1.0;
-
-    xScale.range([0, width]);
-    yScale.range([height, 0]);
-{#    yScale.range([0, height]);#}
-
-    svg.attr('width', width + margin.right + margin.left)
-        .attr('height', height + margin.top + margin.bottom);
-
-    plotWrapper.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
-
-    sun.attr("cx", width / 2).attr("cy", height / 2).attr("r", 17).style("fill", "yellow");
-
-    orbital_orbit_section.attr('d', line);
-
-    var a = orbital_config['orbit']['a'];
-    var b = orbital_config['orbit']['b'];
-    var c = Math.sqrt(a*a-b*b);
-    var cx = (width / 2) - c;
-    var cy = (height / 2);
-    yScale.range([0, height]);
-    orbital_orbit_ellipse.attr('cx', cx).attr('cy', cy)
-        .attr('rx', xScale(a) - xScale(0))
-        .attr('ry', yScale(b) - yScale(0))
-        .attr('transform', 'rotate(66,'+(cx+c)+', '+cy+')');
-    yScale.range([height, 0]);
-
-{#    test_square.attr('x', cx).attr('y', cy);#}
-{#    test_square.attr('width', 20).attr('height', 20);#}
-{#    test_square.attr('style', 'fill:red;');#}
-{#    test_square.attr('transform', 'rotate(45,'+0+', '+0+')');#}
-
-    orbital_element.attr('x', xScale(data[data.length - 1].x) - 16);
-    orbital_element.attr('y', yScale(data[data.length - 1].y) - 16);
-
-    xAxis.scale(xScale);
-    yAxis.scale(yScale);
-
-    //if (width < 600) { xAxis.ticks(3); }
-
-    svg.select('.x.axis')
-        .attr('transform', 'translate(0,' + height + ')')
-        .call(xAxis);
-
-    svg.select('.y.axis')
-        .call(yAxis);
-
-  };
-
-  return {
-    plotTimeSeries: plotTimeSeries,
-    plotOrbits: plotOrbits
-  };
-})(window, d3, jQuery);
-
+var orbiters = {
+  jupiter: {
+    name: "Jupiter",
+    orbit: { a: 5.45516759, b: 4.95155843 },
+    img: "{{ static('img/planet/jupiter_128.png') }}"
+  }
+};
  
 jQuery().ready(function($){
+  var timeSeries = [];
+  var orbits;
+
   d3.csv("{{ url_for('get_csv') }}", function(csv){
     var timeFormat = d3.timeParse('%Y-%m-%dT%H:%M:%S%Z');
     var data = {'pdyn': [], 'magn': [], 'vlen': []};
@@ -307,16 +102,32 @@ jQuery().ready(function($){
       data['magn'].push({x: timeFormat(d['time']), y: parseFloat(d['magn'])});
       data['vlen'].push({x: timeFormat(d['time']), y: parseFloat(d['vlen'])});
     });
-    swApp.plotTimeSeries(data['pdyn'], {title: 'Dynamic Pressure (nPa)'});
-    swApp.plotTimeSeries(data['magn'], {title: 'Magnetism (nT)'});
-    swApp.plotTimeSeries(data['vlen'], {title: 'Velocity (km/s)'});
+
+    var container = "#time_series";
+    timeSeries.push(new TimeSeries(
+        'Dynamic Pressure (nPa)', data['pdyn'], container
+    ));
+    timeSeries.push(new TimeSeries(
+        'Magnetism (nT)', data['magn'], container
+    ));
+    timeSeries.push(new TimeSeries(
+        'Velocity (km/s)', data['vlen'], container
+    ));
+
   });
+
   d3.csv("{{ url_for('get_astral_coordinates_csv') }}", function(csv){
     var data = [];
     csv.forEach(function (d) {
       data.push({x: parseFloat(d['x_hci']), y: parseFloat(d['y_hci'])});
     });
-    swApp.plotOrbits(data, {});
+
+    orbits = new Orbits(orbiters, data, '#orbits');
+  });
+
+  window.addEventListener('resize', function() {
+    timeSeries.forEach(function(ts){ ts.resize(); });
+    orbits.resize();
   });
  
 });