Skip to content

Instantly share code, notes, and snippets.

@jadiehm

jadiehm/PrincessNames.csv

Last active January 26, 2016 17:02
Show Gist options
  • Save jadiehm/486b1e5841ef8e632ac6 to your computer and use it in GitHub Desktop.
Save jadiehm/486b1e5841ef8e632ac6 to your computer and use it in GitHub Desktop.
Download ZIP
Disney Princess Names
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Princess Names</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<style type="text/css">
body {
background-color: white;
font-family: Helvetica, Arial, sans-serif;
}
h1 {
font-size: 24px;
margin: 0;
}
p {
font-size: 14px;
margin: 10px 0 0 0;
}
svg {
background-color: white;
}
path:hover {
stroke: purple;
}
.axis path, .axis line {
fill: none;
stroke: none;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 0.7em;
}
</style>
</head>
<body>
<h1>Disney Princess Names</h1>
<p>The number of baby girls with names inspired by Disney princesses </br> Source: <a href="http://www.huffingtonpost.com/2014/05/14/disney-princess-names_n_5318241.html">Huffington Post</a> analysis of Social Security Administartion data</p>
<script type="text/javascript">
//Dimensions and padding
var w = 700;
var h = 600;
var padding = [ 20, 10, 50, 45 ]; //Top, right, bottom, left
//Sets up date format in YYYY
var dateFormat = d3.time.format("%Y");
//Scales
var xScale = d3.time.scale()
.range([ padding[3], w - padding[1] - padding[3] ]);
var yScale = d3.scale.linear()
.range([ padding[0], h - padding[2] ]);
//Axes
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(15)
.tickFormat(function(d) {
return dateFormat(d);
});
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
//Line graph
var line = d3.svg.line()
.x(function(d) {
return xScale(dateFormat.parse(d.year));
})
.y(function(d) {
return yScale(+d.amount);
});
//SVG
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
//Load data
d3.csv("PrincessNames.csv", function(data) {
//Years array
var years = ["1914", "1915", "1916", "1917", "1918", "1919", "1920", "1921", "1922", "1923", "1924", "1925", "1926", "1927", "1928", "1929", "1930", "1931", "1932", "1933", "1934", "1935", "1936", "1937", "1938", "1939", "1940", "1941", "1942", "1943", "1944", "1945", "1946", "1946", "1948", "1949", "1950", "1951", "1952", "1953", "1954", "1955", "1956", "1957", "1958", "1959", "1960", "1961", "1962", "1963", "1964", "1965", "1966", "1967", "1968", "1969", "1970", "1971", "1972", "1973", "1974", "1975", "1976", "1977", "1978", "1979", "1980", "1981", "1982", "1983", "1984", "1985", "1986", "1987", "1988", "1989", "1990", "1991", "1992", "1993", "1994", "1995", "1996", "1997", "1998", "1999", "2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013"];
//Empty array to hold restructured dataset
var dataset = [];
//Loop once for each row in data
for (var i = 0; i < data.length; i++) {
//New object with the name and empty array
dataset[i] = {
Name: data[i].Name,
babies: []
};
//Loop through years
for (var j = 0; j < years.length; j++) {
// If the value is not empty
if (data[i][years[j]]) {
//Add a new object to the babies data
dataset[i].babies.push({
year: years[j],
amount: data[i][years[j]]
});
}
}
}
//Scales
xScale.domain([
d3.min(years, function(d) {
return dateFormat.parse(d);
}),
d3.max(years, function(d) {
return dateFormat.parse(d);
})
]);
yScale.domain([
d3.max(dataset, function(d) {
return d3.max(d.babies, function(d) {
return +d.amount;
});
}),
0
]);
//Each Name
var groups = svg.selectAll("g")
.data(dataset)
.enter()
.append("g");
//Append a title with the name
groups.append("title")
.text(function(d) {
return d.Name;
console.log(d.Name);
});
//Within each group, create a new line/path,
//binding just the babies data to each one
groups.selectAll("path")
.data(function(d) {
return [ d.babies ];
})
.enter()
.append("path")
.attr("class", "line")
.attr("d", line)
.attr("fill", "none")
.attr("stroke", "gray")
.attr("stroke-width", 2);
//Axes
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (h - padding[2]) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (padding[3]) + ",0)")
.call(yAxis);
});
</script>
</body>
</html>
Raw
PrincessNames.csv
Name 1914 1915 1916 1917 1918 1919 1920 1921 1922 1923 1924 1925 1926 1927 1928 1929 1930 1931 1932 1933 1934 1935 1936 1937 1938 1939 1940 1941 1942 1943 1944 1945 1946 1947 1948 1949 1950 1951 1952 1953 1954 1955 1956 1957 1958 1959 1960 1961 1962 1963 1964 1965 1966 1967 1968 1969 1970 1971 1972 1973 1974 1975 1976 1977 1978 1979 1980 1981 1982 1983 1984 1985 1986 1987 1988 1989 1990 1991 1992 1993 1994 1995 1996 1997 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013
Bambi 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 8 7 9 11 15 6 9 11 8 20 78 104 154 217 227 214 242 252 178 185 162 127 94 98 65 60 73 59 68 71 80 102 108 118 214 209 327 322 203 160 103 74 62 32 35 23 31 20 13 11 13 7 7 6 5 5 5 5 0 0 5 5 8 0 0 7 0 0 0 6 6
Alice 8197 10525 10719 10990 11589 11141 11596 11956 11273 11330 11540 11570 10957 10673 10137 9478 9517 8812 8534 7695 7780 7445 7199 7123 7487 7369 7600 7446 7378 7647 7103 6357 7362 7849 6978 6657 6362 6312 5907 5748 5265 5072 4680 4436 4127 4153 4046 3584 3253 3065 2840 2567 2222 1928 1730 1716 1620 1506 1199 1187 1179 1055 954 858 791 777 738 745 746 698 686 666 706 767 821 740 768 724 686 683 594 579 592 578 593 650 668 631 654 699 755 753 842 949 1023 1273 1778 2190 2491 2915
Wendy 0 0 0 0 5 0 0 7 0 9 0 0 0 16 5 8 17 9 11 10 11 27 67 80 130 222 254 345 481 455 447 577 762 975 1517 2611 3028 3343 3556 3611 4415 4950 4862 4698 4482 5711 6867 7151 6976 7338 8077 10480 9517 11226 10710 10626 11101 10060 8532 7812 7564 7474 6469 5763 4918 4498 4142 3608 2820 2388 2023 1782 1517 1354 1294 1335 1398 1343 1270 1257 1133 1039 969 907 867 899 1003 1254 1207 1086 1039 899 930 864 688 598 497 415 357 394
Aurora 107 147 182 185 226 223 274 329 281 338 357 341 327 360 361 348 325 258 256 211 211 196 193 177 190 178 154 171 223 228 203 213 211 247 199 182 217 188 198 188 167 180 173 164 150 157 176 149 173 153 156 178 175 163 158 131 164 178 153 176 173 178 184 185 167 194 207 211 241 175 206 208 216 252 236 273 293 269 321 365 318 324 355 429 503 519 557 683 664 810 986 949 1067 1066 1170 1487 1523 1719 1898 2108
Snow 6 0 6 0 5 0 5 6 0 0 0 0 0 5 7 0 6 0 5 0 0 0 7 5 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 8 0 0 6 6 0 7 5 0 8 7 6 0 5 0 0 0 0 0 0 6 0 0 5 7 0 6 8 8 6 8 12 9 5 16 12 17 14 15 13 35 59
Ariel 7 23 27 15 25 11 22 16 17 10 11 12 8 12 7 14 8 9 8 7 6 8 11 8 11 7 0 11 8 16 6 8 11 13 5 8 9 7 8 9 8 0 5 11 0 5 12 11 0 9 16 11 10 13 27 30 38 26 31 42 36 60 63 104 162 154 180 228 584 649 636 600 652 625 910 1284 3603 5410 3961 2707 2186 2150 1923 2212 2149 1834 1752 1653 1547 1546 1543 1566 1729 1775 1551 1565 1449 1434 1728 2107
Belle 353 407 334 314 285 252 235 219 187 177 162 140 117 120 93 96 82 62 67 55 50 47 42 46 44 42 32 44 45 51 25 40 42 45 47 56 40 50 46 48 42 31 30 41 39 33 35 33 30 28 33 24 18 16 18 25 22 16 18 17 21 15 12 15 14 22 11 13 15 18 13 9 6 12 6 9 13 8 19 35 41 35 55 62 68 56 74 108 113 107 147 152 146 143 170 134 155 140 162 187
Jasmine 0 8 6 9 8 0 6 0 7 0 0 14 0 13 0 6 5 0 0 8 0 0 0 8 0 0 0 0 0 0 0 5 0 0 7 0 24 24 22 29 34 37 45 50 27 37 34 34 27 33 27 31 38 25 45 54 65 84 89 150 286 384 525 719 797 1042 1189 1399 1446 1568 1928 2705 2991 3724 6439 9550 11033 11521 10476 12060 11711 10278 9706 9679 9478 9351 9092 8954 8862 8057 8480 7860 7512 6761 5511 4869 4161 3685 3360 3024
Tiana 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 8 0 0 0 5 0 7 7 8 14 11 24 14 25 20 24 23 21 22 21 25 41 43 37 51 247 270 173 210 302 377 363 361 328 412 335 383 404 445 498 600 648 796 825 947 1025 938 937 1028 937 887 865 784 757 701 667 662 541 480 499 962 817 703 540
Anna 11865 15120 15228 15160 15667 14500 14580 14473 13405 12861 13081 12249 11702 11210 10574 9744 9082 8431 7920 7070 6677 6162 5725 5447 5140 4931 4718 4430 4487 4233 3635 3606 4000 4238 4041 3894 3815 3864 3711 3839 3993 4094 4382 4443 4656 4871 4652 4664 4439 4247 4284 3919 3667 3717 3558 3714 3793 3571 3444 3499 3610 3568 3580 3851 4169 4664 5029 5182 5268 5219 5304 5881 5902 6162 6434 6889 7288 7114 6839 6802 7519 8553 8549 8332 8368 9088 10576 10568 10381 9438 9514 9096 8596 7876 7253 6789 6307 5641 5594 5315
Elsa 166 237 201 198 173 169 184 154 149 138 140 141 136 138 158 128 136 141 130 124 110 113 130 129 125 151 122 142 136 139 120 126 113 134 139 135 154 178 217 207 246 289 310 339 288 279 280 284 277 285 282 273 294 244 244 280 298 281 262 253 255 255 268 245 226 209 243 241 206 235 216 192 198 171 170 208 242 220 229 197 227 222 228 196 200 236 240 246 283 349 308 350 348 392 411 424 487 499 540 560
Cinderella 6 11 9 16 7 16 11 23 25 16 18 11 10 21 9 14 6 12 9 10 12 5 5 5 7 0 9 16 11 0 11 10 15 9 11 15 19 23 20 13 17 15 14 9 19 13 11 16 15 8 12 15 8 7 7 0 11 0 0 0 0 0 10 5 5 0 5 7 0 5 0 0 0 0 0 0 0 0 6 0 0 0 0 0 0 10 9 8 0 6 7 9 0 5 8 0 8 0 0 0
Mulan 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 16 7 6 8 6 0 0 5 10 5 8 11 11 8 22 27
Merida 0 0 6 0 0 0 0 5 0 0 5 0 0 0 0 7 0 0 6 7 0 5 7 10 5 6 6 7 8 11 0 6 0 7 7 13 0 9 6 8 0 0 7 12 0 8 9 8 0 9 5 9 9 6 11 0 0 0 11 10 0 10 6 5 7 10 11 10 0 5 6 5 0 0 6 0 5 0 7 0 0 0 8 0 0 0 0 5 5 0 0 0 0 0 0 0 0 0 19 109
Pocahontas 0 6 6 7 7 6 6 8 8 10 6 12 0 5 8 6 5 7 10 0 6 0 6 0 6 0 6 0 5 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Rapunzel 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 9 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Nala 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 5 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 24 51 55 54 51 51 56 48 78 94 71 102 92 118 109 123 157 238 232
Esmeralda 0 0 0 7 9 7 7 6 0 6 8 20 14 9 11 16 17 7 8 5 16 8 8 16 13 14 10 21 24 25 27 35 38 36 54 66 67 94 112 98 121 110 98 123 133 137 168 170 163 148 174 156 176 148 159 153 221 198 261 450 389 440 480 471 476 510 518 516 519 440 392 418 465 484 475 555 599 611 629 698 689 654 768 1393 2467 1763 1640 1621 1598 1652 1613 1615 1536 1742 1338 1111 1165 944 882 784
Princess 14 25 15 22 14 20 23 24 21 18 23 23 13 20 13 12 13 15 19 15 14 13 16 21 13 17 20 25 19 24 23 25 28 30 44 33 33 38 34 42 38 52 51 46 64 90 82 93 93 108 98 95 90 87 65 53 70 73 58 76 80 73 70 89 107 150 175 187 220 251 262 267 313 239 278 301 272 251 228 252 210 216 212 239 270 261 279 263 268 383 352 371 400 347 291 300 293 304 244 253
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment