D3 Examples - slider with map 'tooltip'

xxxxxxxxxx
 
<html>
<head>
    <title>small map slider</title>
    <link href="jquery-ui-1.10.4.custom.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-git2.js"></script>
    <script src="jquery-ui-1.10.4.custom.min.js"></script>
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <style type="text/css">
        body{
            font-family: sans-serif;
        }
        .bounds{
            margin:20%;
        }
        #map{
            display: inline-block;
            text-align: center; 
            position: relative;}
​
        path{
            stroke-width:1; }
​
        .yet-to-vote{
            fill:none;
            stroke:#666;
            stroke-width:0.1; }
​
        .voted{
            fill:#666; 
            stroke:#666;}
​
        .voting{
            fill:#FF2600; 
            stroke:#FF2600;}
​
        .none{
            fill:none;
            stroke:none; }
​
    </style>
​
</head>
<body>
<!-- Slider -->
<div class="bounds">
    <div id="slider"></div>
    <div id="map"></div>
</div>
</body>
<script type="text/javascript">
​
var currentDate = '2014-2-10';
var mapWidth = 200;
var mapHeight = 120;
​
var projection = d3.geo.albersUsa()
    .scale(220)
    .translate([mapWidth / 2, mapHeight / 2]);
​
var path = d3.geo.path()
    .projection(projection);
​
var dateFormat = d3.time.format("%B %e");
​
d3.json("map.geojson", function(error, map) {
    var dates_o = {};
    var ticker;
    map.features.forEach(function(d,i){
        if(!dates_o[d.properties.date]){
            dates_o[d.properties.date] = true;
        }
    });
    var dates = Object.keys(dates_o);
    var mapContainer = d3.select('#map');
    var title = mapContainer.append('p');
    var mapView = mapContainer.append('svg').attr({
            'width':mapWidth,
            'height':mapHeight
        });
​
    var mapJoin = mapView.selectAll('path')
        .data(map.features);
    
    mapJoin.enter().append("path")
            .attr({
                "d":path
            });
​
    var slider = $( "#slider" ).slider({
            range: false,
            step:1,
            min:0,
            max:(dates.length-1)
        });
    $sliderhandle = $('.ui-slider-handle');
    mapContainer.style('left', ($sliderhandle.position().left - mapWidth/2) ) 
​
    slider.on( "slide", function(e,ui){
        update(new Date(dates[ui.value])); 
    });
    slider.on( "slidestart", function(e,ui){
        ticker = setInterval(moveMap,100)
    });
​
    slider.on( "slidestop", function(e,ui){
        window.clearInterval(ticker);
    });
​
    function update(date){
        title.text( dateFormat(date) );
        mapJoin.attr("class", function(d){
            if(d.properties.date){
                var stateDate = new Date(d.properties.date);
                if(stateDate > date){
                    return 'yet-to-vote';   
                }else if(stateDate < date){
                    return 'voted';
                }
                return 'voting';
            }
            return 'none';
        });
    }
​
    function moveMap(){
        var p = $sliderhandle.position().left;
        mapContainer.style('left', (p  - mapWidth/2) ) 
    }
​
    update(new Date( dates[0] ));
​
});
​
​
​
​
</script>
</html>
    