D3 Examples - Fancy Pants Interactivity

xxxxxxxxxx
 
<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);
​
var formatDate = d3.time.format("%Y");
var m;
mapbox.load('internews.afghanistan-hillshades,internews.afghanistan-english-borders,internews.jv-afg-total',
function(o) {
    m = mapbox.map('map-div', o.layer).center({ lat: 34, lon: 67.4 }, 7);
/*
    map.ui.interaction().auto();
    map.ui.interaction.on({
            on: function(o) {
                var years = [];
                for (var year = 2001; year < 2012; year++) {
                    years.push(['' + year, o.data[year] || 0]);
                }
                d3.select("#graph")
                  .datum(years)
                  .call(chart);
                d3.select("#province")
                  .text(o.data.ProvName);
                d3.select("#population")
                  .text('population: ' + o.data.Population);
                d3.select("#literacy")
                  .text('literacy: ' + o.data['Adult Literacy'] + '%');
            }
        });
*/
});
</script>
</body>
</html>
    