D3 Examples - Testing Odyssey for major WWII battles in China.

xxxxxxxxxx
 
<!--Version date: 7-7-15-->
<!doctype><html><head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Odyssey.js Slides</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
​
  <link rel="icon" type="image/x-icon" href="https://cartodb.github.io/odyssey.js/sandbox/favicon.png">
  <link rel="icon" type="image/png" href="https://cartodb.github.io/odyssey.js/sandbox/favicon.png">
​
  <link rel="stylesheet" href="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/themes/css/cartodb.css">
  <link rel="stylesheet" href="https://cartodb.github.io/odyssey.js/sandbox/css/slides.css">
  <script src="https://cartodb.github.io/odyssey.js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
  <div id="map" style="width: 100%; height: 100%;"></div>
​
  <div id="slides_container" style="display:block;">
    <div id="dots"></div>
​
    <div id="slides"></div>
​
    <ul id="navButtons">
      <li><a class="prev"></a></li>
      <li><a class="next"></a></li>
    </ul>
  </div>
​
  <div id="credits">
    <span class="title" id="title">Title</span>
    <span class="author"><strong id="author">By Name using</strong> <a href="https://cartodb.github.io/odyssey.js/">Odyssey.js</a><span>
  </span></span></div>
​
  <script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/cartodb.js"></script>
  <script src="https://cartodb.github.io/odyssey.js/dist/odyssey.js" charset="UTF-8"></script>
​
  <script>
    var resizePID;
​
    function clearResize() {
      clearTimeout(resizePID);
      resizePID = setTimeout(function() { adjustSlides(); }, 100);
    }
​
    if (!window.addEventListener) {
      window.attachEvent("resize", function load(event) {
        clearResize();
      });
    } else {
      window.addEventListener("resize", function load(event) {
        clearResize();
      });
    }
​
    function adjustSlides() {
      var container = document.getElementById("slides_container"),
          slide = document.querySelectorAll('.selected_slide')[0];
​
      if (slide) {
        if (slide.offsetHeight+169+40+80 >= window.innerHeight) {
          container.style.bottom = "80px";
​
          var h = container.offsetHeight;
​
          slide.style.height = h-169+"px";
          slide.classList.add("scrolled");
        } else {
          container.style.bottom = "auto";
          container.style.minHeight = "0";
​
          slide.style.height = "auto";
          slide.classList.remove("scrolled");
        }
      }
    }
​
    var resizeAction = O.Action(function() {
      function imageLoaded() {
        counter--;
​
        if (counter === 0) {
          adjustSlides();
        }
      }
      var images = $('img');
      var counter = images.length;
​
      images.each(function() {
        if (this.complete) {
          imageLoaded.call( this );
        } else {
          $(this).one('load', imageLoaded);
        }
      });
    });
​
    function click(el) {
      var element = O.Core.getElement(el);
      var t = O.Trigger();
​
      // TODO: clean properly
      function click() {
        t.trigger();
      }
​
      if (element) element.onclick = click;
​
      return t;
    }
​
    O.Template({
      init: function() {
        var seq = O.Triggers.Sequential();
​
        var baseurl = this.baseurl = 'https://{s}.api.cartocdn.com/base-light/{z}/{x}/{y}.png';
        var map = this.map = L.map('map').setView([0, 0.0], 4);
        var basemap = this.basemap = L.tileLayer(baseurl, {
          attribution: 'data OSM - map CartoDB'
        }).addTo(map);
​
        // enanle keys to move
        O.Keys().on('map').left().then(seq.prev, seq)
        O.Keys().on('map').right().then(seq.next, seq)
​
        click(document.querySelectorAll('.next')).then(seq.next, seq)
        click(document.querySelectorAll('.prev')).then(seq.prev, seq)
​
        var slides = O.Actions.Slides('slides');
        var story = O.Story()
​
        this.story = story;
        this.seq = seq;
        this.slides = slides;
        this.progress = O.UI.DotProgress('dots').count(0);
      },
​
      update: function(actions) {
        var self = this;
​
        if (!actions.length) return;
​
        this.story.clear();
​
        if (this.baseurl && (this.baseurl !== actions.global.baseurl)) {
          this.baseurl = actions.global.baseurl || 'https://0.api.cartocdn.com/base-light/{z}/{x}/{y}.png';
​
          this.basemap.setUrl(this.baseurl);
        }
​
        if (this.cartoDBLayer && ("https://"+self.cartoDBLayer.options.user_name+".cartodb.com/api/v2/viz/"+self.cartoDBLayer.options.layer_definition.stat_tag+"/viz.json" !== actions.global.vizjson)) {
          this.map.removeLayer(this.cartoDBLayer);
​
          this.cartoDBLayer = null;
          this.created = false;
        }
​
        if (actions.global.vizjson && !this.cartoDBLayer) {
          if (!this.created) { // sendCode debounce < vis loader
            cdb.vis.Loader.get(actions.global.vizjson, function(vizjson) {
              self.map.fitBounds(vizjson.bounds);
​
              cartodb.createLayer(self.map, vizjson)
                .done(function(layer) {
                  self.cartoDBLayer = layer;
​
                  var sublayer = layer.getSubLayer(0),
                      layer_name = layer.layers[0].options.layer_name,
                      filter = actions.global.cartodb_filter ? " WHERE "+actions.global.cartodb_filter : "";
​
                  sublayer.setSQL("SELECT * FROM "+layer_name+filter)
​
                  self.map.addLayer(layer);
​
                  self._resetActions(actions);
                }).on('error', function(err) {
                  console.log("some error occurred: " + err);
                });
            });
​
            this.created = true;
          }
​
          return;
        }
​
        this._resetActions(actions);
      },
​
      _resetActions: function(actions) {
        // update footer title and author
        var title_ = actions.global.title === undefined ? '' : actions.global.title,
            author_ = actions.global.author === undefined ? 'Using' : 'By '+actions.global.author+' using';
​
        document.getElementById('title').innerHTML = title_;
        document.getElementById('author').innerHTML = author_;
        document.title = title_ + " | " + author_ +' Odyssey.js';
​
        var sl = actions;
​
        document.getElementById('slides').innerHTML = ''
        this.progress.count(sl.length);
​
        // create new story
        for(var i = 0; i < sl.length; ++i) {
          var slide = sl[i];
          var tmpl = "<div class='slide' style='diplay:none'>";
​
          tmpl += slide.html();
          tmpl += "</div>";
          document.getElementById('slides').innerHTML += tmpl;
​
          this.progress.step(i).then(this.seq.step(i), this.seq)
​
          var actions = O.Parallel(
            this.slides.activate(i),
            slide(this),
            this.progress.activate(i),
            resizeAction
          );
​
          actions.on("finish.app", function() {
            adjustSlides();
          });
​
          this.story.addState(
            this.seq.step(i),
            actions
          )
        }
​
        this.story.go(this.seq.current());
      },
​
      changeSlide: function(n) {
        this.seq.current(n);
      }
    });
  </script>
​
  <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
​
    ga('create', 'UA-20934186-21', 'cartodb.github.io');
    ga('send', 'pageview');
  </script>
​
  <script type="text/javascript" src="https://fast.fonts.net/jsapi/3af16084-ba56-49ca-b37d-0b49b59e1927.js"></script>
​
<script id="md_template" type="text/template">```
-baseurl: "https://2.maps.nlp.nokia.com/maptile/2.1/maptile/newest/normal.day/{z}/{x}/{y}/256/png8?lg=eng&token=A7tBPacePg9Mj_zghvKt9Q&app_id=KuYppsdXZznpffJsKT24"
-title: "Major Battles of WWII China"
-author: "CCTV America"
```
​
#Major WWII battles in China
```
- center: [39.849167, 116.213056]
- zoom: 4
```
![Plane](https://upload.wikimedia.org/wikipedia/commons/f/f0/Soviet_volunteer.jpg)
​
​
For the United States, World War II lasted a few months shy of four years. For China, the fighting lasted more than twice as long. From the first shots fired at Lúgōu Qiáo (Marco Polo Bridge) that began China’s War Against Japanese Aggression – to Japan’s formal surrender on the decks of the U.S.S. Missouri eight years later – the Chinese people suffered an estimated 20 million casualties. That’s almost the entire population of Australia.
 
These are the major clashes that would define a generation of Chinese. Their sacrifices earned China one of the five permanent seats on the UN Security Council—a place of honor as one of the five victorious Allied powers of WWII. 
 
Western historians also call this eight-year conflict the Second Sino-Japanese War. While China joined the Allies in declaring war on Germany on Dec. 9, 1941, China’s principal foe throughout WWII was Japan.
​
#The Lúgōu Qiáo (Marco Polo Bridge) Incident
```
- center: [39.849167, 116.213056]
- zoom: 16
L.marker([39.8492, 116.2131]).actions.addRemove(S.map)
```
![Bridge](https://upload.wikimedia.org/wikipedia/commons/4/49/Japanese_Bombarded_Wanping.gif)
​
​
July 7, 1937
 
Japanese troops near Lúgōu Qiáo – a bridge near Wanping on the outskirts of Beijing – were carrying out nighttime maneuvers without informing the Chinese. When they ran into Chinese troops, the two sides opened fire.
 
Later that night, a Japanese soldier was reported missing. The Japanese wanted to look for him inside Wanping—a walled fortress dating back to the 17th century. The Chinese said they would do the search accompanied by a Japanese officer. Japanese infantry launched an attack instead.  By 6 a.m., the Japanese occupied the area. Two garrison platoons of Chinese soldiers were killed in the battle.
 
Westerners call Lúgōu Qiáo the Marco Polo Bridge, because 13th century Italian explorer, Marco Polo, wrote a description of the original bridge that became well known in Europe.
 
Although Japanese forces occupied a region in Northeast China called Manchuria in 1931, the Lúgōu Qiáo, or Marco Polo, Incident gave Japan a pretext to launch a larger, full-scale invasion of the Chinese mainland that began with the shelling of Wanping. 
 
This incident is generally considered the beginning of the War Against Japanese Aggression. 
​
​
#Stay tuned
```
- center: [21.9838, -260.2441]
- zoom: 5
```
![Salween](https://ww2db.com/images/imagemagick/tmb_battle_salween4.jpg)
​
​
More battles will be added on their anniversaries.</script></body></html>
    