D3 Examples - playground repairs

xxxxxxxxxx
 
<html>
<head>
    <title>A D3 map</title>
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="neighborhoods.js"></script>
    <script src="repairs.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Lora:400i|Montserrat:400,700" rel="stylesheet">
    <style>
        body {
            position: absolute;
        }
        h1, h2, h3 {
            position: relative;
            left: 10px;
        }
        h2, h3 {
            font-family: 'Lora', serif;
            font-size: 18px;
        }
        h1 {
            top: 10px;
            font-family: 'Montserrat', sans-serif;
            font-size: 36px;
            letter-spacing: -1px;
        }
        .hover {
            fill: #288BE4;   
        }
        #sliderContainer {
            text-align: center;
            font-family: 'Lora', serif;
            position: absolute;
            top: 620px;
            left: 460px;
        }
        #photobox {
            position: relative;
            top: 20px;
            left: 10px;
        }
        
        #mapbox {
            position: absolute;
            top: 130px;
            left: 150px;
        }
    </style>
</head>
<body>
    <h1>2015 BOSTON PARKS EQUIPMENT REPAIR REQUESTS<h1>
    <h2></h2>
    <h3></h3>
    <div>
        <svg id="photobox"></svg>
    </div>
    <div id="mapbox"></div>
    <div id="sliderContainer">
        <input id="timeslide" type="range" min="0" max="11" value="0" step="1"/><br>
        <span id="range">January</span>
    </div>
    <script>
    var width = 700;
    var height = 580;
​
    var inputValue = null;
    var month = ["January","February","March","April","May","June","July","August","September","October","November","December"];
​
    var svg = d3.select( "#mapbox" )
        .append( "svg" )
        .attr( "width", width )
        .attr( "height", height );
​
    var g = svg.append( "g" );
​
    var albersProjection = d3.geo.albers()
        .scale( 190000 )
        .rotate( [71.057,0] )
        .center( [0, 42.313] )
        .translate( [width/2,height/2] );
​
    var geoPath = d3.geo.path()
        .projection( albersProjection );
​
    g.selectAll( "path" )
        .data( neighborhoods_json.features )
        .enter()
        .append( "path" )
        .attr( "fill", "#D2D2D2" )
        .attr( "stroke", "#333")
        .attr( "d", geoPath );
​
    var repairs = svg.append( "g" );
​
    var path = repairs.selectAll( "path" )
        .data( repairs_json.features )
        .enter()
        .append( "path" )
        .attr("fill", initialDate)
        .attr("stroke", "#D2D2D2")
        .attr("d", geoPath)
        .attr("class","incident")
        .on("mouseover", function(d){
            d3.select("h2").text("Neighborhood: " + d.properties.neighborhood);
            d3.select("h3").text("Address: " + d.properties.Location);
            d3.select("#photobox")
                .append("image")
                .attr("height","200")
                .attr("width", "200")
                .attr("xlink:href", d.properties.SubmittedPhoto);
            d3.select(this).attr("class","incident hover");
        })
        .on("mouseout", function(d){
            d3.select("h2").text("");
            d3.select("h3").text("");
            d3.select("#photobox image").remove();
            d3.select(this).attr("class","incident");
        });
​
    // when the input range changes update the rectangle 
    d3.select("#timeslide").on("input", function() {
        update(+this.value);
    });
​
    function update(value) {
        document.getElementById("range").innerHTML=month[value];
        inputValue = month[value];
        d3.selectAll(".incident")
            .attr("fill", dateMatch);
    }
​
    function dateMatch(data, value) {
        var d = new Date(data.properties.OPEN_DT);
        var m = month[d.getMonth()];
        if (inputValue == m) {
            this.parentElement.appendChild(this);
            return "#FB4D42";
        } else {
            return "#58585B";
        };
    }
​
    function initialDate(d,i){
        var d = new Date(d.properties.OPEN_DT);
        var m = month[d.getMonth()];
        if (m == "January") {
            this.parentElement.appendChild(this);
            return "#FB4D42";
        } else {
            return "#58585B";
        };
    }
    </script>
</body>
</html>
    