All examples By author By category About

erlenbusch

Full window Github gist

The Rise of Social Impact Bonds to Address Recidivism

<!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">

<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>

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();

// 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>

ga('create', 'UA-20934186-21', 'cartodb.github.io');
    ga('send', 'pageview');
  </script>

#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>

Modified http://cartodb.github.io/odyssey.js/vendor/modernizr-2.6.2.min.js to a secure url

Modified http://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/cartodb.js to a secure url

Modified http://cartodb.github.io/odyssey.js/dist/odyssey.js to a secure url

Modified http://fast.fonts.net/jsapi/3af16084-ba56-49ca-b37d-0b49b59e1927.js to a secure url

https://cartodb.github.io/odyssey.js/vendor/modernizr-2.6.2.min.js

https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/cartodb.js

https://cartodb.github.io/odyssey.js/dist/odyssey.js

https://fast.fonts.net/jsapi/3af16084-ba56-49ca-b37d-0b49b59e1927.js