Trees in Providence, RI

<style>

body {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size:16pt;
    position: relative;
}

p {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size:16pt;
    position: relative;
    word-wrap: break-word;
}

.map {
    -webkit-transform: translate3d(0, 0, 0);
}

.tipsy {
    font-size: 4px;
    position: absolute;
    padding: 5px;
    z-index: 100000;
}

.tipsy-inner {
    background-color: #000;
    color: #FFF;
    font-size: 10pt;
    max-width: 500px;
    padding: 5px 8px 4px 8px;
    text-align: center;
}

</style>

// Load data
d3.json('trees.json', function (data) {

// General properties
var margin = { top: 30, right: 80, bottom: 90, left: 110 }
var h = 500 - margin.top - margin.bottom
var w = 600 - margin.left - margin.right

// Map coordinates
var map = new L.map('map').setView([41.8208, -71.424], 12);

function standard_layer() {
    return L.tileLayer('https://{s}.{base}.maps.cit.api.here.com/maptile/2.1/maptile/{mapID}/terrain.day/{z}/{x}/{y}/256/png8?app_id={app_id}&app_code={app_code}',
        {
	        attribution: '',
        	subdomains: '1234',
	        mapID: 'newest',
    	    app_id: 'P1vQC2llXiUYcDliEVOM',
            app_code: '-4sbk8a-0_BtrvZj5l8KCQ',
        	base: 'aerial',
	        minZoom: 12,
        	maxZoom: 19,
        })
            .addTo(map);
    map._initPathRoot()
}

// Initialize layer
var map_layer = standard_layer();

// Initialize map layer
map._initPathRoot()

// Display map
var svgmap = d3.select("#map").select("svg"),
	gmap = svgmap.append("g");

// Color scale
var cmin = d3.min(data,function (d) { return d['size']}),
    cmax = d3.max(data,function (d) { return d['size']});

var colorScale = d3.scale.linear()
    .domain([cmin, cmax])
    .range(['#003D0C','#6D5A23'])

data.forEach(function(d) {d.LatLng = new L.LatLng(d.latitude, d.longitude)})

var pointopacity = 0.5;

// Assign data
var points = gmap.selectAll("circle")
    .attr("class", "points")
    .data(data)
    .enter()
    .append("circle")
    .style("opacity", pointopacity)
    .style("fill", function(d) {return colorScale(d.size)})

// Show map
map.on("viewreset", update);
update();

// Update map zoom
function update() {
    points.attr("transform", function(d) {return "translate("+
        map.latLngToLayerPoint(d.LatLng).x +","+
        map.latLngToLayerPoint(d.LatLng).y +")"; })
    .attr("r", function(d) {return (d.size/6)*(map.getZoom()/10)})
}

update()

// Map tooltip
$('svg circle').tipsy({
    gravity: 'w',
    html: true,
    delayOut: 100,
    triggle: 'hover',
    title: function() {
        var d = this.__data__, c = colorScale(d.size), text = Math.round((d.size/12)*100)/100 + " ft.";
        return '<span style="color:' + c + '">' + text + '</span>';
    }
});
});
</script>
</html>

Modified http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js to a secure url

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

Modified http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js to a secure url

https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js

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

https://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js