From ae0aa7d28cb17e91bc39216bf40b6392aac5b3f8 Mon Sep 17 00:00:00 2001 From: Goutte Date: Fri, 28 Apr 2017 11:59:29 +0200 Subject: [PATCH] Add an x axis label for the orbits graph. --- web/static/js/swapp.js | 83 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------ web/static/js/swapp.ls | 85 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------- web/view/home.html.jinja2 | 28 ++++++++++++++++++---------- 3 files changed, 173 insertions(+), 23 deletions(-) diff --git a/web/static/js/swapp.js b/web/static/js/swapp.js index bf997ff..b246a4e 100644 --- a/web/static/js/swapp.js +++ b/web/static/js/swapp.js @@ -1,7 +1,43 @@ // 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){ diff --git a/web/static/js/swapp.ls b/web/static/js/swapp.ls index 8d4c64c..5b3334d 100644 --- a/web/static/js/swapp.ls +++ b/web/static/js/swapp.ls @@ -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: , y: } - 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 + + diff --git a/web/view/home.html.jinja2 b/web/view/home.html.jinja2 index cd90f58..4abe682 100755 --- a/web/view/home.html.jinja2 +++ b/web/view/home.html.jinja2 @@ -8,7 +8,7 @@
- Orbiters + Planets
Jupiter @@ -45,7 +45,7 @@
-
+{#
#} @@ -131,13 +131,19 @@