Fancy Pants Interactivity

<html>
  <head>
    <script src='https://api.tiles.mapbox.com/mapbox.js/v0.6.5/mapbox.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox.js/v0.6.5/mapbox.css' rel='stylesheet' />
    <script src="https://d3js.org/d3.v2.js"></script>
    <script src="chart.js"></script>
    <title>Fancy-pants graphs</title>
    <style>
        body {
            font:15px/20px 'Helvetica Neue';
        }
        #map-div {
            position:absolute;
            left:0;
            top:50px;
            right:0;
            bottom:150px;
        }
        #bottom {
            position:absolute;
            left:0;
            right:0;
            height:149px;
            border-top:1px solid #000;
            bottom:0;
        }
        #graph {
            position:relative;
            top:10px;
            left:10px;
            width:400px;
        }
        h2#province {
            position:absolute;
            bottom:80px;
            left:450px;
        }
        div#stats {
            position:absolute;
            bottom:40px;
            left:450px;
        }
        #header {
            position:absolute;
            left:0;
            right:0;
            top:0;
            height:30px;
            padding:10px;
            text-align:center;
        }

svg {
          font: 10px sans-serif;
        }

.axis path, .axis line {
          fill: none;
          stroke: #000;
          shape-rendering: crispEdges;
        }

.line {
          fill: none;
          stroke: #000;
          stroke-width: 1.5px;
        }

.area {
          fill: #969696;
        }
    </style>
  </head>
<body>
<div id='header'>fancy-pants graphs</div>
<div id='map-div'></div>
<div id='bottom'>
    <div id='graph'></div>
    <h2 id='province'></div>
    <div id='stats'>
        <span id='literacy'></span><br />
        <span id='population'></span>
    </div>
</div>
<script>
var chart = timeSeriesChart()
  .x(function(d) { return formatDate.parse(d[0]); })
  .y(function(d) { return +d[1]; })
  .width(400)
  .height(100);

Modified http://api.tiles.mapbox.com/mapbox.js/v0.6.5/mapbox.js to a secure url

Modified http://d3js.org/d3.v2.js to a secure url

https://api.tiles.mapbox.com/mapbox.js/v0.6.5/mapbox.js

https://d3js.org/d3.v2.js