Blame view

web/static/js/swapp.ls 17 KB
f1f1e797   Goutte   Rewrite ugly java...
1
# Livescript transpiles to javascript, and is easier on the eyes and brain.
4cf497e0   Goutte   Make the targets ...
2
# Get the `lsc` binary from here : http://livescript.net
f1f1e797   Goutte   Rewrite ugly java...
3

4cf497e0   Goutte   Make the targets ...
4
# To transpile this file to javascript, and generate `swapp.js` :
a21f81d9   Goutte   Enable Venus and ...
5
# $ lsc --compile swapp.ls
4cf497e0   Goutte   Make the targets ...
6
7
# You can have it watch for changes and transpile automatically :
# $ lsc --watch --compile swapp.ls
a21f81d9   Goutte   Enable Venus and ...
8

4cf497e0   Goutte   Make the targets ...
9
10
11
12
13
14
# All the "javascript" code is in this file, except for inline scripts in
# templates, such as `home.html.jinja2`.

###############################################################################

const GOLDEN_RATIO = 2 / (1 + Math.sqrt(5))  # Between 0 and 1 (0.618...)
f1f1e797   Goutte   Rewrite ugly java...
15

ae0aa7d2   Goutte   Add an x axis lab...
16
17
18
###############################################################################

export class SpaceWeather
4cf497e0   Goutte   Make the targets ...
19
20
21
  """
  The main app, instanciated from an inline script.
  """
ae0aa7d2   Goutte   Add an x axis lab...
22

f75faf5f   Goutte   WIP
23
  (@configuration) ->
fe3132dd   Goutte   Refactor even more.
24
    console.info "Creating Space Weather app...", @configuration
f75faf5f   Goutte   WIP
25
    @sources = {}
fe3132dd   Goutte   Refactor even more.
26
27
28
29
    configs = [@configuration.sources[k] for k of @configuration.sources]
    configs.forEach((source_config) ~>
      @sources[source_config.slug] = new Source(source_config.slug, source_config.name, source_config)
    )
b7fe650c   Goutte   Misc bundle of ol...
30
31
32
33
    @parameters = {}
    @configuration['parameters'].forEach((p) ~>
        @parameters[p['id']] = p
    )
ae0aa7d2   Goutte   Add an x axis lab...
34

f75faf5f   Goutte   WIP
35
36
37
38
  buildDataUrlForSource: (source_slug) ->
    url = @configuration['api']['data_for_interval']
    url = url.replace('<source>', source_slug)
    url
ae0aa7d2   Goutte   Add an x axis lab...
39

f75faf5f   Goutte   WIP
40
41
42
43
44
45
  addSource: (source) ->
    @sources[source.slug] = source
    this

  showAllSources: ->
    for slug, source of @sources
4cf497e0   Goutte   Make the targets ...
46
      showSource(slug)
f75faf5f   Goutte   WIP
47
48
    this

4cf497e0   Goutte   Make the targets ...
49
50
51
  showSource: (source_slug) ->
    timeSeries.forEach((ts) ~> $(ts.svg.node()).show() if ts.source.slug == source_slug && @parameters[ts.parameter].active)
    @sources[source_slug].active = true
f75faf5f   Goutte   WIP
52
53
    this

4cf497e0   Goutte   Make the targets ...
54
55
56
  hideSource: (source_slug) ->
    timeSeries.forEach((ts) -> $(ts.svg.node()).hide() if ts.source.slug == source_slug)
    @sources[source_slug].active = false
f75faf5f   Goutte   WIP
57
58
    this

fe3132dd   Goutte   Refactor even more.
59
  resize: ->
a21f81d9   Goutte   Enable Venus and ...
60
    @orbits?.resize();
d49a163c   Goutte   Fix the resize an...
61
    timeSeries.forEach((ts) -> ts.resize())
fe3132dd   Goutte   Refactor even more.
62
63
64

  init: ->
    active_sources = [ @sources[k] for k of @sources when @sources[k].config.active ]
a21f81d9   Goutte   Enable Venus and ...
65
    @orbits = new Orbits(@configuration.orbits_container, @configuration)
fe3132dd   Goutte   Refactor even more.
66
67
68
    active_sources.forEach((source) ~>
      @loadData(source.slug, '2016-01-01T00:00:00', '2023-01-01T00:00:00').then(
        (data) ~>
a21f81d9   Goutte   Enable Venus and ...
69
          console.info "Loaded CSV data for #{source.slug}."
fe3132dd   Goutte   Refactor even more.
70
          @createTimeSeries(source, data)
a21f81d9   Goutte   Enable Venus and ...
71
          @orbits.initOrbiter(source.slug, source.config, data['hci'])
fe3132dd   Goutte   Refactor even more.
72
        ,
b7fe650c   Goutte   Misc bundle of ol...
73
        (data) -> console.error('Failed to load SW data.', data)
fe3132dd   Goutte   Refactor even more.
74
75
      )
    )
a975b380   Goutte   Clean up.
76
    window.addEventListener 'resize', ~> @resize()
fe3132dd   Goutte   Refactor even more.
77

f75faf5f   Goutte   WIP
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
  loadData: (source_slug, started_at, stopped_at) ->
    sw = this
    promise = new Promise((resolve, reject) ->
      url = sw.buildDataUrlForSource(source_slug)
      d3.csv(url+"?started_at=#{started_at}&stopped_at=#{stopped_at}", (csv) ->
        timeFormat = d3.timeParse('%Y-%m-%dT%H:%M:%S%Z')
        data = {'hci': []};
        configuration['parameters'].forEach((parameter) ->
            data[parameter['id']] = []
        )
        csv.forEach((d) ->
          dtime = timeFormat(d['time'])
          configuration['parameters'].forEach((parameter) ->
            id = parameter['id']
            data[id].push({x: dtime, y: parseFloat(d[id])})
          )
          if (d['xhci'] && d['yhci'])
            data['hci'].push({t: dtime, x: parseFloat(d['xhci']), y: parseFloat(d['yhci'])});
        )
        resolve(data)
      )
    )
    promise
ae0aa7d2   Goutte   Add an x axis lab...
101

7d6dee0f   Goutte   Continue refacto ...
102
  timeSeries = []
fe3132dd   Goutte   Refactor even more.
103
  createTimeSeries: (source, data) ->
b7fe650c   Goutte   Misc bundle of ol...
104
    @configuration['parameters'].forEach((parameter) ~>
4816cef4   Goutte   Refactor some more.
105
106
107
      container = @configuration['time_series_container']
      id = parameter['id'] ; title = parameter['title']
      if id not of data then console.error("No data for id '#{id}'.", data)
b7fe650c   Goutte   Misc bundle of ol...
108
      timeSeries.push(new TimeSeries(id, title, source, data[id], @parameters[id].active, container))
4816cef4   Goutte   Refactor some more.
109
    )
fe3132dd   Goutte   Refactor even more.
110
    timeSeries.forEach((ts) ~>
4816cef4   Goutte   Refactor some more.
111
112
113
114
      ts.options['onMouseOver'] = ->
        timeSeries.forEach((ts2) -> ts2.showCursor())
      ts.options['onMouseOut'] = ->
        timeSeries.forEach((ts2) -> ts2.hideCursor())
fe3132dd   Goutte   Refactor even more.
115
      ts.options['onMouseMove'] = (t) ~>
4816cef4   Goutte   Refactor some more.
116
        timeSeries.forEach((ts2) -> ts2.moveCursor(t))
fe3132dd   Goutte   Refactor even more.
117
        @orbits?.moveToDate(t)
4816cef4   Goutte   Refactor some more.
118
119
    )

b7fe650c   Goutte   Misc bundle of ol...
120
121
  enableParameter: (parameter_slug) ->
    if parameter_slug not of @parameters then console.error("Unknown parameter #{parameter_slug}.")
b7fe650c   Goutte   Misc bundle of ol...
122
    @parameters[parameter_slug].active = true
4cf497e0   Goutte   Make the targets ...
123
    timeSeries.forEach((ts) ~> $(ts.svg.node()).show() if ts.parameter == parameter_slug && @sources[ts.source.slug].active)
b7fe650c   Goutte   Misc bundle of ol...
124
    this
4816cef4   Goutte   Refactor some more.
125

b7fe650c   Goutte   Misc bundle of ol...
126
127
  disableParameter: (parameter_slug) ->
    if parameter_slug not of @parameters then console.error("Unknown parameter #{parameter_slug}.")
b7fe650c   Goutte   Misc bundle of ol...
128
    @parameters[parameter_slug].active = false
4cf497e0   Goutte   Make the targets ...
129
    timeSeries.forEach((ts) -> $(ts.svg.node()).hide() if ts.parameter == parameter_slug)
b7fe650c   Goutte   Misc bundle of ol...
130
    this
ae0aa7d2   Goutte   Add an x axis lab...
131
132
133


class Source
fe3132dd   Goutte   Refactor even more.
134
  (@slug, @name, @config) ->
4cf497e0   Goutte   Make the targets ...
135
    @active = true
ae0aa7d2   Goutte   Add an x axis lab...
136
137
138
139
140
141
142




###############################################################################
###############################################################################

f1f1e797   Goutte   Rewrite ugly java...
143
144
145
146
export class TimeSeries
  # Time in x-axis
  # Data in y-axis

4cf497e0   Goutte   Make the targets ...
147
148
  (@parameter, @title, @source, @data, @active, @container, @options = {}) ->
    # parameter : slug of the parameter to observe, like magn or pdyn
f1f1e797   Goutte   Rewrite ugly java...
149
    # title : string
4cf497e0   Goutte   Make the targets ...
150
    # source : slug of the TARGET, like jupiter or tchouri
f1f1e797   Goutte   Rewrite ugly java...
151
    # data : list of {x: <datetime>, y: <float>}
b7fe650c   Goutte   Misc bundle of ol...
152
153
    if @active then console.info "Creating time series '#{@title}'..."
               else console.info "Creating inactive time series '#{@title}'..."
f1f1e797   Goutte   Rewrite ugly java...
154
155
156
    @init()

  init: ->
ae0aa7d2   Goutte   Add an x axis lab...
157
    console.info "Initializing time series '#{@title}'...", @data, @options
f1f1e797   Goutte   Rewrite ugly java...
158
159
160
161
162

    @margin = {
      top: 30,
      right: 20,
      bottom: 30,
fe3132dd   Goutte   Refactor even more.
163
      left: 80
f1f1e797   Goutte   Rewrite ugly java...
164
165
166
167
168
    }

    @xScale = d3.scaleTime().domain(d3.extent(@data, (d) -> d.x))
    @yScale = d3.scaleLinear().domain(d3.extent(@data, (d) -> d.y))

541e2936   Goutte   Synchronize the t...
169
    #console.info("Y domain #{@title}", d3.extent(@data, (d) -> d.y))
2463bd16   Goutte   Add a circle foll...
170

f1f1e797   Goutte   Rewrite ugly java...
171
    @xAxis = d3.axisBottom()
f1f1e797   Goutte   Rewrite ugly java...
172
               .tickFormat(d3.timeFormat("%Y-%m-%d"))
d49a163c   Goutte   Fix the resize an...
173
174
               .ticks(7)
#               .ticks(7, ",f")
f1f1e797   Goutte   Rewrite ugly java...
175
176
177
178
179
180
181
182
    @yAxis = d3.axisLeft()
               .ticks(10)

    @line = d3.line()
              .x((d) ~> @xScale(d.x))
              .y((d) ~> @yScale(d.y))

    @svg = d3.select(@container).append('svg')
4cf497e0   Goutte   Make the targets ...
183
    @svg.attr("class", "#{@parameter} #{@source.slug}")
2463bd16   Goutte   Add a circle foll...
184

f1f1e797   Goutte   Rewrite ugly java...
185
186
187
    @plotWrapper = @svg.append('g')
    @plotWrapper.attr('transform', 'translate(' + @margin.left + ',' + @margin.top + ')')

f1f1e797   Goutte   Rewrite ugly java...
188
189
190
191
    @path = @plotWrapper.append('path')
                        .datum(@data)
                        .classed('line', true)

2463bd16   Goutte   Add a circle foll...
192
193
194
195
    @mouseCanvas = @plotWrapper.append("rect")
                               .style("fill", "none")
                               .style("pointer-events", "all")
    @mouseCanvas
541e2936   Goutte   Synchronize the t...
196
197
198
        .on("mouseover", @onMouseOver)
        .on("mouseout",  @onMouseOut)
        .on("mousemove", @onMouseMove)
2463bd16   Goutte   Add a circle foll...
199

f1f1e797   Goutte   Rewrite ugly java...
200
201
202
203
204
205
206
    @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(@title)
fe3132dd   Goutte   Refactor even more.
207
208
209
210
211
212
    @yAxisTextSource = @plotWrapper.append("text")
        .attr("transform", "rotate(-90)")
        .attr("dy", "1em")
        .style("text-anchor", "middle")
        .style("font-style", "oblique")
        .text(@source.name)
f1f1e797   Goutte   Rewrite ugly java...
213

81c9b2e8   Goutte   Add the values to...
214
215
216
217
218
219
    @focus = @plotWrapper.append('g').style("display", "none")

    @cursorCircle = @focus.append("circle")
                         .attr("class", "cursor-circle")
                         .attr("r", 3)

541e2936   Goutte   Synchronize the t...
220
    dx = 8
81c9b2e8   Goutte   Add the values to...
221
    @cursorValueShadow = @focus.append("text")
541e2936   Goutte   Synchronize the t...
222
223
                              .attr("class", "cursor-text cursor-text-shadow")
                              .attr("dx", dx)
81c9b2e8   Goutte   Add the values to...
224
                              .attr("dy", "-.3em")
541e2936   Goutte   Synchronize the t...
225

81c9b2e8   Goutte   Add the values to...
226
227
    @cursorValue = @focus.append("text")
                        .attr("class", "cursor-text cursor-value")
541e2936   Goutte   Synchronize the t...
228
                        .attr("dx", dx)
81c9b2e8   Goutte   Add the values to...
229
230
                        .attr("dy", "-.3em")

541e2936   Goutte   Synchronize the t...
231

81c9b2e8   Goutte   Add the values to...
232
    @cursorDateShadow = @focus.append("text")
541e2936   Goutte   Synchronize the t...
233
234
                              .attr("class", "cursor-text cursor-text-shadow")
                              .attr("dx", dx)
81c9b2e8   Goutte   Add the values to...
235
                              .attr("dy", "1em")
541e2936   Goutte   Synchronize the t...
236

81c9b2e8   Goutte   Add the values to...
237
238
    @cursorDate = @focus.append("text")
                        .attr("class", "cursor-text cursor-date")
541e2936   Goutte   Synchronize the t...
239
                        .attr("dx", dx)
81c9b2e8   Goutte   Add the values to...
240
241
                        .attr("dy", "1em")

f1f1e797   Goutte   Rewrite ugly java...
242
243
244
245
    @resize()

  resize: ->
    width = jQuery(@container).width() - @margin.left - @margin.right
541e2936   Goutte   Synchronize the t...
246
247
248
249
    height = GOLDEN_RATIO * GOLDEN_RATIO * GOLDEN_RATIO * GOLDEN_RATIO * width

    @plotWidth = width
    @plotHeight = height
f1f1e797   Goutte   Rewrite ugly java...
250

b7fe650c   Goutte   Misc bundle of ol...
251
    console.log("Resizing time series #{@title} : #{width} x #{height}")
f1f1e797   Goutte   Rewrite ugly java...
252
253
254
255
256
257
258
259
260
261
262
263

    @xScale.range([0, width]);
    @yScale.range([height, 0]);

    @svg.attr('width',  width + @margin.right + @margin.left)
        .attr('height', height + @margin.top + @margin.bottom)

    @path.attr('d', @line) # wip, do we need to put this in resize ?

    @xAxis.scale(@xScale)
    @yAxis.scale(@yScale)

2463bd16   Goutte   Add a circle foll...
264
    #if width < 600 then @xAxis.ticks(3) else @xAxis.ticks(7, ",f")
d49a163c   Goutte   Fix the resize an...
265
266
    @xAxis.ticks(Math.floor(width / 90.0))  # not working as expected
    @yAxis.ticks(Math.floor(height / 18.0))
f1f1e797   Goutte   Rewrite ugly java...
267
268
269
270
271
272
273
274

    @svg.select('.x.axis')
        .attr('transform', 'translate(0,' + height + ')')
        .call(@xAxis)

    @svg.select('.y.axis')
        .call(@yAxis)

fe3132dd   Goutte   Refactor even more.
275
    @yAxisText.attr("y", 20 - @margin.left)
f1f1e797   Goutte   Rewrite ugly java...
276
277
              .attr("x", 0 - (height / 2))

fe3132dd   Goutte   Refactor even more.
278
279
280
    @yAxisTextSource.attr("y", 0 - @margin.left)
                    .attr("x", 0 - (height / 2))

2463bd16   Goutte   Add a circle foll...
281
282
283
    @mouseCanvas.attr("width", width)
                .attr("height", height)

b7fe650c   Goutte   Misc bundle of ol...
284
285

    unless @active then $(@svg.node()).hide()
f1f1e797   Goutte   Rewrite ugly java...
286
287
    this

541e2936   Goutte   Synchronize the t...
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
  onMouseMove: ~>
    x = @xScale.invert(d3.mouse(@mouseCanvas.node())[0])
    if @options.onMouseMove?
      @options.onMouseMove(x)
    else
      @moveCursor(x)

  onMouseOver: ~>
    if @options.onMouseOver?
      @options.onMouseOver()
    else
      @showCursor()

  onMouseOut: ~>
    if @options.onMouseOut?
      @options.onMouseOut()
    else
      @hideCursor()

  showCursor: ->
    @focus.style("display", null)

  hideCursor: ->
    @focus.style("display", "none")

  bisectDate: d3.bisector((d) -> d.x).left # /!\ complex
81c9b2e8   Goutte   Add the values to...
314
  timeFormat: d3.timeFormat("%Y-%m-%d %Hh")
2463bd16   Goutte   Add a circle foll...
315

541e2936   Goutte   Synchronize the t...
316
  moveCursor: (x0) ->
2463bd16   Goutte   Add a circle foll...
317
318
319
    i = @bisectDate(@data, x0, 1)
    d0 = @data[i - 1]
    d1 = @data[i]
541e2936   Goutte   Synchronize the t...
320
    return unless d1 and d0
2463bd16   Goutte   Add a circle foll...
321
322
323
324
    d = if x0 - d0.x > d1.x - x0 then d1 else d0
    xx = @xScale(d.x)
    yy = @yScale(d.y)

81c9b2e8   Goutte   Add the values to...
325
326
    transform = "translate(#{xx}, #{yy})"

541e2936   Goutte   Synchronize the t...
327
328
329
330
331
332
    mirrored = if @plotWidth? and xx > @plotWidth / 2 then true else false
#    console.log("xx", xx)

    dx = 8
    dx = -1 * dx if mirrored

81c9b2e8   Goutte   Add the values to...
333
334
    @cursorCircle.attr("transform", transform)
    @cursorValue.attr("transform", transform).text(d.y)
541e2936   Goutte   Synchronize the t...
335
336
                .attr('text-anchor', if mirrored then 'end' else 'start')
                .attr("dx", dx)
81c9b2e8   Goutte   Add the values to...
337
    @cursorValueShadow.attr("transform", transform).text(d.y)
541e2936   Goutte   Synchronize the t...
338
339
                      .attr('text-anchor', if mirrored then 'end' else 'start')
                      .attr("dx", dx)
81c9b2e8   Goutte   Add the values to...
340
    @cursorDate.attr("transform", transform).text(@timeFormat(d.x))
541e2936   Goutte   Synchronize the t...
341
342
               .attr('text-anchor', if mirrored then 'end' else 'start')
               .attr("dx", dx)
81c9b2e8   Goutte   Add the values to...
343
    @cursorDateShadow.attr("transform", transform).text(@timeFormat(d.x))
541e2936   Goutte   Synchronize the t...
344
345
                     .attr('text-anchor', if mirrored then 'end' else 'start')
                     .attr("dx", dx)
2463bd16   Goutte   Add a circle foll...
346
347

    this
f1f1e797   Goutte   Rewrite ugly java...
348

ae0aa7d2   Goutte   Add an x axis lab...
349
350
351
352

###############################################################################
###############################################################################

f1f1e797   Goutte   Rewrite ugly java...
353
export class Orbits
ae0aa7d2   Goutte   Add an x axis lab...
354
355
  # View of the solar system from above, with orbits segments for selected time
  # interval, from real data.
f1f1e797   Goutte   Rewrite ugly java...
356

a21f81d9   Goutte   Enable Venus and ...
357
  (@container, @options = {}) ->
f1f1e797   Goutte   Rewrite ugly java...
358
359
360
    @init()

  init: ->
a21f81d9   Goutte   Enable Venus and ...
361
    console.log "Initializing orbits...", @options
f1f1e797   Goutte   Rewrite ugly java...
362
363
364
365

    @margin = {
      top: 30,
      right: 20,
11662eed   Goutte   Add Y axis label ...
366
      bottom: 42,
f1f1e797   Goutte   Rewrite ugly java...
367
368
      left: 60
    }
f1f1e797   Goutte   Rewrite ugly java...
369

a21f81d9   Goutte   Enable Venus and ...
370
371
372
    @data = {}  # slug => HCI array
    @orbiters = {}  # slug => config
    @extremum = 1
f1f1e797   Goutte   Rewrite ugly java...
373
374
375
376
377
378
    @xScale = d3.scaleLinear().domain([-1 * @extremum, @extremum])
    @yScale = d3.scaleLinear().domain([-1 * @extremum, @extremum])

    @xAxis = d3.axisBottom().ticks(10)
    @yAxis = d3.axisLeft().ticks(10)

f1f1e797   Goutte   Rewrite ugly java...
379
380
381
382
383
    @svg = d3.select(@container).append('svg')

    @plotWrapper = @svg.append('g')
    @plotWrapper.attr('transform', 'translate(' + @margin.left + ',' + @margin.top + ')')

ae0aa7d2   Goutte   Add an x axis lab...
384
385
386
387
388
389
390
391
392
    @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
11662eed   Goutte   Add Y axis label ...
393
    @xAxisTitle.append('tspan').attr('dy', '3px').text('HEE').attr('font-size', '8px')
ae0aa7d2   Goutte   Add an x axis lab...
394
    @xAxisTitle.append('tspan').attr('dy', '-3px').text('   (AU)')
f1f1e797   Goutte   Rewrite ugly java...
395

11662eed   Goutte   Add Y axis label ...
396
397
398
399
400
401
402
    @yAxisTitle = @yAxisLine.append('text').attr('fill', '#000')
    @yAxisTitle.style("text-anchor", "middle")
    @yAxisTitle.append('tspan').text('Y')
    @yAxisTitle.append('tspan').attr('dy', '3px').text('HEE').attr('font-size', '8px')
    @yAxisTitle.append('tspan').attr('dy', '-3px').text('   (AU)')
    @yAxisTitle.attr('transform', 'rotate(-90)')

8bd715ad   Goutte   Use a pixel art i...
403
404
405
    @sun = @plotWrapper.append("svg:image")
                       .attr('xlink:href', @options.sun.img)
                       .attr('width', '32px').attr('height', '32px')
f1f1e797   Goutte   Rewrite ugly java...
406
    @sun.append('svg:title').text("Sol")
f1f1e797   Goutte   Rewrite ugly java...
407

a21f81d9   Goutte   Enable Venus and ...
408
409
#    for slug, config of @orbiters
#      @initOrbiter(slug, config)
438929a4   Goutte   Rewrite the orbit...
410

f1f1e797   Goutte   Rewrite ugly java...
411
412
    @resize()

438929a4   Goutte   Rewrite the orbit...
413
  orbitersElements: {}
a21f81d9   Goutte   Enable Venus and ...
414
415
  initOrbiter: (slug, config, data) ->
    console.log("Initializing target #{slug}'s orbit...", config, data)
438929a4   Goutte   Rewrite the orbit...
416
417
    if slug of @orbitersElements then throw new Error("Second init of #{slug}")

a21f81d9   Goutte   Enable Venus and ...
418
419
420
421
422
423
    @extremum = Math.max(@extremum, 1.11 * d3.max(data, (d) ->
      Math.max(Math.abs(d.x), Math.abs(d.y))
    ))
    @xScale = d3.scaleLinear().domain([-1 * @extremum, @extremum])
    @yScale = d3.scaleLinear().domain([-1 * @extremum, @extremum])

438929a4   Goutte   Rewrite the orbit...
424
425
426
427
428
429
430
431
432
433
434
435
    # 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')
a21f81d9   Goutte   Enable Venus and ...
436
                                .datum(data)
438929a4   Goutte   Rewrite the orbit...
437
438
                                .classed('orbit orbit_section', true)

a21f81d9   Goutte   Enable Venus and ...
439
440
    @orbiters[slug] = config
    @data[slug] = data
438929a4   Goutte   Rewrite the orbit...
441
442
443
444
445
446
    @orbitersElements[slug] =
      orbiter: orbiter
      orbit_ellipse: orbit_ellipse
      orbit_section: orbit_section
      orbit_line: orbit_line

a21f81d9   Goutte   Enable Venus and ...
447
448
    @resize()

438929a4   Goutte   Rewrite the orbit...
449
450
    this

f1f1e797   Goutte   Rewrite ugly java...
451
452
453
454
455
456
457
458
459
460
461
462
  resize: ->
    width = jQuery(@container).width() - @margin.left - @margin.right
    height = 1.0 * width

    console.log("Resize orbits : #{width} x #{height}")

    @xScale.range([0, width]);
    @yScale.range([height, 0]);

    @svg.attr('width',  width + @margin.right + @margin.left)
        .attr('height', height + @margin.top + @margin.bottom)

8bd715ad   Goutte   Use a pixel art i...
463
    @sun.attr("x", width / 2 - 16).attr("y", height / 2 - 16)
f1f1e797   Goutte   Rewrite ugly java...
464

438929a4   Goutte   Rewrite the orbit...
465
466
467
    for slug, config of @orbiters
      @resizeOrbiter(slug, config)

f1f1e797   Goutte   Rewrite ugly java...
468
469
470
471
472
473
474
475
476
477
    @xAxis.scale(@xScale)
    @yAxis.scale(@yScale)

    @svg.select('.x.axis')
        .attr('transform', 'translate(0,' + height + ')')
        .call(@xAxis)

    @svg.select('.y.axis')
        .call(@yAxis)

ae0aa7d2   Goutte   Add an x axis lab...
478
    @xAxisTitle.attr("x", width / 2)
11662eed   Goutte   Add Y axis label ...
479
480
481
               .attr("y", 37)
    @yAxisTitle.attr("x", -1 * height / 2)
               .attr("y", -30)
ae0aa7d2   Goutte   Add an x axis lab...
482

f1f1e797   Goutte   Rewrite ugly java...
483
484
    this

438929a4   Goutte   Rewrite the orbit...
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
  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))
a21f81d9   Goutte   Enable Venus and ...
503
#        .attr('transform', 'rotate(66,'+(cx+c)+', '+cy+')')
438929a4   Goutte   Rewrite the orbit...
504
505
    @yScale.range([height, 0])

a21f81d9   Goutte   Enable Venus and ...
506
    data = @data[slug]
438929a4   Goutte   Rewrite the orbit...
507
508
509
510
511
512

    el['orbiter'].attr('x', @xScale(data[data.length - 1].x) - 16)
    el['orbiter'].attr('y', @yScale(data[data.length - 1].y) - 16)

    this

ae0aa7d2   Goutte   Add an x axis lab...
513
  repositionOrbiter: (slug, datum) ->
a21f81d9   Goutte   Enable Venus and ...
514
    data = @data[slug]
ae0aa7d2   Goutte   Add an x axis lab...
515
516
517
518
    datum ?= data[data.length - 1]
    el = @orbitersElements[slug]
    el['orbiter'].attr('x', @xScale(datum.x) - 16)
    el['orbiter'].attr('y', @yScale(datum.y) - 16)
ae0aa7d2   Goutte   Add an x axis lab...
519
520
521
522
523
    this

  bisectDate: d3.bisector((d) -> d.t).left

  moveToDate: (t) ->
a21f81d9   Goutte   Enable Venus and ...
524
    console.log("Trying to move to an undefined date") unless t
ae0aa7d2   Goutte   Add an x axis lab...
525
    for slug, el of @orbitersElements
a21f81d9   Goutte   Enable Venus and ...
526
      data = @data[slug]
ae0aa7d2   Goutte   Add an x axis lab...
527
528
529
530
531
532
      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
a21f81d9   Goutte   Enable Venus and ...
533
    this
ae0aa7d2   Goutte   Add an x axis lab...