playground repairs

<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);
    }

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

https://d3js.org/d3.v3.min.js