Skip to content

Instantly share code, notes, and snippets.

@carlosmondra

carlosmondra/KNYC.csv

Last active April 5, 2018 20:01
Show Gist options
  • Save carlosmondra/50300c215773c326446298e0a9e10d2f to your computer and use it in GitHub Desktop.
Save carlosmondra/50300c215773c326446298e0a9e10d2f to your computer and use it in GitHub Desktop.
Download ZIP
Temperatures in NYC for an entire year
Raw
d3-scale-radial.js
(function(global, factory) {
typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("d3-scale")) :
typeof define === "function" && define.amd ? define(["exports", "d3-scale"], factory) :
(factory(global.d3 = global.d3 || {}, global.d3));
}(this, function(exports, d3Scale) {
'use strict';
function square(x) {
return x * x;
}
function radial() {
var linear = d3Scale.scaleLinear();
function scale(x) {
return Math.sqrt(linear(x));
}
scale.domain = function(_) {
return arguments.length ? (linear.domain(_), scale) : linear.domain();
};
scale.nice = function(count) {
return (linear.nice(count), scale);
};
scale.range = function(_) {
return arguments.length ? (linear.range(_.map(square)), scale) : linear.range().map(Math.sqrt);
};
scale.ticks = linear.ticks;
scale.tickFormat = linear.tickFormat;
return scale;
}
exports.scaleRadial = radial;
Object.defineProperty(exports, '__esModule', {value: true});
}));
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.25.4/d3-legend.min.js"></script>
<script src="d3-scale-radial.js"></script>
<title>NYC Weather History</title>
<link rel='stylesheet' href='style.css'>
</head>
<body>
<center>
<h1>NYC Weather History</h1>
<h2>Carlos Daniel Mondragón Chapa</h2>
</center>
<h4>Dataset Link and Description</h4>
<p class="info-text">
This dataset shows the temperatures and precipitations for an entire year (2014-2015) in New York City. It also shows the record max and min temperatures for a particular day since 1880, and displays the year when this happened. Since it covers an entire year, the dataset contains 365 rows each with 12 variables. The dataset can be used to compare the change in temperature throughout an entire year and see the minimum and maximum temperatures since 1880. Please click on this <a target="_blank" href="https://github.com/fivethirtyeight/data/tree/master/us-weather-history">LINK</a> to see the source of the dataset.
</p>
<h4>Instructions</h4>
<p class="info-text">
The graph on the left shows the temperatures in New York City for an entire year while the graph on the right shows the precipitations. Using the dropdowns, the user can see different temperatures, like record temperatues since 1880 and precipitations. Both graphs have tooltips; simply place the pointer on top of the dots or the bars of the graphs to show more information. The left graph contains the <b>extra feature</b> of zooming in an out to get a better view of the tooltip of the point selected.
</p>
<center>
<div>
<table class="settings-table">
<tr>
<td>
<span>Select dependent variable: </span>
<select id="ySelect"></select>
</td>
<td>
<span>Select dependent variable: </span>
<select id="ySelectCond"></select>
</td>
<tr>
<td>
<svg id="first-svg" width="600" height="600"></svg>
</td>
<td>
<svg id="second-svg" width="960" height="500"></svg>
</td>
</tr>
</tr>
</table>
</div>
</center>
<div id="tooltip"></div>
<div id="tooltipCond"></div>
<script type='text/javascript' src='script.js'></script>
<script type='text/javascript' src='scriptCondegram.js'></script>
</body>
</html>
Raw
KNYC.csv
date actual_mean_temp actual_min_temp actual_max_temp average_min_temp average_max_temp record_min_temp record_max_temp record_min_temp_year record_max_temp_year actual_precipitation average_precipitation record_precipitation
2014-7-1 81 72 89 68 83 52 100 1943 1901 0.00 0.12 2.17
2014-7-2 82 72 91 68 83 56 100 2001 1966 0.96 0.13 1.79
2014-7-3 78 69 87 68 83 54 103 1933 1966 1.78 0.12 2.80
2014-7-4 70 65 74 68 84 55 102 1986 1949 0.14 0.13 1.76
2014-7-5 72 63 81 68 84 53 101 1979 1999 0.00 0.12 3.07
2014-7-6 75 66 84 68 84 54 103 1979 2010 0.00 0.13 1.97
2014-7-7 81 72 90 68 84 56 100 1914 2010 0.04 0.13 3.13
2014-7-8 81 71 91 69 84 56 100 1894 1993 0.39 0.14 1.80
2014-7-9 80 71 88 69 84 54 106 1963 1936 0.09 0.14 1.09
2014-7-10 78 72 83 69 84 55 102 1890 1993 0.00 0.15 1.79
2014-7-11 79 71 86 69 84 57 98 1898 1988 0.00 0.15 1.94
2014-7-12 78 71 85 69 84 57 99 1926 1966 0.00 0.15 2.68
2014-7-13 78 72 83 69 84 54 101 1888 1966 0.03 0.17 3.16
2014-7-14 78 72 84 69 84 58 100 1926 1954 0.46 0.16 1.60
2014-7-15 79 72 86 69 84 57 102 1930 1995 1.30 0.15 2.33
2014-7-16 75 68 81 69 84 56 99 1946 1980 0.0 0.16 1.38
2014-7-17 74 67 81 69 84 57 100 1892 1953 0.00 0.15 3.13
2014-7-18 73 64 81 69 84 57 101 1925 1953 0.00 0.15 1.76
2014-7-19 72 68 76 69 84 57 102 1924 1977 0.00 0.16 1.82
2014-7-20 72 66 78 69 84 55 101 1890 1980 0.0 0.15 1.97
2014-7-21 76 67 85 69 84 55 104 1890 1977 0.00 0.15 2.26
2014-7-22 79 71 86 69 84 55 104 1873 2011 0.00 0.14 1.86
2014-7-23 80 72 88 69 84 58 100 1890 2011 0.19 0.15 2.41
2014-7-24 75 70 80 69 84 56 97 1893 1999 0.00 0.15 3.75
2014-7-25 74 66 82 69 84 57 97 1953 1999 0.00 0.15 1.64
2014-7-26 75 69 81 69 84 55 98 1920 1940 0.00 0.16 3.80
2014-7-27 78 71 85 69 84 55 98 1920 1963 0.02 0.16 2.65
2014-7-28 75 68 82 69 84 57 97 1903 1999 0.19 0.17 3.11
2014-7-29 70 64 76 69 84 59 99 1914 1949 0.00 0.17 3.47
2014-7-30 72 63 80 69 84 57 98 1956 1988 0.00 0.17 3.56
2014-7-31 75 68 82 69 84 57 102 1914 1933 0.00 0.17 2.29
2014-8-1 78 71 84 69 84 59 100 1964 1933 0.00 0.16 2.85
2014-8-2 69 63 74 69 84 58 100 1924 1955 0.41 0.16 2.49
2014-8-3 71 66 76 69 84 55 97 1927 2005 0.07 0.17 2.71
2014-8-4 77 70 84 69 84 56 100 1886 1944 0.00 0.16 3.25
2014-8-5 81 71 90 69 84 56 101 1951 1944 0.00 0.16 1.44
2014-8-6 77 70 83 69 84 57 97 1994 1955 0.00 0.16 3.31
2014-8-7 75 66 83 69 84 57 104 1994 1918 0.00 0.15 2.18
2014-8-8 74 65 83 69 84 54 99 1903 2001 0.00 0.15 2.60
2014-8-9 77 66 87 69 84 57 103 1989 2001 0.00 0.15 4.10
2014-8-10 78 68 88 69 83 55 98 1879 1949 0.00 0.14 4.64
2014-8-11 79 71 87 69 83 56 102 1962 1944 0.00 0.14 2.39
2014-8-12 75 70 79 68 83 55 97 1889 1944 0.19 0.14 3.62
2014-8-13 75 68 82 68 83 55 99 1930 2005 0.53 0.14 2.70
2014-8-14 70 63 77 68 83 54 99 1964 1988 0.00 0.15 5.81
2014-8-15 67 61 73 68 83 54 97 1964 1988 0.00 0.14 1.52
2014-8-16 71 63 78 68 83 55 96 1880 1944 0.00 0.15 4.80
2014-8-17 74 66 82 68 83 56 95 1979 1944 0.01 0.14 2.86
2014-8-18 72 63 81 68 83 55 94 1915 2002 0.00 0.14 3.95
2014-8-19 73 63 83 68 83 55 94 1924 2002 0.00 0.15 2.53
2014-8-20 77 70 84 68 82 55 97 1949 1955 0.00 0.14 3.63
2014-8-21 74 65 83 68 82 53 96 1922 1955 0.35 0.15 4.19
2014-8-22 72 65 79 67 82 52 95 1895 1916 0.06 0.14 1.85
2014-8-23 72 67 77 67 82 51 92 1923 1916 0.01 0.14 3.03
2014-8-24 72 64 80 67 82 52 94 1890 1972 0.00 0.14 3.61
2014-8-25 76 64 88 67 82 52 95 1940 1948 0.00 0.14 1.86
2014-8-26 80 70 89 67 81 53 103 1887 1948 0.00 0.12 3.24
2014-8-27 80 70 90 67 81 50 101 1885 1948 0.00 0.13 4.16
2014-8-28 74 66 82 66 81 50 100 1885 1948 0.00 0.13 3.99
2014-8-29 71 61 80 66 81 50 99 1986 1953 0.00 0.12 2.68
2014-8-30 73 65 80 66 81 50 98 1965 1973 0.00 0.12 2.30
2014-8-31 82 73 90 66 80 50 100 1976 1953 0.62 0.12 3.76
2014-9-1 82 75 88 66 80 51 97 1872 1953 0.00 0.13 3.84
2014-9-2 85 77 92 65 80 51 102 1886 1953 0.00 0.13 2.12
2014-9-3 79 72 86 65 80 50 99 1893 1929 0.00 0.13 3.32
2014-9-4 78 69 87 65 79 47 97 1883 1929 0.00 0.14 3.48
2014-9-5 80 72 87 64 79 51 94 1963 1985 0.00 0.13 2.45
2014-9-6 79 67 91 64 79 48 97 1924 1881 0.11 0.13 3.26
2014-9-7 73 65 81 64 78 46 101 1888 1881 0.00 0.14 2.07
2014-9-8 70 65 75 64 78 54 93 1955 1919 0.00 0.13 4.86
2014-9-9 68 63 73 63 78 48 94 1883 1915 0.00 0.13 0.86
2014-9-10 72 63 80 63 77 43 97 1883 1983 0.00 0.13 1.38
2014-9-11 76 69 83 63 77 43 99 1917 1983 0.00 0.13 2.90
2014-9-12 70 62 78 62 77 46 94 1917 1961 0.00 0.14 2.35
2014-9-13 64 58 69 62 76 46 94 1963 1952 0.26 0.14 3.94
2014-9-14 62 53 71 62 76 46 93 1975 1931 0.00 0.14 3.82
2014-9-15 63 55 71 61 76 45 92 1913 1927 0.00 0.15 4.16
2014-9-16 64 58 70 61 75 47 93 1966 1915 0.37 0.15 5.02
2014-9-17 64 55 73 61 75 45 93 1986 1991 0.00 0.15 3.37
2014-9-18 67 57 76 60 75 44 91 1990 1891 0.00 0.15 3.92
2014-9-19 60 54 66 60 74 44 94 1929 1983 0.00 0.15 4.30
2014-9-20 66 57 75 59 74 44 93 1993 1983 0.00 0.15 2.32
2014-9-21 71 67 75 59 73 40 95 1871 1895 0.15 0.15 5.54
2014-9-22 63 55 71 59 73 41 95 1904 1914 0.0 0.15 2.34
2014-9-23 62 52 71 58 73 41 97 1947 1895 0.00 0.14 8.28
2014-9-24 65 58 71 58 72 40 89 1963 1959 0.00 0.15 2.26
2014-9-25 61 57 64 57 72 40 90 1887 1970 0.32 0.14 2.36
2014-9-26 68 58 77 57 71 42 91 1940 1970 0.00 0.15 2.34
2014-9-27 72 60 83 57 71 41 90 1957 1933 0.00 0.15 3.13
2014-9-28 74 64 84 56 70 41 88 1947 1881 0.00 0.16 3.84
2014-9-29 73 67 79 56 70 42 88 1942 1945 0.00 0.16 2.18
2014-9-30 67 62 71 55 70 39 89 1912 1986 0.0 0.16 2.64
2014-10-1 63 61 65 55 69 36 88 1947 1927 0.02 0.15 4.98
2014-10-2 66 61 70 55 69 39 90 1886 1927 0.00 0.14 2.16
2014-10-3 64 56 71 54 68 38 87 1974 1919 0.00 0.14 1.55
2014-10-4 61 52 69 54 68 37 88 1888 1941 1.18 0.13 4.05
2014-10-5 54 46 61 54 68 35 94 1881 1941 0.00 0.15 1.99
2014-10-6 60 50 69 53 67 36 90 1881 1941 0.00 0.14 2.39
2014-10-7 67 63 71 53 67 39 88 1999 1944 0.06 0.15 4.09
2014-10-8 68 62 73 52 67 37 87 1988 2007 0.04 0.14 4.30
2014-10-9 62 55 68 52 66 37 86 2000 1916 0.00 0.15 7.33
2014-10-10 58 52 64 52 66 35 91 1888 1939 0.0 0.16 2.16
2014-10-11 55 50 60 51 65 34 85 1964 1949 0.33 0.15 3.06
2014-10-12 56 48 63 51 65 35 86 1876 1954 0.00 0.14 4.26
2014-10-13 59 52 65 51 65 33 87 1875 1954 0.05 0.14 2.75
2014-10-14 70 63 76 50 64 37 84 1988 1920 0.00 0.15 1.76
2014-10-15 73 69 77 50 64 32 84 1876 1956 0.69 0.14 1.70
2014-10-16 66 61 71 50 64 34 87 1876 1897 1.11 0.14 2.15
2014-10-17 65 59 71 50 63 33 90 1886 1938 0.00 0.14 2.28
2014-10-18 63 56 70 49 63 35 82 1974 1928 0.00 0.14 2.45
2014-10-19 50 44 56 49 63 30 83 1940 1963 0.00 0.14 4.35
2014-10-20 51 42 60 49 62 31 80 1974 1969 0.00 0.14 2.78
2014-10-21 61 55 67 48 62 32 84 1974 1920 0.11 0.14 2.17
2014-10-22 54 50 58 48 62 30 88 1940 1979 1.51 0.15 1.51
2014-10-23 52 50 53 48 61 32 85 1969 1947 0.61 0.14 2.97
2014-10-24 57 51 63 48 61 31 79 1969 2001 0.00 0.14 2.51
2014-10-25 59 50 67 47 61 29 79 1879 1963 0.01 0.15 3.30
2014-10-26 58 53 63 47 61 30 78 1879 1964 0.0 0.13 3.40
2014-10-27 56 48 63 47 60 28 82 1936 1963 0.00 0.14 1.88
2014-10-28 63 53 72 47 60 29 83 1976 1919 0.00 0.13 2.49
2014-10-29 62 51 72 46 60 31 78 1925 1971 0.0 0.14 3.67
2014-10-30 53 47 59 46 59 31 82 1925 1961 0.00 0.13 1.64
2014-10-31 50 45 55 46 59 29 81 1925 1946 0.05 0.14 2.41
2014-11-1 45 42 47 46 59 30 84 1885 1950 0.35 0.14 1.69
2014-11-2 45 41 48 45 58 30 83 1887 1950 0.00 0.14 1.70
2014-11-3 50 39 61 45 58 28 79 1875 2003 0.00 0.13 2.60
2014-11-4 61 53 68 45 58 25 78 1879 1975 0.00 0.13 1.44
2014-11-5 60 56 64 45 57 23 78 1879 1961 0.00 0.13 1.94
2014-11-6 53 48 57 44 57 27 74 1879 1948 0.37 0.14 1.47
2014-11-7 47 40 53 44 57 29 78 1930 1938 0.00 0.13 2.96
2014-11-8 42 36 48 44 57 29 76 1886 1975 0.00 0.12 7.40
2014-11-9 52 46 57 44 56 24 75 1976 1975 0.00 0.13 3.65
2014-11-10 53 44 61 43 56 27 73 1914 1985 0.00 0.13 1.70
2014-11-11 57 49 64 43 56 28 74 1933 1949 0.00 0.12 1.41
2014-11-12 56 47 65 43 55 26 76 1926 1879 0.00 0.12 2.39
2014-11-13 42 36 48 43 55 22 73 1873 1931 0.20 0.13 2.06
2014-11-14 39 35 42 42 55 20 72 1905 1993 0.06 0.13 2.23
2014-11-15 38 33 42 42 54 20 80 1967 1993 0.00 0.13 2.43
2014-11-16 40 35 45 42 54 17 72 1933 1928 0.03 0.13 2.39
2014-11-17 46 40 52 41 53 19 71 1933 1953 1.54 0.14 1.54
2014-11-18 35 24 45 41 53 18 73 1936 1928 0.00 0.14 1.24
2014-11-19 29 22 36 41 53 18 72 1936 1921 0.00 0.14 1.95
2014-11-20 38 31 45 40 52 20 77 1873 1985 0.00 0.13 3.37
2014-11-21 33 28 37 40 52 16 74 1879 1900 0.00 0.14 1.33
2014-11-22 36 28 44 40 52 13 72 1880 1931 0.00 0.14 2.03
2014-11-23 50 43 57 40 51 14 72 1880 1931 0.00 0.14 1.84
2014-11-24 61 53 69 39 51 14 73 1880 1979 0.70 0.14 1.95
2014-11-25 60 51 68 39 50 19 73 1938 1979 0.00 0.13 1.36
2014-11-26 43 34 51 39 50 16 67 1938 1946 1.24 0.14 1.91
2014-11-27 36 34 38 38 50 12 72 1932 1896 0.02 0.13 2.15
2014-11-28 33 29 37 38 49 15 70 1930 2011 0.00 0.14 2.14
2014-11-29 36 27 45 38 49 15 69 1872 1990 0.00 0.14 2.01
2014-11-30 50 45 55 37 49 7 70 1875 1991 0.00 0.15 1.11
2014-12-1 54 42 65 37 48 9 70 1875 2006 0.09 0.14 1.72
2014-12-2 39 35 43 37 48 12 66 1875 1970 0.08 0.14 2.16
2014-12-3 44 41 46 36 47 9 69 1976 1998 0.06 0.15 1.63
2014-12-4 41 37 45 36 47 10 74 1882 1998 0.00 0.14 1.84
2014-12-5 39 34 44 35 47 11 70 1926 2001 0.51 0.14 1.28
2014-12-6 45 39 50 35 46 11 71 1871 2001 1.22 0.13 1.60
2014-12-7 36 30 42 35 46 10 75 1926 1998 0.04 0.14 1.98
2014-12-8 31 24 37 34 45 10 65 1882 1927 0.00 0.14 1.54
2014-12-9 39 36 42 34 45 7 66 1876 1966 2.54 0.13 2.54
2014-12-10 36 32 40 34 45 3 70 1876 1946 0.08 0.14 1.62
2014-12-11 35 31 38 33 44 6 64 1880 1879 0.01 0.14 2.41
2014-12-12 35 32 38 33 44 5 68 1988 1931 0.00 0.13 1.60
2014-12-13 39 34 44 33 44 8 64 1960 1923 0.00 0.13 3.03
2014-12-14 42 38 46 32 43 12 67 1976 1881 0.00 0.13 2.22
2014-12-15 43 37 48 32 43 6 67 1874 2008 0.00 0.13 1.34
2014-12-16 44 38 49 32 43 7 63 1876 1971 0.20 0.12 2.25
2014-12-17 48 42 54 32 42 1 62 1919 2000 0.02 0.13 2.28
2014-12-18 40 37 42 31 42 -1 63 1919 1984 0.00 0.12 1.30
2014-12-19 35 31 38 31 42 -1 58 1884 1931 0.00 0.12 1.58
2014-12-20 32 30 33 31 42 -4 60 1942 2002 0.00 0.12 1.82
2014-12-21 34 31 36 30 41 -1 65 1942 2013 0.0 0.13 2.49
2014-12-22 40 35 44 30 41 2 71 1872 2013 0.04 0.12 2.18
2014-12-23 45 43 46 30 41 -1 66 1883 1990 0.16 0.13 1.61
2014-12-24 51 44 58 30 41 6 63 1983 1996 0.80 0.13 1.42
2014-12-25 53 44 62 29 40 -1 64 1980 1982 0.09 0.13 1.30
2014-12-26 45 40 50 29 40 3 63 1914 1982 0.00 0.12 1.66
2014-12-27 50 44 55 29 40 6 63 1872 1949 0.00 0.12 2.14
2014-12-28 49 43 54 29 40 8 65 1917 1982 0.10 0.12 1.35
2014-12-29 39 34 44 28 39 -6 70 1917 1984 0.00 0.11 2.52
2014-12-30 31 28 34 28 39 -13 65 1917 1984 0.00 0.12 1.69
2014-12-31 30 27 32 28 39 -7 63 1917 1965 0.00 0.11 2.31
2015-1-1 33 27 39 28 39 -4 62 1918 1966 0.00 0.12 2.05
2015-1-2 39 35 42 28 39 2 68 1918 1876 0.00 0.12 1.92
2015-1-3 38 33 42 28 39 -4 64 1879 2000 0.71 0.12 2.42
2015-1-4 49 41 56 27 39 -3 66 1918 1950 0.30 0.12 2.73
2015-1-5 35 21 49 27 38 -4 64 1904 1993 0.00 0.12 1.50
2015-1-6 21 19 22 27 38 -2 72 1896 2007 0.05 0.13 1.65
2015-1-7 16 9 23 27 38 4 64 2014 1907 0.00 0.12 2.67
2015-1-8 15 8 21 27 38 2 65 1968 1998 0.00 0.11 1.25
2015-1-9 26 19 33 27 38 -1 64 1968 1937 0.07 0.13 1.42
2015-1-10 20 16 23 27 38 -6 60 1875 1876 0.00 0.12 1.72
2015-1-11 28 18 37 27 38 3 63 1968 1975 0.00 0.12 1.46
2015-1-12 37 35 39 27 38 2 64 1981 1890 0.36 0.13 2.35
2015-1-13 27 17 36 27 38 -3 68 1914 1932 0.00 0.12 1.44
2015-1-14 24 16 32 27 38 -5 70 1914 1932 0.00 0.12 2.06
2015-1-15 30 25 35 27 38 0 67 1957 1932 0.00 0.13 1.27
2015-1-16 32 20 43 27 38 1 58 2004 1995 0.00 0.12 1.44
2015-1-17 25 17 32 27 38 -2 63 1977 1990 0.00 0.12 1.36
2015-1-18 37 31 42 27 38 0 66 1982 1990 2.10 0.11 2.10
2015-1-19 39 36 42 27 38 -3 64 1875 1951 0.00 0.12 2.39
2015-1-20 36 32 40 27 38 0 61 1994 2006 0.00 0.11 1.41
2015-1-21 31 25 36 27 38 -2 63 1985 2006 0.00 0.12 3.45
2015-1-22 36 31 40 27 38 0 61 1888 1959 0.00 0.12 1.70
2015-1-23 34 28 39 27 38 -3 62 1936 1906 0.00 0.11 2.55
2015-1-24 36 33 39 27 38 -6 68 1882 1967 0.72 0.11 2.18
2015-1-25 37 31 42 27 38 2 60 1945 1967 0.00 0.11 1.80
2015-1-26 27 22 31 27 39 3 72 1927 1950 0.48 0.11 2.19
2015-1-27 25 20 30 27 39 -1 69 1927 1916 0.36 0.11 1.94
2015-1-28 25 16 34 27 39 -2 66 1925 1916 0.00 0.11 1.87
2015-1-29 28 19 36 27 39 0 69 1873 2002 0.02 0.11 1.03
2015-1-30 29 19 38 27 39 2 64 1873 2006 0.06 0.11 1.19
2015-1-31 20 13 26 27 39 -1 63 1920 1947 0.00 0.12 1.51
2015-2-1 28 20 36 27 39 -2 67 1920 1989 0.03 0.11 2.12
2015-2-2 24 14 34 27 39 -3 59 1881 1988 1.02 0.11 2.98
2015-2-3 20 13 26 27 39 0 64 1955 1991 0.00 0.11 1.55
2015-2-4 34 24 43 28 40 0 68 1918 1991 0.00 0.10 2.10
2015-2-5 28 14 42 28 40 -6 70 1918 1991 0.00 0.11 1.43
2015-2-6 20 12 27 28 40 -4 68 1895 2008 0.00 0.11 2.74
2015-2-7 33 25 40 28 40 1 54 1910 1938 0.02 0.11 2.96
2015-2-8 33 29 37 28 40 -7 61 1934 1965 0.00 0.11 1.15
2015-2-9 27 25 29 28 40 -15 63 1934 1990 0.09 0.10 1.74
2015-2-10 33 26 40 28 41 -6 61 1899 2001 0.01 0.11 2.63
2015-2-11 28 22 34 28 41 -2 65 1899 1960 0.00 0.10 2.74
2015-2-12 28 16 40 28 41 -3 62 1914 1999 0.0 0.11 1.66
2015-2-13 15 8 21 29 41 -1 64 1914 1951 0.00 0.10 2.42
2015-2-14 24 16 32 29 41 2 63 1916 1946 0.02 0.11 1.59
2015-2-15 15 4 25 29 42 -8 73 1943 1949 0.0 0.10 1.73
2015-2-16 12 3 21 29 42 1 71 1888 1954 0.00 0.12 1.40
2015-2-17 21 14 27 29 42 -5 67 1896 1976 0.14 0.11 1.49
2015-2-18 26 19 33 29 42 0 68 1979 1981 0.0 0.11 1.50
2015-2-19 18 8 27 30 42 1 66 1936 1997 0.00 0.11 2.15
2015-2-20 11 2 19 30 43 2 69 2015 1939 0.00 0.11 3.07
2015-2-21 23 13 32 30 43 4 68 1896 1930 0.61 0.11 1.86
2015-2-22 38 32 43 30 43 8 69 1963 1997 0.10 0.11 2.39
2015-2-23 23 8 38 30 43 5 70 1889 1985 0.00 0.12 1.38
2015-2-24 14 4 24 30 44 -4 75 1873 1985 0.00 0.12 1.69
2015-2-25 29 20 37 31 44 1 75 1914 1930 0.00 0.11 2.11
2015-2-26 27 21 32 31 44 7 65 1990 1890 0.00 0.12 1.87
2015-2-27 24 18 30 31 44 5 72 1900 1997 0.00 0.12 1.56
2015-2-28 21 13 29 31 45 5 67 1934 1976 0.00 0.12 1.21
2015-3-1 28 24 31 31 45 5 73 1884 1972 0.52 0.13 2.95
2015-3-2 33 27 39 32 45 9 72 1891 1972 0.00 0.12 2.41
2015-3-3 30 22 37 32 45 11 65 2003 1991 0.67 0.12 2.25
2015-3-4 40 35 45 32 46 7 70 1943 1974 0.25 0.13 1.65
2015-3-5 30 19 40 32 46 3 72 1872 1880 0.76 0.13 1.81
2015-3-6 20 12 27 32 46 6 68 1872 1935 0.00 0.13 2.63
2015-3-7 28 18 38 33 47 7 74 1890 1946 0.00 0.13 1.87
2015-3-8 43 37 49 33 47 8 76 1883 1987 0.00 0.14 1.78
2015-3-9 47 40 54 33 47 11 69 1996 2000 0.01 0.13 1.82
2015-3-10 46 39 53 33 48 12 74 1929 2006 0.46 0.13 1.62
2015-3-11 52 44 59 34 48 14 73 1960 1977 0.01 0.13 2.94
2015-3-12 42 36 47 34 48 8 71 1888 1890 0.00 0.13 2.33
2015-3-13 37 31 43 34 49 6 85 1888 1990 0.00 0.12 3.86
2015-3-14 46 40 51 35 49 15 75 1896 1946 0.81 0.14 1.02
2015-3-15 40 36 44 35 49 14 77 1993 1990 0.00 0.14 1.81
2015-3-16 44 35 52 35 50 13 82 1911 1990 0.00 0.14 2.03
2015-3-17 46 34 57 35 50 9 75 1916 1945 0.02 0.15 1.42
2015-3-18 34 29 39 36 50 7 77 1916 1989 0.00 0.14 3.10
2015-3-19 36 29 43 36 51 8 76 1967 1918 0.00 0.15 2.19
2015-3-20 34 29 38 36 51 11 83 1885 1945 0.40 0.15 1.93
2015-3-21 38 29 47 37 51 10 84 1885 1921 0.0 0.15 2.37
2015-3-22 36 28 43 37 52 12 78 1885 2012 0.00 0.15 3.44
2015-3-23 31 23 38 37 52 12 76 1875 1923 0.00 0.16 1.60
2015-3-24 36 26 45 37 52 12 76 1888 1988 0.00 0.15 2.05
2015-3-25 42 34 49 38 53 13 79 1878 1963 0.05 0.15 4.25
2015-3-26 52 42 62 38 53 20 76 1960 1922 0.32 0.15 1.42
2015-3-27 43 39 46 38 54 20 83 1894 1998 0.27 0.16 1.79
2015-3-28 33 26 40 39 54 13 84 1923 1945 0.0 0.15 2.98
2015-3-29 36 25 46 39 54 10 86 1923 1945 0.00 0.15 2.03
2015-3-30 45 36 54 39 55 16 82 1887 1998 0.0 0.16 2.45
2015-3-31 41 35 47 40 55 14 86 1923 1998 0.17 0.15 2.20
2015-4-1 42 32 51 40 56 12 83 1923 1917 0.00 0.16 1.89
2015-4-2 54 41 67 40 56 22 81 1919 1967 0.00 0.16 1.93
2015-4-3 62 59 64 41 56 24 81 1954 1981 0.04 0.16 1.90
2015-4-4 51 42 60 41 57 21 80 1874 1892 0.01 0.16 1.99
2015-4-5 52 42 61 41 57 20 80 1874 1928 0.00 0.16 2.76
2015-4-6 53 42 63 42 58 21 79 1982 1947 0.00 0.15 2.52
2015-4-7 52 42 62 42 58 21 92 1982 2010 0.15 0.16 1.35
2015-4-8 41 37 45 42 58 25 90 1982 1991 0.00 0.15 1.93
2015-4-9 40 37 43 43 59 25 86 1977 1991 0.00 0.16 3.42
2015-4-10 48 39 56 43 59 28 86 1997 1922 0.17 0.17 4.31
2015-4-11 51 44 57 43 60 24 84 1909 1955 0.00 0.16 1.10
2015-4-12 55 43 66 44 60 22 90 1874 1977 0.00 0.16 2.12
2015-4-13 59 50 68 44 60 25 88 1874 1977 0.00 0.16 1.26
2015-4-14 60 55 65 44 61 26 85 1950 1941 0.01 0.16 2.72
2015-4-15 62 51 72 45 61 28 87 1943 1941 0.00 0.15 7.57
2015-4-16 58 52 64 45 62 29 92 1928 2002 0.00 0.14 3.29
2015-4-17 63 55 71 45 62 28 96 1875 2002 0.08 0.15 1.29
2015-4-18 70 59 80 46 62 25 96 1875 1976 0.00 0.14 2.19
2015-4-19 56 48 64 46 63 21 92 1875 1976 0.00 0.15 1.96
2015-4-20 52 46 57 46 63 24 90 1897 1927 1.37 0.14 1.96
2015-4-21 59 52 65 47 63 26 87 1875 1923 0.20 0.14 2.28
2015-4-22 59 48 69 47 64 33 86 1947 2001 0.05 0.14 2.45
2015-4-23 47 41 52 47 64 32 86 1930 2007 0.00 0.14 2.34
2015-4-24 46 39 52 48 64 31 87 1930 2001 0.00 0.14 2.17
2015-4-25 50 38 62 48 65 29 91 1919 1915 0.00 0.14 1.68
2015-4-26 55 46 64 48 65 31 92 1919 2009 0.00 0.14 1.88
2015-4-27 56 49 62 48 65 36 92 1932 1915 0.00 0.14 2.04
2015-4-28 61 50 71 49 66 34 90 1934 1990 0.00 0.15 2.74
2015-4-29 64 50 78 49 66 32 89 1874 1974 0.00 0.14 0.91
2015-4-30 58 48 67 49 66 30 91 1875 1942 0.00 0.13 4.97
2015-5-1 56 49 63 50 67 35 87 1880 2001 0.00 0.12 2.48
2015-5-2 61 48 74 50 67 37 90 1903 2001 0.00 0.12 1.10
2015-5-3 66 51 80 50 67 36 90 1874 2001 0.00 0.13 1.66
2015-5-4 71 57 85 50 68 38 92 1917 2001 0.00 0.13 2.02
2015-5-5 76 66 85 51 68 34 90 1891 1980 0.00 0.13 1.55
2015-5-6 66 59 73 51 68 32 92 1891 1986 0.0 0.13 1.46
2015-5-7 68 56 80 51 68 37 93 1891 2000 0.00 0.14 3.82
2015-5-8 69 56 82 52 69 37 91 1947 2000 0.00 0.12 3.02
2015-5-9 64 57 70 52 69 35 94 1947 1979 0.00 0.13 1.42
2015-5-10 72 61 83 52 69 36 94 1966 1979 0.00 0.13 2.10
2015-5-11 77 70 84 52 70 36 92 1913 1993 0.0 0.12 1.67
2015-5-12 75 64 86 53 70 40 93 1907 1881 0.00 0.13 1.84
2015-5-13 62 53 70 53 70 39 89 1895 1956 0.00 0.12 1.66
2015-5-14 62 50 73 53 70 40 88 1878 1900 0.00 0.12 3.38
2015-5-15 65 55 75 54 71 42 90 1947 1900 0.00 0.13 1.16
2015-5-16 66 57 75 54 71 42 90 1878 1951 0.30 0.13 2.66
2015-5-17 74 64 83 54 71 39 92 1956 1974 0.02 0.13 1.05
2015-5-18 68 60 75 55 71 41 90 1973 1936 0.00 0.13 2.18
2015-5-19 70 59 80 55 72 38 99 1976 1962 0.0 0.13 2.02
2015-5-20 61 54 67 55 72 43 96 2002 1996 0.00 0.14 2.03
2015-5-21 57 52 62 55 72 40 93 1907 1996 0.00 0.14 1.94
2015-5-22 65 55 74 56 72 44 96 1990 1941 0.00 0.15 1.25
2015-5-23 60 49 70 56 73 43 94 1963 1964 0.00 0.15 2.70
2015-5-24 69 56 81 56 73 39 93 1963 1975 0.00 0.15 2.07
2015-5-25 75 64 85 57 73 41 95 1925 1880 0.00 0.15 0.86
2015-5-26 78 67 88 57 74 42 95 1967 1880 0.00 0.15 1.28
2015-5-27 78 70 85 57 74 41 96 1961 1880 0.08 0.14 2.62
2015-5-28 78 70 85 58 74 43 94 1961 1959 0.00 0.14 1.16
2015-5-29 75 65 85 58 74 43 97 1902 1969 0.00 0.16 3.99
2015-5-30 76 67 85 58 75 42 97 1884 1987 0.00 0.15 2.19
2015-5-31 72 57 87 59 75 46 96 1938 1939 1.46 0.15 3.13
2015-6-1 55 51 58 59 75 44 96 1945 1895 0.72 0.16 2.60
2015-6-2 53 50 55 59 76 48 96 1946 1895 0.37 0.16 2.79
2015-6-3 61 52 70 60 76 45 95 1929 1895 0.00 0.16 3.01
2015-6-4 60 54 65 60 76 48 99 1926 1925 0.00 0.16 2.75
2015-6-5 63 55 70 60 76 47 99 1945 1925 0.13 0.16 2.80
2015-6-6 68 60 76 61 77 47 98 1945 1925 0.19 0.16 2.62
2015-6-7 65 55 74 61 77 47 96 1897 1925 0.00 0.16 4.16
2015-6-8 71 63 79 61 77 47 95 1932 1933 0.06 0.16 1.47
2015-6-9 76 68 83 62 78 47 97 1980 1933 0.01 0.16 2.55
2015-6-10 74 65 82 62 78 49 96 1972 2008 0.00 0.16 2.07
2015-6-11 81 72 89 62 78 46 95 1972 1973 0.00 0.16 1.14
2015-6-12 81 73 88 63 78 48 93 1979 1973 0.00 0.16 2.18
2015-6-13 79 72 86 63 79 51 96 1953 1961 0.00 0.16 1.71
2015-6-14 77 66 88 63 79 49 99 1875 1956 0.36 0.16 2.54
2015-6-15 74 64 83 64 79 48 96 1933 1994 0.57 0.15 1.13
2015-6-16 72 65 79 64 80 52 97 1927 1891 0.27 0.15 1.31
2015-6-17 74 66 82 64 80 51 96 1926 1957 0.0 0.16 1.82
2015-6-18 68 64 71 65 80 48 95 1950 1929 0.00 0.14 2.30
2015-6-19 78 68 87 65 80 52 98 1920 1994 0.00 0.14 2.16
2015-6-20 70 64 75 65 81 49 98 1914 1923 0.0 0.13 1.39
2015-6-21 80 71 88 65 81 49 97 1897 1988 0.64 0.14 1.70
2015-6-22 79 70 87 66 81 52 98 1940 1988 0.00 0.13 1.96
2015-6-23 83 75 90 66 81 49 96 1918 1888 0.02 0.13 1.75
2015-6-24 76 68 84 66 82 52 96 1932 1888 0.00 0.13 1.46
2015-6-25 74 65 83 66 82 50 99 1873 1952 0.00 0.14 1.28
2015-6-26 75 69 81 67 82 56 100 1979 1952 0.00 0.13 4.29
2015-6-27 65 58 71 67 82 55 101 1940 1966 1.12 0.12 2.11
2015-6-28 68 62 73 67 83 54 96 1995 1991 0.29 0.13 1.69
2015-6-29 70 63 76 67 83 52 101 1919 1934 0.00 0.12 2.57
2015-6-30 75 68 82 67 83 53 99 1919 1964 0.00 0.13 3.07
Raw
script.js
// Set margin and size of the first svg
const margin = {top: 20, right: 10, bottom: 20, left: 10};
const firstSvg = d3.select("#first-svg");
const innerWidth = firstSvg.attr('width') - margin.left - margin.right;
const innerHeight = firstSvg.attr('height') - margin.top - margin.bottom;
// Change the place the viewbox of the svg so that the zooming function works
firstSvg.attr("viewBox", "" + (-innerWidth / 2) + " " + (-innerHeight / 2) + " " + innerWidth + " " + innerHeight)
const g = firstSvg.append("g")
// Give format to the dates that will appear on the visualization
const innerRadius = 100;
const outerRadius = Math.min(innerWidth, innerHeight) / 2;
const fullCircle = 2 * Math.PI;
const parseTime = d3.timeParse("%d-%b-%y");
const formatTime = d3.timeFormat("%B %d, %Y");
const formatMonth = d3.timeFormat("%b");
// Set scales
const xScale = d3.scaleTime()
.range([0, fullCircle]);
const yScale = d3.scaleRadial()
.range([innerRadius, outerRadius]);
var lineScale = d3.lineRadial()
.angle(d => xScale(d.date)) // x: angle in radians; 0 at -y (12 o'clock)
.radius(d => yScale(d[yInput.node().value])); // y: distance from origin (0,0)
// Build date based on the information passed
const createDate = (dateAsString) => {
let dateAsArray = dateAsString.split('-');
return new Date(dateAsArray[0], dateAsArray[1] - 1, dateAsArray[2])
}
// Process the data after loading the csv
const row = d => {
for (var key in d) {
// check if the property/key is defined in the object itself, not in parent
if (d.hasOwnProperty(key)) {
if (key == 'record_min_temp_year' || key == 'record_max_temp_year') {
let formatDay = d3.timeFormat("%d")
let formatMon = d3.timeFormat("%m")
d[key] = new Date(+d[key], formatMon(d.date), formatDay(d.date))
} else if (key == 'date') {
d[key] = createDate(d[key])
} else if (key == 'average_precipitation' || key == 'record_precipitation'
|| key == 'actual_precipitation'){
d[key] = +d[key]
} else {
d[key] = Math.round(((+d[key]) - 32) * 5 / 9)
}
}
}
return d;
}
// Select dropdown from html
const yInput = d3.select('#ySelect');
// Enable Zoom from 1 to 100
var zoom = d3.zoom()
.scaleExtent([1, 100])
.on("zoom", zoomed);
// This function is called every time the zoom changes
function zoomed() {
let svgScale = d3.event.transform.k
g.attr("transform", d3.event.transform);
}
// Enable zoom on the svg
firstSvg.call(zoom)
// Add title to the center of the chart
var title = g.append("g")
.attr("class", "title")
.append("text")
.attr("dy", "-0.2em")
.attr("text-anchor", "middle")
.text("NYC")
// Add second line to the graph in the center
var subtitle = g.append("text")
.attr("dy", "1em")
.attr("text-anchor", "middle")
.attr("opacity", 0.6)
.text('');
// Add third line to the graph in the center
var subsubtitle = g.append("text")
.attr("dy", "2em")
.attr("text-anchor", "middle")
.attr("opacity", 0.6)
.text('');
// The following arrays are used to populate the two dropdowns in the html
var selectDataTemp = [
"Actual Max Temperature",
"Actual Mean Temperature",
"Actual Min Temperature",
"Average Max Temperature",
"Average Min Temperature",
"Record Max Temperature",
"Record Min Temperature",
];
var dataDict = {
"Actual Max Temperature":"actual_max_temp",
"Actual Mean Temperature":"actual_mean_temp",
"Actual Min Temperature":"actual_min_temp",
"Average Max Temperature":"average_max_temp",
"Average Min Temperature":"average_min_temp",
"Record Max Temperature":"record_max_temp",
"Record Min Temperature":"record_min_temp",
"Actual Precipitation":"actual_precipitation",
"Average Precipitation":"average_precipitation",
"Record Precipitation":"record_precipitation",
}
var invDataDict = {
"actual_max_temp":"Actual Max Temperature",
"actual_mean_temp":"Actual Mean Temperature",
"actual_min_temp":"Actual Min Temperature",
"average_max_temp":"Average Max Temperature",
"average_min_temp":"Average Min Temperature",
"record_max_temp":"Record Max Temperature",
"record_min_temp":"Record Min Temperature",
"actual_precipitation":"Actual Precipitation",
"average_precipitation":"Average Precipitation",
"record_precipitation":"Record Precipitation",
}
// Set global variables for the chart so that they can be changed from within any function
var linePlot;
var dots;
var yAxis;
var yTick;
// Set data on the dot graph by passin the data loaded
const setYAxis = data => {
var value = yInput.node().value; // get the new y value
// Remove is applied every time the function is called before redrawing everything again
yTick.remove()
yScale
.domain([
d3.min(data, d => d[value]),
d3.max(data, d => d[value])
]);
yTick = yAxis
.selectAll("g")
.data(yScale.ticks(5))
.enter().append("g");
yTick.append("circle")
.attr("fill", "none")
.attr("stroke", "black")
.attr("opacity", 0.2)
.attr("r", yScale);
yTick.append("text")
.attr("y", d => -yScale(d))
.attr("dy", "0.35em")
.text(d => {
if (value.indexOf('temp') != -1) {
return d + "°C"
}
return d
});
// Scale given to what is plotted, angle and radius
lineScale
.angle(d => xScale(d.date))
.radius(d => yScale(d[value]));
// Line plotted on the first graph
linePlot
.attr("d", lineScale);
// Location of dots on the graphed line
dots
.attr("cx", d => yScale(d[value])*Math.cos(xScale(d.date)-Math.PI/2))
.attr("cy", d => yScale(d[value])*Math.sin(xScale(d.date)-Math.PI/2))
.attr("r", "2px");
setSubs(invDataDict[value])
}
// Function that places what to place in the center of the graph in two lines
const setSubs = val => {
valArr = val.split(' ')
var sub = ''
var subsub = valArr[valArr.length - 1]
for(var i = 0; i < valArr.length - 1; i++) {
if (sub == '') {
sub = valArr[i]
} else {
sub = sub + ' ' + valArr[i]
}
}
// set text in the center of the graph
subtitle.text(sub)
subsubtitle.text(subsub)
}
// Select tooltip and set when it should appear and disappear
var tooltip = d3.select("#tooltip");
var tooltipMouseOver = d => {
var value = yInput.node().value;
// Sets value on the tooltip
function getTooptipText(d, val) {
txt = ''
if (val.indexOf('actual') != -1){
txt = formatTime(d.date) + "<br>" + invDataDict[val] + ": " + d[val]
} else if (val.indexOf('average') != -1) {
let formatDay = d3.timeFormat("%d")
let formatMon = d3.timeFormat("%m")
txt = invDataDict[val] + "<br>on this day (" + formatMonth(d.date) + " " + formatDay(d.date) + ") since 1880: " + d[val]
} else if (val == 'record_max_temp'){
txt = formatTime(d.record_max_temp_year) + "<br>" + invDataDict[val] + ": " + d[val]
} else if (val == 'record_min_temp') {
txt = formatTime(d.record_min_temp_year) + "<br>" + invDataDict[val] + ": " + d[val]
} else {
txt = invDataDict[val] + "<br>on this day since 1880: " + d[val]
}
if (val.indexOf('temp') != -1){
txt = txt + "°C"
}
return txt
}
// Setting tooltip transition
tooltip.transition()
.duration(200)
.style("opacity", .9);
tooltip.html(getTooptipText(d, value))
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
}
// Disappear tooltip
var tooltipMouseOut = () => {
tooltip.transition()
.duration(500)
.style("opacity", 0);
}
// Load csv data
d3.csv("KNYC.csv" , row, function(error, data) {
if (error) throw error;
// Set the domain of the x and y
xScale.domain(d3.extent(data, d => d.date));
yScale.domain(d3.extent(data, d => d.actual_mean_temp));
// Populate y-axis dropdown and assign function onChange
yInput
.on('change',() => {
setYAxis(data);
})
.selectAll('option')
.data(selectDataTemp)
.enter()
.append('option')
.attr('value', d => dataDict[d])
.text(d => d);
// Add line plot to the graph
linePlot = g.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", "#4099ff")
.attr("d", lineScale);
// Add dots to the graph using the y and x scale
dots = g.selectAll("circle")
.data(data).enter()
.append("circle")
.attr("class", "data-circle")
.attr("cx", d => yScale(d[yInput.node().value])*Math.cos(xScale(d.date)-Math.PI/2))
.attr("cy", d => yScale(d[yInput.node().value])*Math.sin(xScale(d.date)-Math.PI/2))
.attr("r", "2px");
var yValue = yInput.node().value
setSubs(invDataDict[yValue])
yAxis = g.append("g")
.attr("text-anchor", "middle");
// The following functions define the properties of the yTick
yTick = yAxis
.selectAll("g")
.data(yScale.ticks(5))
.enter().append("g");
yTick.append("circle")
.attr("fill", "none")
.attr("stroke", "black")
.attr("opacity", 0.2)
.attr("r", yScale);
// Set the circles properties
yAxis.append("circle")
.attr("fill", "none")
.attr("stroke", "black")
.attr("opacity", 0.2)
.attr("r", function() { return yScale(yScale.domain()[0])});
// Append text to each of the ticks
yTick.append("text")
.attr("y", d => -yScale(d))
.attr("dy", "0.35em")
.text(function(d) { return d + "°C"; });
var xAxis = g.append("g");
// Modify the position of the text of the months
var xTick = xAxis
.selectAll("g")
.data(xScale.ticks(12))
.enter().append("g")
.attr("text-anchor", "middle")
.attr("transform", function(d) {
return "rotate(" + ((xScale(d)) * 180 / Math.PI - 90) + ")translate(" + innerRadius + ",0)";
});
xTick.append("line")
.attr("x2", -5)
.attr("stroke", "#000");
// Append the text of the month on the graph
xTick.append("text")
.attr("transform", function(d) {
var angle = xScale(d);
return ((angle < Math.PI / 2) || (angle > (Math.PI * 3 / 2))) ? "rotate(90)translate(0,22)" : "rotate(-90)translate(0, -15)"; })
.text(function(d) {return formatMonth(d);})
.style("font-size", 10)
.attr("opacity", 0.6)
// Show-hide tooltip when the mouse is hovered over a circle
g.selectAll('circle.data-circle')
.on("mouseover", d => tooltipMouseOver(d))
.on("mouseout", tooltipMouseOut)
});
Raw
scriptCondegram.js
// Select elements from the html
const yInputCond = d3.select('#ySelectCond');
var tooltipCond = d3.select("#tooltipCond")
.attr('class', 'tooltip');
tooltipCond.append('div')
.attr('class', 'date');
tooltipCond.append('div')
.attr('class', 'value');
// Set the size of the second visualization and the svg
var width = 500,
height = 500,
start = 0,
end = 2.25,
numSpirals = 3
marginCondegram = {top:50,bottom:50,left:50,right:50};
// return the angle of the spiral
var theta = function(r) {
return numSpirals * Math.PI * r;
};
var timeScale;
var theBars;
// used to assign nodes color by group
var color = d3.scaleOrdinal(d3.schemeCategory10);
// Set the radius of the spiral
var r = d3.min([width, height]) / 2 - 40;
var radius = d3.scaleLinear()
.domain([start, end])
.range([40, r]);
// Set the attributes of the second svg and center it
var secondSvg = d3.select("#second-svg")
.attr("width", width + marginCondegram.right + marginCondegram.left)
.attr("height", height + marginCondegram.left + marginCondegram.right)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
// Add the points to the second visualization
var points = d3.range(start, end + 0.001, (end - start) / 1000);
// Create the line of the spiral
var spiral = d3.radialLine()
.curve(d3.curveCardinal)
.angle(theta)
.radius(radius);
// Draw the line of the spiral with its corresponding attributes
var path = secondSvg.append("path")
.datum(points)
.attr("id", "spiral")
.attr("d", spiral)
.style("fill", "none")
.style("stroke", "steelblue");
// Create the data that will be set in the dropdown for the second visualization
var selectDataPrec = [
"Actual Precipitation",
"Average Precipitation",
"Record Precipitation",
];
// Load data from KNYC and use the same function from script.js to modify the rows
d3.csv("KNYC.csv" , row, function(error, data) {
if (error) throw error;
// Get the spiral length to get the width of the bars to be created on the spiral
var spiralLength = path.node().getTotalLength(),
N = data.length,
barWidth = (spiralLength / N) - 1;
var someData = [];
// Populate the spiral with the corresponding data
for (var i = 0; i < data.length; i++) {
someData.push({
date: data[i].date,
value: data[i].record_precipitation,
group: data[i].date.getMonth()
});
}
// Assign actions to the dropsown and populate it with the corresponding data
yInputCond
.on('change',() => {
val = yInputCond.node().value
someData = [];
for (var i = 0; i < data.length; i++) {
someData.push({
date: data[i].date,
value: data[i][val],
group: data[i].date.getMonth()
});
}
createBars(someData)
})
.selectAll('option')
.data(selectDataPrec)
.enter()
.append('option')
.attr('value', d => dataDict[d])
.text(d => d);
// Create the timescale around the spiral bar
timeScale = d3.scaleTime()
.domain(d3.extent(someData, d => d.date))
.range([0, spiralLength]);
// create bars
createBars(someData);
// add date labels
var tF = d3.timeFormat("%b %Y"),
firstInMonth = {};
// Add the names of the months to the spiral bar
secondSvg.selectAll("text")
.data(someData)
.enter()
.append("text")
.attr("dy", 10)
.style("text-anchor", "start")
.style("font", "10px arial")
.append("textPath")
// only add for the first of each month
.filter(function(d){
var sd = tF(d.date);
if (!firstInMonth[sd]){
firstInMonth[sd] = 1;
return true;
}
return false;
})
.text(d => tF(d.date))
// place text along spiral
.attr("xlink:href", "#spiral")
.style("fill", "grey")
.attr("startOffset", d => ((d.linePer / spiralLength) * 100) + "%")
})
var createBars = function(someData) {
// Remove current bars if any before creating others
if (theBars != undefined) {
theBars.remove();
}
// Calculate total length of the spiral bar to get the width of the bars to be created
var spiralLength = path.node().getTotalLength(),
N = someData.length,
barWidth = (spiralLength / N) - 1;
// yScale for the bar height
var yScaleCond = d3.scaleLinear()
.domain([0, d3.max(someData, d => d.value)])
.range([0, (r / numSpirals) - 30]);
// Add the bars with their corresponding attributes
theBars = secondSvg.selectAll("rect")
.data(someData)
.enter()
.append("rect")
.attr("x", function(d,i){
var linePer = timeScale(d.date),
posOnLine = path.node().getPointAtLength(linePer),
angleOnLine = path.node().getPointAtLength(linePer - barWidth);
d.linePer = linePer; // % distance are on the spiral
d.x = posOnLine.x; // x postion on the spiral
d.y = posOnLine.y; // y position on the spiral
d.a = (Math.atan2(angleOnLine.y, angleOnLine.x) * 180 / Math.PI) - 90; //angle at the spiral position
return d.x;
})
.attr("y", d => d.y)
.attr("width", barWidth)
.attr("height", d => yScaleCond(d.value))
.style("fill", d => color(d.group))
.style("stroke", "none")
.attr("transform", d => "rotate(" + d.a + "," + d.x + "," + d.y + ")");
// Add function of tooltip for each bar
theBars
// Make tooltip appear when hovering over the bar
.on('mouseover', function(d) {
tooltipCond.select('.date').html("Date: <b>" + d.date.toDateString() + "</b>");
tooltipCond.select('.value').html("Value: <b>" + Math.round(d.value*100)/100 + "<b>");
d3.select(this)
.style("fill","#FFFFFF")
.style("stroke","#000000")
.style("stroke-width","2px");
tooltipCond
.style('opacity',2)
})
// Follow pointer while moving over the bar
.on('mousemove', function(d) {
tooltipCond.style('top', (d3.event.layerY + 10) + 'px')
.style('left', (d3.event.layerX - 25) + 'px');
})
// Disappear tooltip after moving out of the bar
.on('mouseout', function(d) {
d3.selectAll("rect")
.style("fill", d => color(d.group))
.style("stroke", "none")
tooltipCond.style('opacity',0);
});
}
Raw
style.css
#tooltip {
position: absolute;
text-align: center;
width: 220px;
height: 28px;
padding: 2px;
font: 12px sans-serif;
background: lightsteelblue;
border: 0px;
border-radius: 8px;
pointer-events: none;
opacity: 0;
}
body {
margin: 0px;
}
.tick {
font-size: 2em;
}
.axis-label {
fill: black;
font-size: 3em;
font-family: sans-serif;
}
.legendCells {
font-size: 1.5em;
}
.info-text {
padding-left: 100px;
padding-right: 100px;
}
h4 {
padding-left: 100px;
}
ul, ol {
padding-left: 120px;
}
#table {
width: 100%;
visibility: hidden;
position: absolute;
/* top: 30px; */
/* left: 500px; */
font-family: sans-serif;
font-size: 1.2em;
}
.settings-table td {
padding: 20px;
width: 400px;
}
.settings-table {
border: 1px solid black;
}
td {
text-align: center;
}
/* Condegram */
.axis path {
fill: none;
stroke: #999;
stroke-dasharray: 2 3;
}
.axis text {
font-size: 13px;
stroke: #222;
}
text.title {
font-size: 24px;
}
circle.tick {
fill: #f3f3f3;
stroke: #999;
stroke-dasharray: 2 3;
}
path.spiral {
fill: none;
stroke: #ee8d18;
stroke-width: 3px;
}
.tooltip {
position: absolute;
text-align: center;
width: 180px;
height: 28px;
padding: 2px;
font: 12px sans-serif;
background: lightsteelblue;
border: 0px;
border-radius: 8px;
pointer-events: none;
opacity: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment