Skip to content

Instantly share code, notes, and snippets.

@ohdebby

ohdebby/index.html

Created September 26, 2015 22:29
Show Gist options
  • Save ohdebby/750cd4b3ceb01b6324c3 to your computer and use it in GitHub Desktop.
Save ohdebby/750cd4b3ceb01b6324c3 to your computer and use it in GitHub Desktop.
Download ZIP
Boy names
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Line Chart with Two Lines</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;
}
circle:hover {
fill: orange;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
</style>
</head>
<body>
<h1>John and Jacob</h1>
<p><strong style="color: steelblue;">John:</strong> Most popular baby boy name in 1910</p>
<p><strong style="color: green;">Jacob:</strong> Most popular baby boy name in 2010</p>
<script type="text/javascript">
//Dimensions and padding
var w = 700;
var h = 600;
var padding = [ 20, 10, 50, 100 ]; //Top, right, bottom, left
//Set up date formatting and years
var dateFormat = d3.time.format("%Y");
//Set up scales
var xScale = d3.time.scale()
.range([ padding[3], w - padding[1] - padding[3] ]);
var yScale = d3.scale.linear()
.range([ h - padding[2], padding[0] ]);
//Configure axis generators
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")
.ticks(10);
//Configure line generator
var line = d3.svg.line()
.x(function(d) {
return xScale(dateFormat.parse(d.Year));
})
.y(function(d) {
return yScale(d.Popularity);
});
//Create the empty SVG image
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
d3.csv("john.csv", function(johnData) {
d3.csv("jacob.csv", function(jacobData) {
//Create a new array that contains both the
//USA and China data, merged into one
var mergedData = johnData.concat(jacobData);
//console.log(mergedData);
//Use the newly merged data to determine the
//min and max values, for setting scale domains
xScale.domain([
d3.min(mergedData, function(d) {
return dateFormat.parse(d.Year);
}),
d3.max(mergedData, function(d) {
return dateFormat.parse(d.Year);
})
]);
yScale.domain([
d3.max(mergedData, function(d) {
return +d.Popularity;
}),
0
]);
//Lines
//
// Note data is wrapped in another array, so all its
// values are bound to a single element (the line!)
//
svg.data([ johnData ])
.append("path")
.attr("class", "line john")
.attr("d", line)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 2);
svg.data([ jacobData ])
.append("path")
.attr("class", "line mary")
.attr("d", line)
.attr("fill", "none")
.attr("stroke", "green")
.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);
svg.append("text")
.attr("x",0)
.attr("y",300)
.text("Popularity")
.attr("stroke-width","1px")
.attr("color","black")
.attr("font-size","14");
svg.append("text")
.attr("x",320)
.attr("y",600)
.text("Year")
.attr("stroke-width","1px")
.attr("color","black")
.attr("font-size","14");
});
});
</script>
</body>
</html>
Raw
jacob.csv
Year Popularity
1910 117
1911 116
1912 110
1913 117
1914 112
1915 121
1916 123
1917 130
1918 133
1919 138
1920 143
1921 143
1922 148
1923 159
1924 163
1925 166
1926 177
1927 172
1928 196
1929 204
1930 212
1931 217
1932 218
1933 213
1934 219
1935 243
1936 227
1937 222
1938 241
1939 262
1940 234
1941 257
1942 252
1943 281
1944 283
1945 293
1946 304
1947 301
1948 290
1949 307
1950 318
1951 311
1952 297
1953 288
1954 306
1955 303
1956 322
1957 331
1958 341
1959 330
1960 352
1961 351
1962 368
1963 352
1964 343
1965 347
1966 351
1967 352
1968 324
1969 295
1970 253
1971 223
1972 156
1973 122
1974 88
1975 75
1976 63
1977 56
1978 50
1979 45
1980 43
1981 43
1982 41
1983 36
1984 37
1985 35
1986 32
1987 31
1988 29
1989 26
1990 20
1991 17
1992 15
1993 9
1994 7
1995 4
1996 3
1997 2
1998 2
1999 1
2000 1
2001 1
2002 1
2003 1
2004 1
2005 1
2006 1
2007 1
2008 1
2009 1
2010 1
Raw
john.csv
Year Popularity
1910 1
1911 1
1912 1
1913 1
1914 1
1915 1
1916 1
1917 1
1918 1
1919 1
1920 1
1921 1
1922 1
1923 1
1924 2
1925 2
1926 2
1927 2
1928 2
1929 3
1930 3
1931 3
1932 3
1933 3
1934 3
1935 3
1936 3
1937 3
1938 3
1939 3
1940 3
1941 3
1942 3
1943 3
1944 3
1945 3
1946 3
1947 3
1948 3
1949 3
1950 3
1951 3
1952 3
1953 4
1954 4
1955 5
1956 5
1957 5
1958 5
1959 4
1960 4
1961 3
1962 3
1963 2
1964 2
1965 2
1966 4
1967 4
1968 3
1969 4
1970 4
1971 4
1972 5
1973 6
1974 6
1975 7
1976 6
1977 6
1978 7
1979 7
1980 8
1981 8
1982 8
1983 9
1984 8
1985 9
1986 10
1987 11
1988 11
1989 12
1990 12
1991 10
1992 14
1993 16
1994 15
1995 13
1996 15
1997 15
1998 15
1999 15
2000 14
2001 14
2002 17
2003 17
2004 18
2005 18
2006 19
2007 19
2008 20
2009 27
2010 26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment