D3 Examples - The Rise of Social Impact Bonds to Address Recidivism

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://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
-title: "Social Impact Bonds Addressing Recidivism"
-author: "Robert F. Kennedy Human Rights"
```
​
#The Rise of Social Impact Bonds to Address Recidivism
```
L.marker([37.7620, -122.4385]).actions.addRemove(S.map)
- center: [40.7908, -73.8818]
- zoom: 16
```
​
The MDRC/Goldman Sachs Riker's Island SIB can be considered a "successful failure" in the sense that it failed to meet its monetary and programmatic objects, yet at the same time serving as a  call to action that would affect.
​
​
#How to add more states
```
- center: [40.7348, -73.9970]
- zoom: 9
L.marker([40.7348, -73.9970]).actions.addRemove(S.map)
```
​
By adding new [Markdown] (https://daringfireball.net/projects/markdown/]) h1 elements (#) you add new states to your story.
​
​
#Adding images to your story
```
- center: [40.7365, -73.9982]
- zoom: 13
```
​
By default, images are also supported. 
​
![New York](https://www.boston-discovery-guide.com/image-files/new-york-1.jpg)
​
#Exporting your story
```
- center: [40.4469, -28.5645]
- zoom: 3
```
​
You have different options for exporting your odyssey.js visualization. You can either embed this using an iframe, publishing with a click on bl.ocks or just share the URL of this visualization.
​
If you want to customize it further, you can download the generated source code by clicking on the button below.
​
#Advanced users
​
Check out our [documentation](/odyssey.js/documentation/) to learn how to use odyssey to create more custom things. It's crazy the amount of cool things that can be done with the library.
​
Also if you are a developer, take a look at our contributing guideline so you can push code to the actual library.
​
Cheers!
</script></body></html>
    