Authorea

<!DOCTYPE html>
<meta charset="utf-8">
<style>
div {
  padding: 10px;
}

svg {
    /*-webkit-transform: translateZ(0);*/
    font: 10pt sans-serif;
    font-family: "Source Sans Pro";
    font-weight: 100;
    padding: 0px;
    background: #f7f5f0;
    margin: 0 auto;
    display: block;
    border: 1px solid #cacaca;
    border-radius: 5px;
}

.hack {
    display: block;
    margin: 0 auto;
}


.axis-label {
    font-weight: 100;
    font-size: 12pt;
}

.axis,
.frame {
  shape-rendering: crispEdges;
}

.axis line {
  stroke: #ddd;
}

.axis path {
  display: none;
}

.frame {
  fill: #fff;
  stroke: #aaa;
  zorder: -1;
}

.extent {
  fill: #000;
  fill-opacity: .125;
  stroke: #fff;
}

#caption{
	word-wrap: normal;
	font: 12px sans-serif;
    width: 90%;
    margin: 0 auto;
    padding: 0px;
    border-left: 0px solid #aaa;
    border-right: 0px solid #aaa;
}

#controls {
    margin: 0 auto;
    text-align: center;
}

.navigation {
    list-style: none;
    display: inline;
    margin: 0px;
    padding: 0px;
}
.navigation li {
  color: #999;
  font-size: 12px;
  cursor: pointer;
  padding: 4px 8px;
  border-top: solid 1px #CCC;
  border-bottom: solid 1px #CCC;
  border-left: solid 1px #CCC;
  background: #f9f9f9;
  margin: 0;
  white-space: nowrap;
  display:inline-block;
}

.navigation li:first-of-type{
  border-radius: 4px 0 0 4px;
}
.navigation li:last-of-type{
  border-right: solid 1px #CCC;
  border-radius: 0 4px 4px 0;
}
.navigation li.selected {
  color: #000;
  background: #e9e9e9;
  border-color: #AAA;
  box-shadow: inset 0px 0px 4px rgba(0,0,0,0.2);
}

.y-label {
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
}
</style>

        <script src="https://dl.dropboxusercontent.com/s/i1d8jg13svngoiv/d3.v3.min.js?raw=true"></script>
        <script src="https://dl.dropboxusercontent.com/s/sls9qeq2qphi7y3/util.js?raw=true"></script>
        <script src="https://dl.dropboxusercontent.com/s/neh8eh78mda858f/jquery.min.js?raw=true"></script>
        <script src="https://dl.dropboxusercontent.com/s/i2nyq66kl3vn4ox/d3po-pf.js?raw=true"></script>
        <script src="https://dl.dropboxusercontent.com/s/q4zihdpq0oopovl/d3po-pf.init.js?raw=true"></script>

    <body style="margin-left:0px;">
        <div id="svg"><svg></svg></div>
        <div id="controls">
            <ul class="navigation">
            </ul>
        </div>
        <div id="caption"></div>

        <script type="text/javascript">
            $(document).ready(function() {
                initialize("https://dl.dropboxusercontent.com/s/znm4p17re8z32l8/d3po-pf.json?raw=true",
                           "https://dl.dropboxusercontent.com/s/32nssuibv9d4lk5/d3po-pf.csv?raw=true");
            });
        </script>
    </body>
</html>