Skip to content

Instantly share code, notes, and snippets.

@MNoichl
Last active December 28, 2017 18:52
Show Gist options
  • Save MNoichl/451766342e94986fe52ad6d74b485163 to your computer and use it in GitHub Desktop.
Save MNoichl/451766342e94986fe52ad6d74b485163 to your computer and use it in GitHub Desktop.
Publications in philosophy over time
license: mit

This is a simple d3.js graph used as an example in the book D3 Tips and Tricks.

It is aimed at providing some exposure to some d3.js functions and should be taken in context with the text of the book which can be downloaded for free from Leanpub.

forked from d3noob's block: Simple d3.js Graph

date close
1906 90
1912 78
1915 109
1916 102
1917 128
1918 136
1919 127
1921 87
1922 106
1923 89
1924 85
1925 109
1926 108
1927 113
1928 119
1929 111
1930 149
1931 167
1932 237
1933 143
1934 126
1935 102
1936 110
1937 107
1938 166
1939 133
1940 143
1941 96
1943 96
1947 93
1948 94
1949 99
1950 127
1951 116
1952 112
1953 111
1954 118
1955 84
1956 397
1957 411
1958 416
1959 484
1960 435
1961 431
1962 469
1963 420
1964 443
1965 543
1966 498
1967 538
1968 496
1969 468
1970 848
1971 777
1972 783
1973 819
1974 851
1975 1837
1976 1774
1977 1843
1978 1875
1979 2093
1980 2550
1981 2724
1982 2802
1983 2892
1984 2997
1985 2893
1986 2614
1987 2632
1988 2698
1989 2893
1990 2721
1991 2808
1992 2714
1993 2802
1994 2924
1995 2859
1996 2852
1997 2993
1998 3003
1999 2959
2000 3134
2001 3141
2002 3159
2003 3002
2004 3018
2005 3121
2006 3254
2007 3125
2008 3277
2009 3762
2010 3523
2011 3644
2012 3587
2013 3705
2014 3672
2015 4014
2016 3841
2017 3219
<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */
body { font: 12px Arial;}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
</style>
<body>
<!-- load the d3.js library -->
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 30, left: 50},
width = 600 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom;
// Parse the date / time
var parseDate = d3.time.format("%Y").parse;
// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
// Define the axes
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(9);
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(5);
// Define the line
var valueline = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.close); });
// Adds the svg canvas
var svg = d3.select("body")
.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 + ")");
// Get the data
d3.csv("data.csv", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.close = +d.close;
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.close; })]);
// Add the valueline path.
svg.append("path")
.attr("class", "line")
.attr("d", valueline(data));
// Add the X Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Add the Y Axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment