<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Philadelphia Weather History</title>
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style type="text/css">
body {
}
.bar {
fill: steelblue;
opacity: .6;
}
.overlay {
fill: white;
opacity: .5;
}
.overlay:hover {
opacity: 0;
}
.labels {
font: 12px sans-serif;
fill: black;
}
.axis path,
.axis line {
fill: none;
stroke: #e0e0e0;
shape-rendering: crispEdges;
}
.x.axis {
font: 10px sans-serif;
fill: #c0c0c0;
}
.y.axis {
font: 10px sans-serif;
fill: #c0c0c0;
}
.x.axis path {
display: none;
}
.area {
fill: #a0a0a0;
opacity: .7;
}
.line {
fill: none;
stroke: white;
}
</style>
</head>
<body>
<div id="container">
<script type="text/javascript">
//conventional margins
var margin = {top: 40, right: 160, bottom: 40, left: 40};
var width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var svg = d3.select('#container').append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
//conventional margins end
var parseDate = d3.time.format('%Y').parse;
//scales
var xA = d3.time.scale()
.range([0,width]);
var xB = d3.scale.ordinal()
.rangeBands([0, width], .25, .25);
var yA = d3.scale.linear()
.range([height, 0]);
var yB = d3.scale.linear()
.range([height, 0]);
//axes
var xAxis = d3.svg.axis()
.scale(xA)
.orient('bottom')
.ticks(10);
var yAxisA = d3.svg.axis()
.scale(yA)
.orient('left');
var yAxisB = d3.svg.axis()
.scale(yB)
.orient('right');
//area chart
var area = d3.svg.area()
.x(function(d) { return xA(d.Year); })
.y0(function(d) { return yA(d.DecJanFeb); })
.y1(function(d) { return yA(d.JunJulAug); });
//line chart
var line = d3.svg.line()
.x(function(d) { return xA(d.Year); })
.y(function(d) { return yA(d.Mean); });
//data
d3.csv('temps.csv', function(error, data) {
data.forEach(function(d) {
d.Year = parseDate(d.Year);
d.Mean = +d.Mean;
d.DecJanFeb = +d.DecJanFeb;
d.JunJulAug = +d.JunJulAug;
d.Snowfall = +d.Snowfall;
});
//domains for the scales
xA.domain(d3.extent(data, function(d) { return d.Year; }));
xB.domain(data.map(function(d) { return d.Year; }));
yA.domain([0,100]);
yB.domain([0,100]);
svg.append('path')
.datum(data)
.attr('class', 'area')
.attr('d', area);
svg.selectAll('.bar')
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return xB(d.Year); })
.attr("width", xB.rangeBand())
.attr("y", function(d) { return yB(d.Snowfall); })
.attr("height", function(d) { return height - yB(d.Snowfall); });
svg.append('path')
.datum(data)
.attr('class', 'line')
.attr('d', line);
svg.selectAll('.overlay')
.data(data)
.enter().append("rect")
.attr("class", "overlay")
.attr("x", function(d) { return xB(d.Year); })
.attr("width", xB.rangeBand())
.attr("y", 0)
.attr("height", height)
.on('mouseover', function(d) {
xTip = parseFloat(d3.select(this).attr('x'));
svg.append('text')
.data(data)
.attr('class', 'labels')
.attr('id', 'tooltip0')
.attr('x', xTip - 35)
.attr('y', yB(d.Snowfall) - 5)
.text(d.Snowfall + 'in');
svg.append('text')
.data(data)
.attr('class', 'labels')
.attr('id', 'tooltip1')
.attr('x', xTip + 5)
.attr('y', yB(d.Mean) - 5)
.text(' Average ' + d.Mean + 'º');
svg.append('text')
.data(data)
.attr('class', 'labels')
.attr('id', 'tooltip2')
.attr('x', xTip + 5)
.attr('y', yB(d.JunJulAug) - 5)
.text(' Jun-Jul-Aug average: ' + d.JunJulAug + 'º');
svg.append('text')
.data(data)
.attr('class', 'labels')
.attr('id', 'tooltip3')
.attr('x', xTip + 5)
.attr('y', yB(d.DecJanFeb) - 5)
.text(' Dec-Jan-Feb average: ' + d.DecJanFeb + 'º');
})
.on('mouseout', function() {
d3.select('#tooltip0').remove()
d3.select('#tooltip1').remove()
d3.select('#tooltip2').remove()
d3.select('#tooltip3').remove();
});
svg.append('g')
.attr('class', 'x axis')
.call(xAxis)
.append('text')
.attr('x', width - 100)
.attr('y', -16)
.attr("dy", ".71em")
.text("source: Franklin Institute");
svg.append("g")
.attr("class", "y axis")
.call(yAxisA)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Temp.(ºF) 1875-1990");
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + width + ", 0)")
.call(yAxisB)
.append("text")
.attr("x", -110)
.attr("y", height + 10)
.attr("dy", ".71em")
.style("text-anchor", "start")
.text("Snowfall(in.) 1875-1990");
});
</script>
</div>
</body>
</html>Year,Mean,DecJanFeb,JunJulAug,Snowfall
1875,50.1,28.6,72.6,23.8
1876,52.6,35.3,75.8,20.4
1877,54.3,30,74.8,25
1878,54.9,36.9,73,29
1879,53.6,31.2,73.4,6.2
1880,54.8,39.7,74.4,7.4
1881,54.5,28.7,72.9,15.2
1882,54.8,37.6,74.8,19.9
1883,54.1,34.6,74.3,36.8
1884,54.2,36,72.6,20.3
1885,51.9,29.7,74.2,23.3
1886,53.7,32.8,73.2,14.8
1887,54.6,33.2,75.4,25.7
1888,52.9,32.9,74.4,19.4
1889,54.8,35.1,73.2,55.4
1890,55,42.2,73.9,20.6
1891,55.1,36.1,72.7,10.6
1892,53.5,36.5,75.7,28.8
1893,53,29.6,74.9,16.8
1894,55,35,74.5,29.4
1895,53.7,31,75,43.8
1896,54.5,34.6,74.8,20.5
1897,54.6,33.6,73.2,38.6
1898,55.6,36.3,75.8,25.8
1899,54.5,32.1,75.5,20.2
1900,56.1,34.9,77.1,37.9
1901,53.8,32.3,76.2,28.9
1902,54.2,32.3,73,23.8
1903,54.2,34.3,71,9.9
1904,51.8,28.3,73,34.2
1905,53.9,28.6,73.7,32.5
1906,55.4,37.4,75,33.7
1907,53.1,32.2,72.4,39.6
1908,55.5,35.1,75,43.9
1909,55.1,38,73.7,4.5
1910,55,33.7,73.7,29.4
1911,55.4,34.1,74.9,13.7
1912,54.2,32.6,73.3,29
1913,57,39,75,23
1914,54.3,34.9,74,22.5
1915,55.4,36.2,72.9,16.5
1916,54.3,34.9,73.7,19.1
1917,52.7,34.1,75.1,14.4
1918,54.8,28.5,74.2,17.5
1919,55.7,38.7,74.2,12.3
1920,54.4,30.2,73.7,8.7
1921,57.1,37.8,74.9,4.1
1922,55.7,34.5,74,8
1923,55.3,33.5,74.9,22.2
1924,53.8,37.2,73.3,34.5
1925,55.9,36.7,76.3,28.9
1926,53.6,34.9,73,25.4
1927,55.5,35.2,71.6,13.8
1928,55.4,36.5,74.8,8.5
1929,55.9,36.7,74.3,27.6
1930,56.8,37.9,76.3,22.3
1931,58.1,36.8,76.3,35.5
1932,57.1,43.3,75.9,9.8
1933,56.4,39.9,75.7,16.3
1934,55.1,32.1,76.2,15.7
1935,54.4,33.3,75,21.1
1936,54.9,29.7,75,18.6
1937,55.3,39,75.6,23.7
1938,56,35.6,75.6,32.1
1939,55.8,37.1,75.8,19.3
1940,52.1,32.7,72.6,2
1941,54.8,33.3,73.5,4.6
1942,54.3,33.1,74.2,16.2
1943,53.7,32.3,76.5,16.8
1944,54.2,33.5,75.3,22.6
1945,54.6,30.3,74.1,12.1
1946,55.4,32.7,71.7,23
1947,54.1,34.9,73.6,7.9
1948,54.1,30.6,74,41.8
1949,57,38.8,76.9,5.1
1950,54.3,38.7,73.3,21.8
1951,55.4,35.5,74.3,49.1
1952,55.9,38,76.6,29.2
1953,56.8,38.4,75.5,20.5
1954,55.7,37.4,74.8,32.9
1955,55.4,34.9,76.2,26.2
1956,54.2,33.4,73.3,27.4
1957,55.1,36.1,74.9,44.3
1958,52.6,33.1,72.9,15.9
1959,55.5,31.4,74.9,23.7
1960,52.8,35.9,72.8,20.3
1961,52.7,28.9,73,18.3
1962,52.1,30.4,71.9,12.2
1963,51.9,28.3,72.5,0
1964,54,30.9,73.7,20.8
1965,53,33.3,72.4,13.6
1966,53,32.5,74.9,17.5
1967,53.3,33.5,74.6,18.7
1968,54.1,32.6,75.3,54.9
1969,53.8,31.4,74.6,40.2
1970,54.4,30.3,75.1,20.9
1971,55.6,33.2,75.6,15.4
1972,54,36.3,73.9,25.4
1973,56.3,36,77.1,35.9
1974,55.3,35.4,74.6,21.6
1975,56,37.5,75.3,16.5
1976,54.2,35.5,75.1,16.4
1977,54.3,28,74.2,25.7
1978,53.4,28.4,75.7,15
1979,54.4,31.4,73.5,11.2
1980,54.4,33.2,76.3,17
1981,53.7,31.9,74.6,14.6
1982,54.1,31.2,73,4.7
1983,54.7,36.4,75.6,24.3
1984,53.7,32.7,74,23.1
1985,54.8,34.8,72.8,9.8
1986,55.3,32.7,75.3,65.5
1987,55.4,34,76.5,12.9
1988,54.5,33.7,77.1,0.8
1989,54.4,35.5,75.5,12.5
1990,57.5,35.7,75.3,19.1