D3 Examples - Mapping China's WWII battles

xxxxxxxxxx
 
<!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 WWII battles in China"
-author: "CCTV America"
```
#Major WWII battles in China
```
- center: [39.849167, 116.213056]
- zoom: 4
L.marker([39.8492, 116.2131]).actions.addRemove(S.map)
```
![Plane](https://upload.wikimedia.org/wikipedia/commons/f/f0/Soviet_volunteer.jpg)
​
​
For the United States, World War two 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 World War Two.
 
Western historians also call this eight-year conflict the Second Sino-Japanese War. While China joined the Allies in declaring war on Germany on December 9, 1941, China’s principal foe throughout World War Two 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. 
​
​
​
#Battle of Shanghai
```
- center: [31.2323, 121.469]
- zoom: 12
L.marker([31.2323, 121.469]).actions.addRemove(S.map)
```
![A](https://www.museumsyndicate.com/images/7/66454.jpg)
​
Aug. 13 – Nov. 11, 1937
​
It was the first major engagement between China’s National Revolutionary Army and Japanese forces. The Battle of Shanghai – or the Battle of Songhu as it’s known in China – was the also one of the bloodiest clashes of the war. Historian Peter Harmsen dubbed it “Stalingrad on the Yangtze.” China suffered more than 280,000 casualties, Japan more than 90,000. Some researchers say Japan expected victory in as little as three days, but Chinese troops held their ground. 
​
After Shanghai fell on Nov. 11, American journalist Edgar Snow wrote: “[the Chinese soldier] has made his adversary pay dearly for the few miles he has advanced in the last three months.” According to historian Poshek Fu: “…the Battle of Shanghai helped destroy the Japanese hope of a quick victory in China. Instead of taking the whole of North China in a matter of months with a force of 300,000 as it had boasted it would do so, Japan was forced to commit almost a quarter of a million men and hundreds of planes and warships to the Shanghai front alone.”
 
Outcome: Japanese victory
​
Casualties: 283,500 Chinese; 92,640 Japanese (estimated)  
​
​
​
#Stay tuned
```
- center: [21.9838, -260.2441]
- zoom: 5
```
![Salween](https://ww2db.com/images/imagemagick/tmb_battle_salween4.jpg)
​
​
More battles will be added around their anniversaries.
​
​
</script></body></html>
    