Skip to content

Instantly share code, notes, and snippets.

@MikeCostelloe

MikeCostelloe/index.html

Last active August 29, 2015 13:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save MikeCostelloe/9915993 to your computer and use it in GitHub Desktop.
Save MikeCostelloe/9915993 to your computer and use it in GitHub Desktop.
Download ZIP
Philadelphia Weather History
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Philadelphia Weather History</title>
<script src="http://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>
Raw
temps.csv
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment